Custom WordPress Admin Bar CSS

If you have logged in to (almost) any WordPress site since version 3.1, you have probably seen the admin bar at least once. At first it was a nuisance for most people, a very popular blog topic was how to disable that annoying bar at the top of the screen. Just take a look at the search results!

I feel like we’ve now come to love the admin bar, it is no longer a thorn in our side while we create WordPress sites. Plugins are taking advantage of it by adding their own buttons and twist to it. It also has received a bit of a makeover recently with the WordPress 3.8 release.

On some sites the admin bar can still get in the way a bit though. Most recently I was customizing the WooCommerce Store Notice bar that can be enabled and needed to adjust the CSS that WordPress by default adds to move the site below the admin bar.

I thought to myself that this being WordPress, it is most likely filterable, but it was not.

So I thought since this is a function with callback in it’s name I can remove it and add my own action, and that is possible. But the way the action is added, made me look just a little deeper. The callback function’s name is taken from the arguments from the add_theme_support()
function, just a few lines above the hook.

So instead of removing and adding an action, why don’t we just pass our custom callback to begin with!

This is very simple to do. By default all theme’s
support the admin bar. However you can still use the add_theme_support() function to pass your own arguments.

Just add the following CSS to your theme’s
functions.php file.

add_theme_support( 'admin-bar', array( 'callback' => 'my_adminbar_css' ) );  
function my_adminbar_css() { ?>  
    html { margin-top: 60px !important; }
    * html body { margin-top: 60px !important; }

    @media screen and ( max-width: 782px ) {
        html { margin-top: 74px !important; }
        * html body { margin-top: 74px !important; }
    }
<?php }  

Here you’ll notice there are really only two additions, the
add_theme_support() function and the function adding the CSS. Just customize the CSS to your own needs and you are all set!

How does this affect WooCommerce?

If you run WooCommerce and display the demo notice, while also displaying the admin bar, you can get some questionable results at times. What if you main navigation is at the very top of the screen and the demo notice just covered it completely?

What I have done to get around this is wrap the
add_theme_support()
function in an if statement that checks:

  1. is_admin_bar_showing()
  2. is_store_notice_showing()Assuming my pull request for WooCommerce is approved.
if( is_admin_bar_showing() && is_store_notice_showing() ) { add_theme_support( 'admin-bar', array( 'callback' => 'my_adminbar_css' ) ); }  

This will only use the custom CSS in the specific situation I need it in.