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 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.

Let’s get started!

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:

AGCA – Custom Dashboard & Login Page

Author(s): Cusmin

Current Version: 7.2.5

Last Updated: May 10, 2024

ag-custom-admin.7.2.5.zip

88%Ratings 30,000+Installs WP 3.0+Requires

• Change the style of the WordPress admin bar
• Move the WordPress toolbar
• Remove toolbar items
• Add items to the WordPress toolbar
• Remove the entire toolbar

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:

#wpadminbar {
    background: blue;
}

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.

function style_tool_bar() {
    echo '
    ';
}
add_action( 'admin_head', 'style_tool_bar' );
add_action( 'wp_head', 'style_tool_bar' );

Code Snippets

Author(s): Code Snippets Pro

Current Version: 3.6.6.1

Last Updated: November 28, 2024

code-snippets.3.6.6.1.zip

94%Ratings 1,000,000+Installs WP 5.0+Requires

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:

body.admin-bar {
	margin-top: -32px;
	padding-bottom: 32px;
}

#wpadminbar {
	top: auto !important;
	bottom: 0;
}

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:

#wpadminbar .quicklinks>ul>li {
	position:relative;
}

#wpadminbar .ab-top-menu>.menupop>.ab-sub-wrapper {
	bottom: 32px;
}

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.

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:

function remove_toolbar_items($wp_adminbar) {
  $wp_adminbar->remove_node('wpseo-menu');
}

add_action('admin_bar_menu', 'remove_toolbar_items', 999);

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.

function add_toolbar_items($wp_admin_bar) {
			$wp_admin_bar->add_node( array(
			'id'		=> 'supportlink',
			'title' => 'Contact support',
			'href' => 'mailto:support@domain.com',
		) );
}

add_action('admin_bar_menu', 'add_toolbar_items', 999);

👉 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:

add_action('admin_bar_menu', 'add_toolbar_items', 11);

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.

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

show_admin_bar(false);

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:

function conditionally_remove_admin_bar() {
	if (!current_user_can('administrator') && !is_admin()) {
	  show_admin_bar(false);
	}
}

add_action('after_setup_theme', 'conditionally_remove_admin_bar');

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 🧐

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!