WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I've implemented Ryan Fait's oh-so-common sticky footer in a custom Wordpress theme. I've noticed now if I implement the Wordpress Admin Bar into my pages, which is 28px high (in current Wordpress version at least...), it pushes the sticky footer down 28px as well.

Here's the admin bar:

enter image description here

Anyways, the way Wordpress works is that the Admin Bar does or does not show up at the top of the pages depending on how Admin users set their preferences. So I do not want to simply remove it fro the theme.

I could obviously use jQuery after the ready event fires to see if the Admin Bar is there or not and alter the footer accordingly, but I'd rather try to avoid this if possible and just have the page generate properly to begin with... Any ideas?

Also I want the theme to work with near-future versions of Wordpress. So if in a future version they decide to change the admin bar to something other than 28px high, then I don't want my code to have to be adjusted to compensate for the change.

share|improve this question
Try using removing body from html, body { height: 100%;} so it is just html. – Wyck Feb 11 '12 at 23:31
That didn't work. Thanks though. – Jake Wilson Feb 12 '12 at 0:20
This is a CSS question, not a WordPress question. – Chip Bennett Feb 12 '12 at 5:06
Very related since it's specifically discussing Wordpress theme development. – Jake Wilson Feb 13 '12 at 1:13
up vote 5 down vote accepted

The footer is pushed out because WP will add margins to your page whenever the admin bar is set to show. The function responsible for this is called _admin_bar_bump_cb() and is located at wp-includes/admin-bar.php. The bad news is that it uses a harcoded 28px setting (meaning you won't be able to fetch it and use it in your functions), along with an "!important" declaration, which you won't be able to consistently override in order to avoid height changes in the future.

I think your best bet would be to check if the admin bar is showing and adjusting the footer accordingly. This should be as simple as adding this to your functions.php:

add_action('wp_head', 'adjust_sticky_footer');
function adjust_sticky_footer() {
    if(is_admin_bar_showing()) { ?>
        <style type="text/css">
            .footer { /* Adjust selector according to your theme */
                bottom: 28px;

I'm assuming your footer already has position: relative assigned to it, as per the example on the link you've provided.

share|improve this answer
Ah I was looking for the is_admin_bar_showing() function. Didn't know that existed. Thanks! – Jake Wilson Feb 13 '12 at 1:11

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.