# 5 Easy Ways to Customize The WordPress Toolbar (And Reasons To Do It!)

Last Updated: July 6, 2022
Posted in: Resources
6 comments
Themeisle content is free. When you purchase through referral links on our site, we earn a commission. Learn More

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.

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.

How to customize the #WordPress toolbar using code
Click To Tweet

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

Custom Dashboard & Login Page – AGCA

Author(s): Cusmin

Current Version: 7.1

Last Updated: May 28, 2022

ag-custom-admin.7.1.zip

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

### 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' );

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

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!

How to customize the #WordPress toolbar using code
Click To Tweet

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

### By Nick Schäferhoff

#### Themeisle Contributor

##### 3 Posts

Nick Schäferhoff is an entrepreneur, online marketer, and professional blogger from Germany. He found WordPress when he needed a website for his first business and instantly fell in love. When not building websites, creating content or helping his clients improve their online business, he can most often be found at the gym, the dojo or traveling the world with his wife. If you want to get in touch with him, you can do so via Twitter or through his website.

### Posted in:

Resources

### Share Now!

Share
Tweet
Comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Copyright © 2022 Themeisle | Powered by VertiStudio
X

### Most Searched Articles

#### 10 Best Free Blogging Sites to Build Your Blog for Free in 2022: Tested, Compared and Reviewed

Looking for some free blog sites to help you start sharing your writing with the world? Whether you just want to share updates with your family and friends or you want to start a blog and build a broader audience, we’ve put together ten great ...

#### How to Create and Start a WordPress Blog in 15 Minutes or Less (Step by Step)

So, you want to create a WordPress blog. Congratulations! WordPress is an excellent solution for how to start a blog, plus we think blogs are super awesome! Better yet – it’s also surprisingly simple to create a free blog. That’s ...

#### The Complete Personal Blog Guide: How to Start a Personal Blog on WordPress

There’s plenty of space on the internet for everybody. People love to share ideas, give shape to their thoughts, and maybe even reach a global audience. How to put yourself on the path to achieve all of that? For once, what if you start a ...

### Handpicked Articles

#### How to Make a WordPress Website: Step-by-Step Guide for Beginners

Believe it or not, knowing how to make a website from scratch is one of the more essential skills you should master as a small business owner in this day and age. Please bear with me! Here’s why: If you know how to make your own website, you ...

#### 7 Fastest WordPress Hosting Companies Compared: August 2022 Data

The web host you choose to power your WordPress site plays a key role in its speed and performance. However, with so many claiming to offer the fastest WordPress hosting out there, how do you decide which company to use? In addition to performance, ...

#### How to Install XAMPP and WordPress Locally on Windows PC

Want to install XAMPP and WordPress – aka. install WordPress locally? This is a great idea if you want a development site that can be used for testing or other purposes. XAMPP lets you run a website from your very own computer. And once you ...