customize the wordpress toolbar

The admin bar is an iconic part of WordPress. Like the WYSIWYG editor or the WordPress dashboard, everyone who works with WordPress is deeply familiar with it. So, why would you want to customize the WordPress toolbar?

the wordpress admin toolbar

It doesn’t seem like much, but the WordPress toolbar can greatly improve workflow. I still remember seeing in a tutorial that a click on the site name in the toolbar can take me from the back to the front end and vice versa. Without typing in or deleting /wp-admin in the browser bar! My life was never the same again.

Like almost every part of WordPress, the toolbar is customizable. That means, if it’s not entirely up to your needs, you can make any desired change you want. And that is exactly what we will do in this tutorial.

Below, we will show you how to completely customize the WordPress toolbar’s design, position and menu items, as well as how to remove the WordPress toolbar entirely. But first, let’s talk about why we would even consider doing so.

Why would you want to customize the WordPress toolbar?

Just for the record: the WordPress admin bar is great as it is. It’s a super useful tool with many shortcuts that make a lot of sense. So, why would you want to mess with it?

Well, there are several reasons:

  • You wish there was a shortcut to a part of your site that you or your client use frequently.
  • A plugin or theme added something to the bar that you don’t like and want to get rid of.
  • You simply feel like the admin bar could look better or would make more sense in another place.

As you can see, there are good reasons to do something about the standard toolbar. Here’s how to do it.

How to customize the WordPress toolbar

In the sections below, we’re going to show you how to customize the WordPress toolbar using actual code snippets and CSS. While it’s fairly simple if you already have a basic understanding of CSS/PHP, we understand that not all of our readers have the requisite knowledge. So if you feel overwhelmed at any time, a more user friendly solution might be to use the free AG Custom Admin plugin:

Change the style of the WordPress admin bar

When you have a look at the WordPress toolbar with your browser’s developer tools, you can quickly see that it has its own CSS class called #wpadminbar. Theoretically, you can change the styling by simply adding markup to your stylesheet. For example, to change the background color, you can do this:

https://gist.github.com/nschaeferhoff/0d4f8ad33f97d76f00be713597258ef5

Unfortunately, that will only change the toolbar’s styling on the front end and not in the back (because the theme stylesheet does not load there). For that reason, a better method is to add the styling with a function and then apply it to both the back end and front end. To do that, you could add the snippet below to your functions.php file or a plugin like Code Snippets.

https://gist.github.com/nschaeferhoff/d1a49954f731b3cbd644cec3c94a23cb

Move the WordPress toolbar

Now that you know how to change the admin bar’s CSS, you can also use this to move the toolbar. For example, to change the toolbar’s position to the bottom, you can add the following code inside the same functions.php snippet as above:

https://gist.github.com/nschaeferhoff/7e80cb2e851905a0c3d8b46bc8e69764

Unfortunately, the menus in the toolbar still open to the bottom and are thus now invisible. However, fear not, you can remedy that with this markup:

https://gist.github.com/nschaeferhoff/517000e4ffed5417cf878a81416f6bcf

Remove toolbar items

Alright, now it’s time to move on to the toolbar’s content, which is also far from being set in stone. For example, let’s say you wanted to remove the Yoast SEO indicator for how well optimized your current post is.

customize wordpress toolbar remove menu items For the record, Yoast has an option for this in their settings (it’s one of many reasons it’s one of our must-have WordPress plugins), However, you can also do this by adding this code to functions.php:

https://gist.github.com/nschaeferhoff/5757bd60a27ceb226610a5883867d574

In similar fashion, you are also able to get rid of some of the default menu items. Just replace the part where it says 'wpseo-menu'. This signifies which menu item you are removing. For example, to remove the WordPress logo, replace 'wpseo-menu' with 'wp-logo'.

To find out the names of other menu items, look at their HTML id with your developer tools. Then remove wp-admin-bar- from the beginning to get the right id.

Add items to the WordPress toolbar

Ok, now that we’ve covered removing items from the admin bar, let’s move on to adding. You can add any item you want via functions.php in the following way.

https://gist.github.com/nschaeferhoff/616e79cffe1db2b32338536b48021250

Here’s what the different markup means:

  • id – The id of the menu item (required).
  • title – The text that will show up inside the toolbar.
  • href – The place the menu item links to. Can be a WordPress document (e.g. plugins.php) or an external address

Aside from that, you can also add:

  • parent – The id of a menu item’s parent. Use this to add menu items to existing menus.
  • meta – Add a bunch of meta data such as HTML, class and more. For more info, check the WordPress Codex.

To control where exactly the menu item will appear, you need to play with the priority. For example, the WordPress logo on the left has a priority of 10, so to add an item next to it, you would have to set its priority to 11 like so:

https://gist.github.com/nschaeferhoff/9cd9bf6b3899bc9ac4966c6750f0b3d9

If you don’t set any priority, it will simply appear to the right of the existing items.

Remove the entire toolbar

There may be times where you want to remove the toolbar entirely. If that is the case, first check your profile page. Here, you can at least disable the WordPress toolbar on the front end for your own user account.

customize the wordpress toolbar disable toolbar

To get rid of it completely, you can put the following code snippet in functions.php:

https://gist.github.com/nschaeferhoff/a5418fd62c82f442eb8ec659d56ade0f

This removes the admin bar completely from your site for everyone. If you only want to hide it for a particular user group, you can also do so. For example, this removes the toolbar for everyone who is not an administrator:

https://gist.github.com/nschaeferhoff/aeca664a7f82e77ce0b911994b5d0b55

Of course, you can customize this to fit your needs. Also, be aware that this will only disable the WordPress toolbar on the front end. There are good reasons not to completely get rid of it on the back end. For example, you would lose the ability to log out of your site.

Conclusion

The WordPress toolbar is an awesome tool that contains loads of useful shortcuts. Using it will make working with your WordPress site much easier. However, in case it’s not doing exactly what you want, you can also completely customize the WordPress toolbar using your own PHP and CSS.

Above you have learned how to change the toolbar’s styling and position, remove and add menu items as well as get rid of the toolbar entirely. With this knowledge, you are now ready to make the WordPress toolbar your own. What are you waiting for?

How are you going to customize the WordPress toolbar? Let us know in the comment section below!
Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Download free guide