With the latest update for WordPress, v3.8, scheduled for release later this month, I’ve been playing with the beta version for my own WordPress themes. 3.8 has undergone a complete admin redesign, and while I’ve been impressed with the updates, one area did stand out as a conflict. The admin bar is 4px taller than previous versions. This small difference actually makes a big impact when using a fixed header. When signed into the site, the admin bar is always present at the top of the page. Normally, it will push the rest of the site down accordingly. However, if you’re using a fixed header, it’s necessary to add a little extra CSS so the admin bar won’t cover up any of part of your site. In my case, I was using the following:

#masthead {
	position: fixed;
	top: 0;
}

Fix the header in place at the top of the screen

#main {
	margin: 126px 0 0;
}

Push the body below the header

body.admin-bar #masthead {
	top: 28px;
}

Push the fixed header below the admin bar – only when signed in This has worked great for previous versions of WordPress. However, since the admin bar in 3.8 is 4px taller, I would need to change the height of the fixed position when signed in:

body.admin-bar #masthead {
	top: 32px;
}

Push the fixed header below the admin bar in WordPress 3.8 But when developing a theme, I can’t expect that everyone will always be on the latest version of WordPress (as much as I want to!). So how do I make the theme display correctly when you’re using an older versions of WordPress, 3.8, or a later version? The answer is by using the get_bloginfo function. By running a simple version check, the theme can tell if you’re on a specific version or a later one. If the check runs true, then some additional code will run. Using my example above, I would use all of the original code and simply add the following 4 lines:

<?php $wp_version = get_bloginfo('version'); ?>
<?php if ( $wp_version >= 3.8 ) : ?>
	body.admin-bar #masthead { top: 32px; }
<?php endif; ?>

Check to see if WordPress 3.8 or later is in use The above code will check to see if WordPress 3.8 or later is in use. If so, the fixed header will be displayed correctly below the 32px tall admin bar. If an earlier version of WordPress is found instead, the fixed header will be displayed correctly below the 28px tall admin bar.