Not everybody likes the WordPress Admin Bar, which exists since WordPress 3.1, at the top of the browser. With just a bit CSS you can change it. The following function provides CSS directly in the footer of backend and frontend. It displays the Admin Bar at the bottom.
You can expand the code as you like, for example the implementation with the help of an external CSS stylesheet to get it into the compiler of WordPress. Also you could arrange options for the users. For my needs this little snippet helped, put in a Plugin or in the functions.php of your theme.
function fb_move_admin_bar() {
echo '
<style type="text/css">
body {
margin-top: -28px;
padding-bottom: 28px;
}
body.admin-bar #wphead {
padding-top: 0;
}
body.admin-bar #footer {
padding-bottom: 28px;
}
#wpadminbar {
top: auto !important;
bottom: 0;
}
#wpadminbar .quicklinks .menupop ul {
bottom: 28px;
}
</style>';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );
As an alternative you could also use this Plugin, thanks Coen!
Comments
7 responses to “Move WordPress Admin Bar to the Bottom”
Nice function! While I think this is quite useful for certain types of site designs, I do have one issue which I tested on 3 of my local builds.
There is a CSS style applied to the html item that specifies a margin of 28px at the top that still exists after adding this function to my themes. I tried to remove by adding some extra styling to the function, but it causes other styling issues in the administration area.
Nice piece of code, looks awfully familier though!
http://wordpress.org/extend/plugins/stick-admin-bar-to-bottom/
This plugin contains a better CSS fix btw, that works on all themes. Might not be the cleanest solutions, but it’s the only way to work around the ‘!important’ code in core CSS files…
Hey Coen, we didn’t know that there is already a Plugin available. That’s good for many users just to activate your Plugin.
We don’t like to use for every little function a Plugin, that’s why we prefer some lines into the code and that’s it. 🙂
But thanks for the link, I’m sure many users will use it. We will add it to our post.
@Troy, looks like the Plugin solves your problem. Please try it out.
[…] https://wpengineer.com/2190/move-wordpress-admin-bar-to-the-bottom/ 16 March 2011 7:03pm – Andra bloggar – Tips & knep – WordPress « What Everybody Ought to Know about the WordPress Admin Bar […]
Or you can minimise it:
http://wordpress.org/extend/plugins/admin-bar-minimiser/
🙂
Why not just use:
function stick_admin_bar_to_bottom_css() {
echo ”
html {
padding-bottom: 28px !important;
}
body.admin-bar {
margin-top: -28px;
}
#wpadminbar {
top: auto !important;
bottom: 0;
}
#wpadminbar .quicklinks .menupop ul {
bottom: 28px;
}
“;
}
add_action(‘admin_head’, ‘stick_admin_bar_to_bottom_css’);
add_action(‘wp_head’, ‘stick_admin_bar_to_bottom_css’);
That seemed to work for me fine without the 28px issues..
[…] to display the Admin Bar at the bottom of the page instead of the top? WPengineer shows us how with this bit of CSS via the functions.php […]