How to Remove, Move, or Style the WordPress Admin Bar

WordPress Admin Bar
The WordPress Admin Bar in action.

While WordPress’ Admin Bar can be extremely useful for some users, not everyone likes it and some sites don’t need it. For example, wpLifeGuard is run by WordPress and members have their own WordPress accounts, however the WordPress Admin bar would not be beneficial for them, so we disabled it using functions.php and some PHP. And some sites could use it to their advantage by adding menu items and styling it differently.

For those sites who want to remove, move, or style the WordPress Admin Bar, here is how it’s done.

How to Remove the WordPress Admin Bar

If you wish to disable the WordPress admin bar entirely, place this in your WordPress theme’s functions.php.

show_admin_bar(false);

If you wish to disable the WordPress admin bar for non-admins only, that can be done as well with this snippet from Digging into WordPress. Simply paste the following in your WordPress theme’s functions.php.

// show admin bar only for admins
if (!current_user_can('manage_options')) {
	add_filter('show_admin_bar', '__return_false');
}
// show admin bar only for admins and editors
if (!current_user_can('edit_posts')) {
	add_filter('show_admin_bar', '__return_false');
}

Disabling the Admin Bar with a Plugin

If you don’t like messing with code or your WordPress theme’s functions.php, then you can use a WordPress plugin to disable the WordPress admin bar.

Disable the WordPress Admin Bar with a plugin: Admin Bar Disabler

How to Move the WordPress Admin Bar to the Bottom

The following code snippet is from CSS-Tricks, and will move the WordPress Admin bar to the bottom of your page. If you wish to only do this on the front end or only on the back end, it can be easily slightly modified to do so. Like the others, copy and paste this into your WordPress theme’s functions.php.

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>';
}
// remove the following line if you want to keep the admin bar at the top on the backend
add_action( 'admin_head', 'fb_move_admin_bar' );
// remove the following line if you want to keep the admin bar at the top on the frontend
add_action( 'wp_head', 'fb_move_admin_bar' );

How to Style the WordPress Admin Bar

Styling the WordPress admin bar can be done from within your theme’s CSS or with a modified version of the previous code snippet. Simply place the following code snippet in your WordPress theme’s functions.php and put in your own CSS and there you have a styled WordPress Admin Bar.

function fb_move_admin_bar() {
    echo '
    <style type="text/css">
    // css here
    </style>';
}
// remove the following line if you want to keep the admin bar at the top on the backend
add_action( 'admin_head', 'fb_move_admin_bar' );
// remove the following line if you want to keep the admin bar at the top on the frontend
add_action( 'wp_head', 'fb_move_admin_bar' );

Conclusion

It’s really easy to remove, move, or style the WordPress Admin Bar and there are several methods of doing so. Take your pick and enjoy.

Follow wpLifeGuard

« Back to Blog