The more plugins you use, the more items might appear in your WordPress admin bar.

So, you might want to hide items from there to uncluster it.

Or, you might want to hide items so your client won’t “play” with them.

Therefore, in this tutorial, I’ll teach you how to do that with some simple CSS code. It will be easy!

Hide items from the WordPress admin bar using CSS

To completely remove them using PHP is a bit more complex and quite unnecessary, to be honest.

Google is not a fan of hiding links, yes, but that’s for the front-end. Your WordPress admin bar is in the back-end, where search engines don’t crawl.

It will also be simpler to restore the items to the admin bar when needed.

Step 1 – Install a plugin to add CSS in the admin area

Since we’re talking about changes in the back-end, you can’t add the CSS code using standard methods that you’d usually use for the front-end.

You’ll need a special plugin to add custom CSS to your WordPress admin area, and that plugin is called Add Admin CSS.

So, install and activate that, then add the CSS code from step 3 in Appearance > Admin CSS.

Note: For whatever reason, the plugin doesn’t show when you search for it in WordPress, so you’ll have to download it from the repository and manually upload it.

Step 2 – Find out the CSS ids for the items

To do that, you have to:

• Right-click exactly on the item;
• Click Inspect or Inspect Element (depends on the browser);
• A window will appear at the bottom. Copy the CSS id from the <li> tag.

In my example, I’ve chosen to hide the WP Rocket (affiliate link) item from the WordPress admin bar. So, the CSS id is wp-admin-bar-wp-rocket.

Step 3 – Add the CSS code

You have to add the below CSS code and clear the site and browser cache if the changes don’t take effect after you click the Save button and the page refreshes.

#wp-admin-bar-wp-rocket {display: none;}

If that doesn’t work, force it by adding !important, like this:

#wp-admin-bar-wp-rocket {display: none !important;}

Of course, you need to add the id of your particular item, not the one above, unless you have WP Rocket, too, and want to hide it from the admin bar.

To add more items, just find out their ids and add them one after another, separated with a comma, like this:

#wp-admin-bar-wp-rocket, #wp-admin-bar-wp-logo, #wp-admin-bar-new-content {display: none;}

If you want to hide all the items from the WordPress admin bar,
use this CSS code:

#wpadminbar .quicklinks {display: none;}

They will all disappear.

If you want to remove the whole WordPress admin bar, then read this guide that I’ve written.

That’s a wrap

Hope you found the post useful and comprehensive!

Don’t forget to share the post to help out others!

You can quickly subscribe to my newsletter by using this link.

If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.

You can also hit the follow button on Twitter and subscribe to the YouTube channel.

My WordPress blog and or website installation service is at your disposal!

On-going WordPress support and maintenance services are on the menu as well!