Wordpress Admin Bar pushed Sticky Footer off the bottom of the page

Question

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:

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.

Answer 1

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;
            }
        </style>
    <?php
    }
}

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