UPDATE: I made a plugin that is really simple and handles all the stuff in this article and more.
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:
<body>
<div style="position:absolute;">
<p>Lorizzle phat dizzle sit amizzle, brizzle adipiscing elit.</p>
</div>
</body>
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
add_filter('show_admin_bar','__return_false');
//if the current user is a subscriber, turn off the admin bar
if ( current_user_can( 'subscriber' ) ) {
add_filter('show_admin_bar','__return_false');
}
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...
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:
//functions.php
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:
//functions.php
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:
Just ran into the same problem – frustration with my layout breaking by 28px. Thanks for the article.
Do you consider yourself a coder, or a content-creator?
I’m asking because it seems like this would be more of a problem for someone who is just a content-creator.
I noticed that you’re using one of the stock WordPress themes here. It seems like this could be a serious problem for a content-creator with a third-party theme who has no interest in messing around with PHP files.
Thank you.
– Ghodmode
I am mostly a coder. I agree that this might be a problem for someone with little to no php experience.
There are plugins that can remove the bar completely, but none currently that give control over when it is shown and other options. Maybe if I have time I will whip up a plugin that takes care of this.See Update.I use the stock WordPress theme because I am like the auto mechanic that never fixes their own car or the contractor who never finishes the re-modeling on their own house. I have too much to do for other people and not enough time for myself.
@Mike – I’m glad it helped, because I know it took me a few hours and a bunch of googling to figure it out myself.
**UPDATE**
WP Custom Admin Bar
Bookmarked, I really like your site! :)
Thanks for that awesome posting. It saved MUCH time :-)
Great post and plugin, Wes – saved a lot of bother with the 28px layout issue.
Two suggestions:
1) Your plugin hard codes the roles it expects to find… it would be even better if it queried the wp_user_roles option for the list of roles defined, as these can be customised by other plugins (e.g. by role scoper etc)
2) It wasn’t clear what the ‘Enable Content Bump’ option was for, until I read your post ;-)
Cheers
Rob
Thanks for the suggestions. Your suggestion about the roles is first on my to-do list for the next version. As for #2, I will add in a description and link to the article next to the option!
If you haven’t already, update the plugin. Both of your suggestions are included!
Very nice write up for the new surprise that 3.1 offers. Thanks for the clear details.
Hi Wes,
Its really helps me.
How to say thanks to you I don’t know.
You saved me ‘x’ amount of time – thanks.
WordPress should include your amendment by default.
Tweeted you!…
I shared your blog post via twitter : )…
Your plugin definately helped me. I had an aweful time figuring out why my element positions were out of wack…until I figured out the bump was causing it.
Thanks for the plugin.
~Jeff
love u for that piece of code
add_theme_support( 'admin-bar', array( 'callback' => 'my_adminbar_cb') );function my_adminbar_cb(){
//empty function
}
big kiss :D
was a bit hard to find..but im really happy now haha
cheers!
Thanks a lot for trying to explain the terminlogy for the beginners!