Here's How You Can Hide the WordPress Admin Bar

The Admin Bar for logged-in users in WordPress is a convenient solution for quick access to often-used things like editing a post or purging a website cache. Though, there is one thing I always hated about it, especially when developing a new website. The admin bar draws too much attention and makes it harder to focus on the design and content. Of course, there is an option to hide it completely, but every now and then, I need quick access to some of the basic stuff, like switching to page editing.

If you want to completely disable the admin bar, here’s a screenshot of where it can be toggled:

I’m not a fan of this solution, as I do like how easy it is to switch back and forth, but at the same time, I wanted something more elegant. A couple of years ago, I came across this tweak. So, I took it further and packed it into a plugin with some adjustments. Just compare the original admin bar and mine:

As you can see, there is no black bar. Instead, you get a small red circle (the color and the icon can be changed). Once the icon gets hovered, the vertical bar becomes revealed. So all of the basic links stay accessible but hidden until you need them. Neat.

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 keep my plugin stack lean. For instance, this website is using like 7 of them.

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

How to Install It

Option 1 is to use the single-file plugin, which should be uploaded to the /wp-content/plugins folder and activated in the Plugins section. You can download the plugin for my original article at: https://romangr.com/blog/wp-admin-bar

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

Option 2 is to put the code to 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 reuse it on a handful of websites, I find it more convenient to go with the first option. And it keeps my functions.php file leaner, which is a benefit for me.

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 and find edit the color for the wpadminbar #wp-admin-bar-site-name>.ab-item:before element. For me, the red color works well due to 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);
}