FREELessons: 15Length: 1.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Changing the Default Admin Bar

The admin bar is displayed in both front end, and back end, of course, if you're logged in. It is a fixed bar that gives you the option to add a new post, page, see new comments, and much more. So, let's see how we can alter its appearance and functionality. First of all, when working with the admin bar you can take advantage of the class WP admin bar. Which has certain methods or functions that allow you to add items or remove items. So they are add menu and remove menu. So let's actually see how to remove some of the items first. We're gonna start with a function called remove admin_bar_links, and were gonna say add_action. Were going to tie it to wp_before_admin_bar_render. All right. So we start with the global variable And let's actually do a print r for this. So you can see what we're dealing with. All right. So in here, you'll basically see all the nodes, or all the items in the bar, right? So you have user actions. You have user info. You have log out, edit profile, my account, WP logo. So let's say you want to remove the logo. To do that you would simply do wp_admin_bar remove_menu wp_logo so now. We don't have that logo here on the left. And I'm just gonna comment this, so you can see this is the logo and now it's gone. And you can do this with virtually any item from this list. For example, if you want to remove this, this is called my account. So if we go and we say my account. That's going to remove it completely. Now, of course, this is not how I'd exactly recommended it, because it gives you no way of logging out after that. But, If you want it, it's there. Now how do you add a link? If you want. Well, lets do that now. Again, you will start with a function, add_admin_bar_links. Tie that to admin_bar_menu. And here we gotta add an extra parameter. And that will basically give us the position where the lengths will be inserted. So 100 means right at the end of the list. Lower value means further to the left. So in here we start again with the global, and then we would do wp admin_bar_add_menu and here we're going to have an array and we start with the ID, we'll just call this tutsplus-menu. Then for title, we're going to go with Tuts+, then we gotta give it an href. Let's just make it go to, and then we can also add some meta. And in here we can put some more options, like for example, the target of the link, so we're gonna say target blank. All right, so let's check it out and there it is, Tuts+ and it takes us to in a new window. Now, if we were to change this to 15 for example, it will put it right here. Change it to 25 and maybe 35, and it would put it right here. So you can play around with the priority here to determine the position of your new link. Now, if you're wondering how you can customize the appearance of the menu, well it's actually very simple. We're gonna write a function. Let's say admin_bar_css. And we're gonna tie that in admin_head, admin_bar_css. And in here we can put a style tag, and inside we can target the #wpadminbar, for example. And, for example, let's set the background color to something else like this black here. So I'm gonna paste that in and then refresh, and now we have a black admin bar. And this is independent from the color scheme actually. So that's one way of customizing it. And that's it for the admin bar. In the next lesson we'll talk about customizing the posts and pages editing screens. I'll see you there.

Back to the top