Working as a WordPress web developer in the top-tier building themes I’ve encountered the re-occurring client request for a fixed header. When you first hit the site you’ll want that top menu bar right at the top in clear view to aid site navigation, but when you scroll down the page, rather than lose that menu it remains fixed in place. This gives user’s a clear and easy way to navigate around the site while reading down each page and not having to scroll back up each time they want to visit another area of the site. Certainly a common technique to improve site usability and user experience.
But for site admins and editors, there is the WordPress Admin Bar wanting to remain firmly rooted to the top of the screen to deal with. The two fighting for dominance can drive you mad.
With a little CSS we can sort this, adjusting where the website’s main menu sits on the screen when a user is logged in. But things can get a bit cumbersome especially when considering different screen sizes and changes in design between them.
It’s almost a thankless task. Only admin’s see this bar so there is the temptation to leave this little job till later as you focus on the rest of the theme build. But when building a site ‘content is king’ and the sooner a client can start populating their site ( and the admin bar certainly aids them in this task ) the closer we all get to a fully working site.
So why not just move the admin bar to the bottom of the page?
It remains fixed to the bottom of the screen and is much less likely to affect other page components (unless the client wants some kind of crazy floating footer).
You don’t need much WordPress experience to hook into the system and add the necessary styling to override the default Admin Bar CSS, but why not add this to a handy little plugin! Then we can use it with other projects. You could just leave the code in the functions.php file but a plugin stays theme independent and means the client can have a degree of control by disabling it if they want the admin bar back on top.
Creating a plugin, albeit one that does nothing, to begin with, is very simple in WordPress. We simply create a PHP script with a specific block comment at the top of the page , more details on this can be found on the WP Plugins handbook page. WordPress reads this and gives you your plugin info!
<?php
/*
Plugin Name: My amazing plugin!
That’s it! We have a plugin, it doesn’t do anything, but we have a plugin!
When it comes to WP plugins we have two choices on where to house this code. The plugins folder or the mu-plugins folder.
Most plugins will go into the plugins folder as standard , but the mu-plugins is a bit special. It stands for ‘must use plugins’ and ensures the user will not be able to de-activate the plugin unless they manually remove the plugin from the directory. This would be a good place to keep plugins that govern the data structure of the client site such as custom post types, but for our little plugin the mu-plugins folder feels a little excessive.
OK, let’s get into the code. We’ll need to inject some additional styling to move our admin bar to the bottom of the page and ensure any dropdowns are still visible when certain admin links are hovered over. We’ll encapsulate our code in a simple little PHP class and place our plugin script in its own folder to keep things tidy.
For the sake of this example let’s call our plugin folder ‘pbc-bottom-admin-bar’ and our plugin script ‘pbc-bottom-admin-bar.php’.
Here is the php code we’ll need in moving that pesky admin bar to the bottom of the screen:
/*
Plugin Name: Pbc bottom admin bar
Plugin URI: http://poweredbycoffee.com/
Description: Reposition the admin bar to the bottom of each page.
Version: 1.0.0
Author: Graeme White
Released under the GNU General Public License (GPL)
http://www.gnu.org/licenses/gpl.txt
*/
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
class pbcMoveAdminBar {
function __construct() {
add_action( 'wp_enqueue_scripts', array( $this, 'move_admin_bar' ) );
}
function move_admin_bar() {
if(!is_admin_bar_showing()) {
return;
}
wp_enqueue_style( 'pbc-move-admin-bar' , plugin_dir_url( __FILE__ ) . 'css/pbc-bottom-admin-bar.css' , array() , 1.00 , false );
}
}
new pbcMoveAdminBar();
It’s not the most complicated plugin you’ll encounter but let’s still delve into what we have.
In our basic PHP class constructor, we call add_action. In our case, we want to add our CSS on the page and we will do this in the header of the site via the all important wp_enqueue_scripts hook. This only shifts our admin bar on the front-end, when working in the admin area of the site we aren’t going to move the admin bar to the bottom of the screen, but if you wished to do you’d simply add the following to our plugin class constructor:
do_action( 'admin_enqueue_scripts', array( $this, 'move_admin_bar' ) );
Then we call our move_admin_bar function checking that the current user is logged in and has the ability to access the admin area of the site.
Finally, we enqueue our stylesheet stored in the css folder of our plugin directory.
Here’s our css:
body.admin-bar #wphead {
padding-top: 0;
}
#wpadminbar {
top: auto !important;
bottom: 0;
position: fixed;
}
#wpadminbar .quicklinks .menupop ul {
position: absolute;
bottom: 32px;
background-color: #23282d;
}
#wpadminbar .quicklinks .menupop ul + ul {
bottom: 70px;
}
#wpadminbar .quicklinks .menupop ul ul {
transform: translateY(62px);
-webkit-transform: translateY(62px);
-ms-transform: translateY(62px);
}
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary {
bottom: 64px;
position: absolute;
}
@media screen and (max-width: 782px) {
#wpadminbar .quicklinks .menupop ul {
bottom: 46px;
}
#wpadminbar .quicklinks .menupop ul + ul,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary {
bottom: 86px;
}
#wpadminbar .quicklinks .menupop ul ul {
transform: translateY(92px);
-webkit-transform: translateY(92px);
-ms-transform: translateY(92px);
}
}
Our CSS is pretty simple, targeting the admin bar with the ID #wpadminbar and adopting the use of translateY ( for browser support check the caniuse page ) to shift the dropdowns upwards so they will be visible in our new admin bar’s position, rather than disappear off the page as they do what they are supposed too and ‘dropdown’.
Nice and simple, but hopefully saves you time as you build that great theme.
You can grab the PHP from Github and WordPress.org.
If you have any ideas, comments or feedback please leave an issue on GitHub.
