WP 3.1 Admin Bar: Removal, Styling and Frustration

UPDATE: I made a plugin that is really simple and handles all the stuff in this article and more: WP Custom Admin Bar

A new version of WordPress! Yeah! I hit update and after everything goes smoothly I figure I am good to go. I load up the home page and what do I see? Everything got bumped down the page by 28px. Eexcept for the absolutely positioned elements, which stayed in place, messing up the whole layout. All because this new gray bar on the top of the page.

As I am sure most of us did, I installed the new version before reading about what was included. Had I done some research before I updated, I would have known that the admin bar from the BuddyPress plugin was being added. This is a great feature for site admins and bloggers to eaisly access the back-end features of WordPress. It only shows for logged in users and contains some quick links to the admin section which are really handy.

Unfortunately, it can also have some nasty side effects for the layout. What did it effect? Direct child elements of the body which are absolutely positioned:

    <div style="position:absolute;">
        <p>Lorizzle phat dizzle sit amizzle, brizzle adipiscing elit.</p>

The site I updated has a section for logged in users which shows information about their account. They are subscribers (user level) and have no ability to edit anything other than their profile. Do they need an admin bar? No, so I want to get rid of it. Google it and I'm sure you will find the same articles about disabling it site wide:

//in functions.php

Great, no more admin bar! But wait, I want the admin bar for me, just not for my subscribers. Ok, some quick detection of the current users level and we can add the removal filter for just subscribers:

//if the current user is a subscriber, turn off the admin bar
if ( current_user_can( 'subscriber' ) ) {

We have our admin bar hidden for our subscribers and showing for all others, but we are still stuck with the layout problems that are caused by the 28px bump. Take a look in Firebug (or your inspector of choice) and you can see that a style is added with a margin-top of 28px, and its "!important". We can over rule this with our css if we want:

//wherever you put your css...`//wherever you put your css...
html { margin-top: 0 !important; }
* html body { margin-top: 0 !important; }

But why have the extra code on your page? We should be able to get rid of it before the page is sent using some php. Usually, things that are added in the header and generated by WordPress are added using a hook into the wp_head action. I figured that if I could find the call back function that adds the style tag I could just call the remove_action function on it and bye bye bump! Found it and tried the remove_action function, but it just wouldn't go away. Great WordPress, you add some code to my page without giving me a normal way to remove it!

It turns out that when the admin bar is initialized, it calls a default callback function to add the style tag. But this will be overridden if a new callback function is given. You have to re-add theme support for the admin bar with the optional callback function declared:

add_theme_support( 'admin-bar', array( 'callback' => 'my_adminbar_cb') );
function my_adminbar_cb(){
    //empty function

This new function is called instead of the default which add the style tags with the margin. So In my case, I just left the function blank so nothing would be output. This could also be used add your own custom styling for the admin bar:

add_theme_support( 'admin-bar', array( 'callback' => 'my_adminbar_cb') );
function my_adminbar_cb(){
    echo '<style>#adminbar {bottom: 0 !important;}</style>';

If there is anything else you might be wondering about as far as the admin bar goes, here are the WorePress core files for reference: