7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Cleaning Up and Organizing the Left Menu

The WordPress admin's left menu is the place where you can get access to everything related to the backend. And by default it looks pretty good, but sometimes you might need to rearrange things or maybe remove some of the sections. Let's find out how. Before we start changing things in the backend, we need to know how we're gonna do it. There are two ways, you can do it via a plugin, or you can do it via a theme. So, what we're gonna do in this case, we're gonna create a child theme of 2015. So if we go here, we see we have three themes installed and we're gonna create a child of this one. Now, creating a child is actually very simple. Inside our Themes folder, we're gonna create a new folder called 2015 child. Now, you don't have to name it like this, any name will do, but this is actually recommended. Now inside that folder, we're going to create two files. One of them will be styles.css and the other will be functions.php. So when working with a trial theme, these are the only two files you need. Now inside style.css, we need to write something like this this is the file header that will actually tell WordPress everything it needs to know about the theme. So we have a theme name uri, a description, author the template here is the most important part 2015. This tells WordPress that this theme Is a child theme of 2015 then version, license, all the usual stuff, and that's it for style.css. Now inside functions.php, we're gonna start with a PHP tag and the first thing we'll write is the child theme script because we do need to import the style sheet from the main theme. So here we're gonna say enqueue the parent theme's style sheet. To do that, we're gonna create a function called theme_enqueue_styles, and inside, we're gonna say wp_enqueue_style, we're gonna call it parent-style, and we're gonna get it from get_template_directory_uri, to which we're gonna append /style.css. So basically, we're getting the style.css from 2015 here, and we're enqueuing it or we're loading it. Then we simply do add action, wp enqueue scripts, theme enqueue styles. And what we're saying here basically is when wp_enqueue_scripts is executed, also execute my function here, so load the parent style. All right, so now let's go back into the WordPress admin here, let's refresh. And you'll notice we have our new theme. Tuts plus testing theme, version, author, and most importantly, it says this is a child theme of twenty fifteen. Activate it. As you can see, in the back hand, nothing has changed. In the front end, nothing is changed. So, what we can do now is start working on the customization, without actually altering one of the default themes. As I said, this can also be done by a plugin, but we'll go the theme route. All right, so let's see about this left menu here and how we can customize it. Well, probably the first thing you'll want to do, is remove some of the items that you don't need. For that, we're going to create a new section here, and we'll start with a function, let's call it edit_wp_menu. And this function will actually be tied to the admin menu function. Put a hook here, add an action ('admin_menu', 'edit_wp_menu'). All right, so let's remove some menu items. Now, this is really easy. You gotta use the remove menu page function and this function, if we take a look at the codex, receives a single parameter, the menu slug or the the menu id. The codex actually gives us the full list of the pages that we can remove. So, for example, if we want to remove the dashboard, we would do remove_menu_page( 'index.php'). If we want to remove the pages, we will do this bit. The appearance ,we would do this bit. So let's say that we don't want any comments on our website. Well we just gotta do this, remove 'edit-comments.php'. So let's actually copy this, paste it in, do a save, and then come back to our Dashboard. And as you saw, the comments just disappeared like that. Now this just removes it from the menu. So if I go to edit, comments php here, it's still available. So if you know the full link then you can access it, but it has been removed from the left menu. Now what if you want to add a menu item? Well you can do that with the function add menu page. So let's have a look at it in the codex. Add menu page, it receives a couple of parameters, page title, menu title which is the stuff, the text that's gonna be on the menu, capability, so basically which type of user can access it. Then there's the menu slug. This actually refers to the file that's gonna be opened. Then we have a function, it's like a callback function, it will display the page content for that menu. Then we have an icon URL and a position, and the position of course dictates how high or how low that page or that link will be displayed in the menu. So let's do a simple page here, add_menu_page), and we're gonna start with the page title. Let's say new comments. We're gonna add a fictional page here called comments. The menu title is gonna be my comments then the capability, we'll put it at as admin so the admin can manage options. Then it's going to be the slug, or the PHP file that's going to be opened. In our case, we'll just put back edit, comments.php. The one we removed from the top. Then we have the function, which we'll leave blank. Then the icon URL, which we're going to leave blank. And for position, let's put six. All right. So now if we refresh, you're gonna see my comments right here, and this takes us to the comments page. Now of course, you can link this to any kind of PHP file you want. For example, if you're creating a plugin and you wanna add a page for controlling that plugin, you would use this function to put it in the left menu. All right. Now, what about changing the menu order? Because there is a certain order in which these menu items are displayed. Well, it's actually really easy to change that using filters. So let's say here, change menu order and we're gonna write a function, change menu order, and we're gonna passin menu order. And then, we'll basically say, return array and inside we're gonna put this, index php. Then, let's say we wanna move the appearance or themes php right below the dashboard. So, if you're wondering how I know all this, well I'm just looking at the order that's presented here in remove menu page. So as you can see, index corresponds to the dashboard, which is the first one, and then themes is under comments, just like you see here. Well, we removed the comments, but it was there. Plugins under appearance, yeah. So, it's the correct order. So, if I wanna move themes below the index, I will just put it right here in the array, themes.php. And then I will do edit.php and what else? Maybe I'll want to move the pages above the media. And I will do In this and then I will do the upload and we can actually stop here the rest will be filled in automatically. So with the function done, we gotta tie it in to the menu order function. So first we're gonna do a filter for custom menu order and we're writing this so it actually fires the menu order function. So we're gonna do add_filter, again, 'menu_order', 'change_menu_order'. All right. So again, we're doing this bit to trigger 'menu_order', and, when this is triggered, we're gonna load in our function, which will take in the existing 'menu_order', and we'll return the new array here. So right now, if we do a refresh, you're going to see that the appearance is moved below the dashboard and the pages above the media. So there it is, dashboard, appearance, posts, pages, and media. Now what if we want to rename some of the items? For example, rename posts to articles. Well it's really easy to do that as well. So right here I'm gonna say rename posts to articles and then we gotta grab the menu and sub-menu globals. And then we're gonna do something like this, menu and I'm gonna explain what I'm doing in just a bit. 5,0 equals articles. Now let's see if that works and there it is. Instead of posts, we now have articles. All right. So let me actually walk you through this. Let's do a printR of menu, so this is a representation of this menu array. Now we can see that on position five and zero we have posts, so this is what you look for by basically. If you want to change the text of the parent item in the menu, you got to look for it in the menu global If you wanna change My Comments, you would go to menu, six, and then zero. So that's what I did here, and if you're wondering how I got this representation of the printR output, well I am using an extension that's called PHP View. You can find it in the extension store for Chrome. Now, if you wanna change the sub menu, let's actually do a printR of that. The sub menu actually refers to these four bits. So you wanna change all posts, add new categories and tags. So, if we do a printR again, we're gonna see that these are in sub menu, and they will be on positions five, ten, fifteen, and sixteen, and then the second key will be zero in all cases. All right, so let me just show you how you would approach this. You would do submenu, which is targeting the submenu global variable, you would do position five, which is this. And then, position zero, which is this for All Posts. And then, instead of All Posts, I would say All Articles. And then I will do the same for the other three. However, we've gotta put edit.php in here, which is the file that we're targeting basically. And then for the other three, we're gonna have positions 10, 15 and 16 and we are going to say add an article, article categories and tag respectively. So now if we refresh and we go to articles we can see the newly updated labels. Now the thing is when we go to all articles, we still see posts here, so lets change that as well. To do that, we are going to write a new function called change change_post-labels. And then here, we're gonna get another variable, a global one called wp_post_types. Now let's actually do a print_r of this variable, and see how it looks. And of course this doesn't work, because the function isn't called anywhere. So let's add an action here and we're gonna tie this in in it change post labels. All right, so now we can see that we have the labels here for post and it says posts post. So for every single piece of text that is displayed in the backend, We have the label right here. So this is the stuff that we need to target. All right, so the way you would do this is actually very simple. First of all, we need to get the current host labels. So we would do article labels equals wp post types and I'll select post. Which is this one here we also have labels for page here and also for attachment and for every other page that there is in the back end and then labels. All right now once we do this, we basically need to copy all of these labels here and change them with our own. So we will do something like this article labels Name, which is this first one, instead of Posts, Articles singular_name, it's actually Article here, add_new, add_new_item, and so on. So let's actually refresh this page, and we're gonna see that instead of Posts. We have articles written everywhere, in the button, in the search button here. So that's how you would change the post labels. And you can do this to any page in the backend. And that's how you customize the left menu. Now, another part of the WordPress admin you can play around with is the dashboard screen. That's coming up next.

Back to the top