5 Easy Ways to Customize the WordPress Toolbar (And Reasons to Do It!)

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?It doesnt 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 its 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 toolbars design, position and menu items, as well as how to remove the WordPress toolbar entirely. But first, lets talk about why we would even consider doing so. 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 dont 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. Heres how to do it.How to customize the WordPress toolbarIn the sections below, were going to show you how to customize the WordPress toolbar using actual code snippets and CSS. While its 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: Absolutely Glamorous Custom Admin Author(s): CusminCurrent Version: 6.5.3Last Updated: October 7, 2019ag-custom-admin.6.5.3.zip 88%Ratings 526,001Downloads WP 3.0+Requires Chan ge the style of the WordPress admin barWhen you have a look at the WordPress toolbar with your browsers 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/0d4f8ad33f97d76f00be713597258ef5Unfortunately, that will only change the toolbars 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/d1a49954f731b3cbd644cec3c94a23cbMove the WordPress toolbarNow that you know how to change the admin bars CSS, you can also use this to move the toolbar. For example, to chang e the toolbars position to the bottom, you can add the following code inside the same functions.php snippet as above:https://gist.github.com/nschaeferhoff/7e80cb2e851905a0c3d8b46bc8e69764Unfortunately, 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/517000e4ffed5417cf878a81416f6bcfRemove toolbar itemsAlright, now its time to move on to the toolbars content, which is also far from being set in stone. For example, lets say you wanted to remove the Yoast SEO indicator for how well optimized your current post is. For the record, Yoast has an option for this in their settings (its one of many reasons its 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/5757bd60a27ceb226610a5883867d574In 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 toolbarOk, now that weve covered removing items from the admin bar, lets move on to adding. You can add any item you want via functions.php in the following way.https://gist.github.com/nschaeferhoff/616e79cffe1db2b32338536b48021250Heres 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 addressAside from that, you can also add:parent The id of a menu items 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/9cd9bf6b3899bc9ac4966c6750f0b3d9If you dont set any priority, it will simply appear to the right of the existing items.Remove the entire toolbarThere 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.To get rid of it completely, you can put the following code snippet in functions.php:https://gist.github.com/nschaeferhoff/a5418fd62c82f442eb8ec659d56ade0fThis 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/aeca664a7f82e77ce0b911994b5d0b55Of 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.ConclusionThe 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 its 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 toolbars 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! How to customize the #WordPress toolbar using code