Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

What Everybody Ought to Know about the WordPress Admin Bar

Last updated on by
Elegant Themes
What Everybody Ought to Know about the WordPress Admin Bar

In WordPress 3.1, a lot of cool features were added. Among those features was the WordPress Admin Bar. In this article, we will cover what is a WordPress admin bar, why it was added, and how you can utilize it for your benefits. This article will also show you how to remove the WordPress Admin Bar, how to remove links from the admin bar, how to add links in the admin bar, and much more.

What is the WordPress Admin Bar?

If you have used a WordPress.com blog, then you are already familiar with this. In WordPress 3.1, an administration bar was added to connect the back end to the front end of your blog. This feature will be most useful for people on multisite installs because they can add other useful links, advertisement, and much more on the admin bar for their registered users. It is also good for single-site users because it provides 1-click access to the dashboard.

WordPress Admin Bar

Why the WordPress Admin Bar?

According to Matt Mullenweg, this is the “first step toward a front-end editor”. The admin bar certainly makes life easier for a lot of beginners because it easily lets you edit the posts, write a new post, check the updates, get short-link, and more. We really like it because now our editors don’t have to look further to find a branded short-URL for our page. We have added it in our admin bar. It would be interesting to see how this Admin Bar evolves in the future versions.

Now lets get into what you can do with this Admin Bar. First thing would be how to remove it. A lot of people had an uproar about the admin bar because it was annoying.

How to Disable WordPress Admin Bar

The developers of WordPress made it really easy for you to disable the Admin Bar. Simply go to Users » Your Profile. Then simply check off the following:

Disable WordPress Admin Bar

But this is per user basis. If you are working on a site for a client and you want to get rid of it for each user, then simply open your theme’s functions.php file and paste the following code:

add_filter( 'show_admin_bar', '__return_false' 

The code above will get rid of the admin bar, but it will leave the remains on the user profile page. To get rid of that, lets add this code:

add_action( 'admin_print_scripts-profile.php', 'wpbeginner_hide_admin_bar' );
function wpbeginner_hide_admin_bar() { ?>
<style type="text/css">
    .show-admin-bar { display: none; }
</style>
<?php
}

Move the WordPress Admin Bar to the Bottom

By default, the Admin bar shows on top of each page. If you don’t like the placement, then you can move it to the bottom. Simply add this code in your theme’s functions.php file:

	function stick_admin_bar_to_bottom_css() {
	        echo "
	        <style type='text/css'>
	        html {
	                padding-bottom: 28px !important;
	        }
	       
	        body {
	                margin-top: -28px;
	        }
	       
	        #wpadminbar {
	                top: auto !important;
	                bottom: 0;
	        }
	
	        #wpadminbar .quicklinks .menupop ul {
	                bottom: 28px;
	        }
	        </style>
	        ";
	}
	
	add_action('admin_head', 'stick_admin_bar_to_bottom_css');
	add_action('wp_head', 'stick_admin_bar_to_bottom_css');

Now what would be interesting is to have the option to move the WordPress Admin Bar to the left or the right (similar to HootSuite backend). Designers can make it really interesting (giving WordPress a web app look in the front-end).

How to Remove Links from the WordPress Admin Bar

If you are interested in customizing the WordPress Admin Bar for your site or network, then you might not want all the links. Simply open your theme’s functions.php file and add this code:

function mytheme_admin_bar_render() {
	global $wp_admin_bar;
	$wp_admin_bar->remove_menu('comments');
}
add_action( 'wp_before_admin_bar_render', 'mytheme_admin_bar_render' );

The trick to this function is by knowing the IDs used for each link. You can find the IDs for the default links in WordPress 3.1 by looking the file: /wp-includes/admin-bar.php

Here are some of the default IDs:

my-account / my-account-with-avatar: the first link, to your account. Note that the ID here changes depending on if you have Avatars enabled or not.
my-blogs: the ‘My Sites’ menu if the user has more than one site
get-shortlink: provides a Shortlink to that page
edit: link to Edit [content-type]
new-content: the ‘Add New’ dropdown
comments: the ‘Comments’ dropdown
appearance: the ‘Appearance’ dropdown
updates: the ‘Updates’ dropdown

How to Add the Links in WordPress Admin Bar

If you are a plugin author, or a theme developer, you can certainly hook into the admin bar to make things easy. Plugins like WordPress SEO by Yoast, or WP-Bitly already does that. Here is a simple way of doing that, paste the following codes in your theme’s functions.php file:

function mytheme_admin_bar_render() {
	global $wp_admin_bar;
        $wp_admin_bar->add_menu( array(
        'parent' => 'new-content',
        'id' => 'new_media',
        'title' => __('Media'),
        'href' => admin_url( 'media-new.php')
    ) );
}
add_action( 'wp_before_admin_bar_render', 'mytheme_admin_bar_render' );

If you want to create your own drop down in the admin bar, Michael Martin has a pretty good tutorial on it.

Now this can feature can be abused by plugin developers. We have not seen it yet, and we hope that it stays this way. Only plugins that absolutely have to be added to the admin bar should be added. Most importantly, all plugin authors who do add their functions in the admin bar should have a check box to turn it off.

Sources:

Coen Jacobs
WPSnippets


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Verna says:

    I cannot find ANYWHERE that gives direction on how to HIDE/SHOW toolbar in the comments section in WordPress. There is this huge box people can type in to leave a comment, but you have to first click BELOW this LONG TOOLBAR in order to type anything. I’ve had people call me and ask what’s up with that? They thought the comment box wasn’t working because, if you put your cursor TO THE RIGHT of the toolbar, you can’t type. You haveto go all the way to the bottom of the TOOLBAR. Yes, I’m a rookie, and having a difficult time finding out simple things like this. I went into Mantra Settings and there is a lot you can HIDE/SHOW, but not this TOOLBAR. Please help me!

  2. John Galt says:

    How can I prevent front end content from going behind the WordPress Admin Bar?

    I am using a theme that has a sticky menu that always keeps the main navigation on the top of the display. Instead of positioning itself below the WordPress Admin Bar the theme’s main navigation menu is always behind it.

  3. Scott Buehler says:

    Hey guys, is there a way to remove the “floating” properties so that the bar does appear on the frontend, but doesn’t float? It bugs me when using other floating properties like your Floating Social Bar plugin.

    • WPBeginner Support says:

      Add this code to your theme’s functions.php file or a site-specific plugin:

      function wpb_move_admin_bar() { ?>
      <style type="text/css">
      #wpadminbar {
      	position: absolute;
      	}
      </style>
      <?php }
      add_action( 'wp_head', 'wpb_move_admin_bar' );
      
  4. Ian says:

    Is there a way to alphabetically sort the My Sites drop-down menu?

  5. bharatkumarvbk says:

    It is causing a trouble with ‘ wphead’ . And also hiding the logout link and dashboard header content

  6. yoyowp says:

    How to make that admin bar to be a public bar? like buddypress one, when they are not logged in, that bar will just appear sign in and sign up link

  7. candy says:

    none of the tricks work for me anymore! no matter what I try I can’t get rid of that DAMN wordpress admin bar anymore!

    I now have the latest WP version 3.1 and it seems that all the tricks that worked before, including the ones you mention above DO NOT WORK ANYMORE!

    Looks like the WP developers are using dirty tricks to FORCE that stupid, useless top bar on us with any release!

    Why on Earth are otherwise such intelligent people and programmers waste their precious time & skills by developing and trying by any price to impose such a huge nonsense as this admin bar?!?

    Anyone managed to disable the devil bar in the latest WP version?

    Thanks!

  8. Bertrand says:

    Thanks! Finally was able to remove that damn gap on top of my website.

    From Quebec City

  9. shyam jos says:

    for me WP Admin Bar is a must and i love it..

  10. Rajesh says:

    Nice tips, great job! Thank u veru much :)

  11. abdelhafid says:

    awesome tips , thanks alot guys

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.