How to hide the WordPress admin bar

The WordPress admin bar is a great feature that enables quick access to often-used things like editing a post or purging the website cache. But there are a couple of annoying things:

• It doesn’t look good and is a bit intrusive.
• It occupies precious vertical space, shifting the content to the bottom.

If you feel the same or have other reasons to hide it, there are basically two options: either remove it completely or tweak it.

Option #1: remove the admin bar

If you want to completely remove the admin bar:

1. Log in to your WordPress dashboard
2. Hover the cursor over your profile (Howdy, Username) in the top right corner
3. In the dropdown click Edit Profile
4. Uncheck Toolbar – Show Toolbar when viewing site

I’m not a fan of this solution, as I do like how easy it is to switch back and forth between the frontend and the backend. And when the WP admin bar is disabled, you have to manually go to /wp-admin whenever you need to access some administration features.

Option #2: hide the admin bar

A couple of years ago, I came across this tweak. I took it further and packed it into a plugin with some adjustments. Before delving into the nitty-gritty, let me show the comparison:

As you can see, there is no black bar in the tweaked version. Instead, you get a small red circle (the color and the icon can be changed). Once the icon is hovered over, the vertical toolbar is revealed. So all of the basic links stay accessible but hidden until you need them. Neat, isn’t it?

My solution isn’t ideal. Probably the most significant drawback is that it might not work properly with long menu titles from various plugins. It doesn’t bother me since I minimize the number of plugins I use. For instance, my website is using only twelve as of right now.

Besides repositioning the admin bar, my tweak changes the site title to the URL address. It is handy when working with a website that has a long title. Domains are usually shorter.

Install the tweak to hide the WP admin bar

Download my plugin

You can use the single-file plugin, which should be uploaded to the /wp-content/plugins folder and activated in the Plugins section of your WordPress dashboard.

Once uploaded go to the Plugins section and active the plugin:

Put the code to your functions file

Here is, virtually, the same code to be placed in the functions.php file of your theme:

// display domain in the admin bar instead of site title
add_action( 'admin_bar_menu', 'customize_my_wp_admin_bar', 80 );
function customize_my_wp_admin_bar( $wp_admin_bar ) {
    $node = $wp_admin_bar->get_node('site-name');
    $new_site_name = preg_replace("(^https?://)", "", get_home_url() );
    $node->title = $new_site_name;
    $wp_admin_bar->add_node($node);
}

final class Kama_Collapse_Toolbar {

    public static function init(){
        add_action( 'admin_bar_init', [ __CLASS__, 'hooks' ] );
    }

    public static function hooks(){

        // remove html margin bumps
        remove_action( 'wp_head', '_admin_bar_bump_cb' );

        add_action( 'wp_head', [ __CLASS__, 'collapse_styles' ] );
    }

    public static function collapse_styles(){

        // do nothing for admin-panel.
        // Remove this if you want to collapse admin-bar in admin-panel too.
        if( is_admin() ){
            return;
        }

        ob_start();
        ?>
        <style id="kama_collapse_admin_bar">
            #wpadminbar .quicklinks>ul>li>a { padding: 0 8px 0 5px; }
            #wpadminbar #wp-admin-bar-site-name>.ab-item:before { color: red; }

            #wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,
            #wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus,
            #wpadminbar .ab-top-menu>li.hover>.ab-item {
                background: none;
            }
            #wpadminbar #wp-admin-bar-site-name>.ab-item:before {
                content: "\f159";
            }
            #wp-admin-bar-search,
            #wp-admin-bar-comments,
            #wp-admin-bar-updates {
                display: none !important;
            }
            #wpadminbar ul:not(.ab-submenu)>li>a.ab-item {
                white-space: nowrap;
                overflow: hidden;
            }
            #wpadminbar ul:not(.ab-submenu)>li>a.ab-item:after {
                content: '';
                display: block;
                pointer-events: none;
                top: 0;
                right: 0;
                bottom: 0;
                background-image: -webkit-gradient(linear,left top,right top,from(rgba(29,35,39,0)),color-stop(95%,#1d2327),to(#1d2327));
                background-image: linear-gradient(left,rgba(29,35,39,0) 0,#1d2327 95%,#1d2327 100%);
                background-image: -webkit-linear-gradient(left,rgba(29,35,39,0) 0,#1d2327 95%,#1d2327 100%);
                background-image: -ms-linear-gradient(left,rgba(29,35,39,0) 0,#1d2327 95%,#1d2327 100%);
                width: 50px;
                position: absolute;
            }
            #wpadminbar .ab-icon, #wpadminbar .ab-item:before, #wpadminbar>#wp-toolbar>#wp-admin-bar-root-default .ab-icon, .wp-admin-bar-arrow {
                margin-right: 8px;
            }


            #wpadminbar{ background:none; float:left; width:auto; height:auto; bottom:0; min-width:0 !important; }
            #wpadminbar > *{ float:left !important; clear:both !important; }
            #wpadminbar .ab-top-menu li{ float:none !important; }
            #wpadminbar .ab-top-secondary{ float: none !important; }
            #wpadminbar .ab-top-menu>.menupop>.ab-sub-wrapper{ top:0; left:100%; white-space:nowrap; }
            #wpadminbar .quicklinks>ul>li>a{ padding-right:17px; }
            #wpadminbar .ab-top-secondary .menupop .ab-sub-wrapper{ left:100%; right:auto; }
            html{ margin-top:0!important; }

            #wpadminbar{ overflow:hidden; width:33px; height:30px; }
            #wpadminbar:hover{ overflow:visible; width:auto; height:auto; background:rgba(102,102,102,.7); }

            /* the color of the main icon */
            #wp-admin-bar-<?= is_multisite() ? 'my-sites' : 'site-name' ?> .ab-item:before{ color:#797c7d; }

            /* hide wp-logo */
            #wp-admin-bar-wp-logo{ display:none; }
            /* #wp-admin-bar-search{ display:none; } */

            /* edit for twentysixteen */
            body.admin-bar:before{ display:none; }

            /* for almin panel --- */
            @media screen and ( min-width: 782px ) {
                html.wp-toolbar{ padding-top:0 !important; }
                #wpadminbar:hover{ background:#1d2327; width: 160px }
                #wpadminbar .quicklinks>ul>li>a { width: 138px }
                #adminmenu{ margin-top:48px !important; }
            }

            /* Gutenberg */
            #wpwrap .edit-post-header{ top:0; }
            #wpwrap .edit-post-sidebar{ top:56px; }
        </style>
        <?php
        $styles = ob_get_clean();

        echo preg_replace( '/[\n\t]/', '', $styles ) ."\n";
    }
}

Kama_Collapse_Toolbar::init();

Since I want to have the WordPress admin bar hidden on a handful of websites, I find it more convenient to go with the plugin option:

• It’s easier to update the plugin file, rather finding and replacing a certain code snippet in the functions.php file.
• The plugin method works regardless of the theme that is installed.
• You don’t overload your theme functions file.

A couple of things to note

How to change the icon

To change the icon, you should change the wpadminbar #wp-admin-bar-site-name>.ab-item:before element. Pick any icon from the dashicons and edit the content property in CSS.

How to change the icon color

Once again, go to the code, find and edit the color for the wpadminbar #wp-admin-bar-site-name>.ab-item:before element. For me, the red color works well because of the contrast.

How to preserve the site title in the admin bar

Remove this code from either the plugin file or your functions.php file:

add_action( 'admin_bar_menu', 'customize_my_wp_admin_bar', 80 );
function customize_my_wp_admin_bar( $wp_admin_bar ) {
    $node = $wp_admin_bar->get_node('site-name');
    $new_site_name = preg_replace("(^https?://)", "", get_home_url() );
    $node->title = $new_site_name;
    $wp_admin_bar->add_node($node);
}

Have questions? Feel free to leave a comment below.