How to Hide WordPress Admin Bar

The admin bar for WordPress logged-in users provides a convenient way to quickly access common functions, such as editing posts or clearing the site cache. However, one thing I've always hated about the admin bar, especially when developing a new website: it's too visible and makes it difficult to focus on design and content. Of course, there's the option to hide it entirely, but occasionally I still need quick access to some basic functionality, like switching to page editing.

If you want to disable the admin bar entirely, here is a screenshot of how to toggle it:

I don't like this solution because I like the convenience of easy switching, but at the same time, I also want something more elegant. I stumbled upon this tuning method a few years ago. So I refined it further and packaged it into a plugin with a few tweaks. Just compare the original admin bar and mine:

The default admin bar is always visible

The adjusted admin bar is hidden under the red circle

Hover your mouse over the circle and the vertical admin bar will appear

As you can see, there are no black bars. In its place is a small red circle (the color and icon can be changed). Hover your mouse over the icon and a vertical bar will appear. Therefore, all essential links remain accessible but are hidden until you need them. Be concise and clear.

My solution is not perfect. Probably the biggest drawback is that it may not work well with the lengthy menu headers of various plugins. This doesn't matter to me since I keep my plugin count lean. For example, this website only uses about 7 plugins.

In addition to repositioning the admin bar, my solution also changes the website title to the URL address. This is very convenient when working on websites with very long titles. Domain names are usually shorter.

Installation method

Method one is to use a single file plugin, upload it to the /wp-content/plugins folder and activate it in the "Plugins" section. You can download the plug-in in my original article: https://www.php.cn/link/bca314ed6a27eb1a7ce8434de54e3453

Method 2 is to add the code to the theme’s functions.php file:

<code class="language-php">// 在管理栏中显示域名而不是网站标题
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>
            #wpadminbar {
                position: fixed !important;
                top: -32px !important;
                transition: top 0.3s ease;
            }
            #wpadminbar.expanded {
                top: 0 !important;
            }
            #wpadminbar #wp-admin-bar-site-name {
                display: none;
            }
            #wpadminbar #wp-admin-bar-site-name.expanded {
                display: block;
            }
            #wpadminbar #wp-admin-bar-site-name .ab-item:before {
                content: "\f321"; /* Dashicons icon */
                font-family: 'dashicons';
                speak: none;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                color: red; /* Icon color */
                margin-right: 0.3em;
            }
            #wpadminbar #wp-admin-bar-site-name.expanded .ab-item:before {
                display: none;
            }
        </style>

        <?php
        echo ob_get_clean();
    }
}

Kama_Collapse_Toolbar::init();</code>

Since I reuse it on many websites, I find it more convenient to use the first method. It also makes my functions.php files leaner, which is a bonus for me.

A few notes

How to change icon

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

How to change icon color

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

How to keep website title in admin bar

Remove this code from 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);`
`} ```

The above is the detailed content of How to Hide WordPress Admin Bar. For more information, please follow other related articles on the PHP Chinese website!