Hide Front-End Admin Bar Including 32 px Spacing

Question

I have a custom template and I inserted the following snippet to get rid of the admin bar for the page:

function hide_admin_bar(){ return false; }
add_filter( 'show_admin_bar', 'hide_admin_bar' );

The problem is this still leaves a blank white empty bar at the top of the page with a height of 32px. Looking at core, I see this function but there is no way to disable it. I also tried overriding html { margin-top: 0 !important; } in my theme stylesheet to no avail since this is output on the page directly.

function _admin_bar_bump_cb() { ?>
<style type="text/css" media="screen">
    html { margin-top: 32px !important; }
    * html body { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
        html { margin-top: 46px !important; }
        * html body { margin-top: 46px !important; }
    }
</style>

Does anyone have a clean way to completely remove the admin bar from the top of a specific template page (plus the white space)?

Answer 1

You can set the display status with show_admin_bar function

<?php show_admin_bar( false ); ?>

Answer 2

Amit Mishra's answer resolves my problem, I have put my codes in the below, thanks a lot

Admin can see the admin-bar, other user can not.

This solution will not leave a top blank band with 32px in height. Other answers which only remove _admin_bar_bump_cb will leave a ugly blank band on top

add_action('after_setup_theme', 'remove_admin_bar_user');
function remove_admin_bar_user() {
    if (current_user_can('administrator') || is_admin() ) {
        show_admin_bar(true);
    }else{
        show_admin_bar(false);
    }
}

Answer 3

It is kind of hackish but I found adding the below snippet inline just like WordPress core did the trick. I hate inline styles but life doesn't always produce lemonade :-S

/**
 * Hides the admin bar on a template page.
 */
function hide_admin_bar() {
    wp_add_inline_style('admin-bar', '<style> html { margin-top: 0 !important; } </style>');
    return false;
}
add_filter( 'show_admin_bar', 'hide_admin_bar' );

Answer 4

Add This to your function.php it hide the admin bar from frontEnd

add_action('after_setup_theme', 'remove_admin_bar_user');

function remove_admin_bar_user() {
                if (current_user_can('administrator') || is_admin() ) {
                  show_admin_bar(false);
                }
            }

Answer 5

I found this function which gets rid of the 32px 'bump' left over after using "show_admin_bar(false)"

remove_action('wp_head', '_admin_bar_bump_cb');

That seems to do the job!

Answer 6

From version 3.1.0, WordPress decided to add a toolbar for logged in users on the display side that's about the site's theme.

And add default admin bar callback before </head>:

<style type="text/css" media="screen">
    html { margin-top: 32px !important; }
    * html body { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
        html { margin-top: 46px !important; }
        * html body { margin-top: 46px !important; }
    }
</style>

To remove it, you can try:

add_action('get_header', 'remove_admin_login_header');
    function remove_admin_login_header() {
        remove_action('wp_head', '_admin_bar_bump_cb');
    }