WordPress Admin Bar Snippet to Customize Toolbar

As a WordPress user, you’re no stranger to the powerful Admin Bar that graces the top of your WordPress Dashboard. It’s that handy little toolbar that provides quick access to essential features and shortcuts. But did you know that you can customize it to enhance your user experience? Hang tight, because we’re about to dive into tricks that improve your WordPress toolbar Editor journey!

I’d like to draw your attention to a powerful tool: the Admin Bar Editor plugin. This little free plugin can supercharge your admin bar experience. Toward the end of this content, we’ll closely examine what the Admin Bar Editor has in store for you. But first, let’s explore the carefully organized code I’ve prepared for you.

Note: Open your theme’s functions.php file (located in your active theme folder). Add each following code snippet and save your function.php file.

Change "Howdy, Admin" in Admin Bar

The default “Howdy, Admin!” greeting might feel a bit too casual for your taste. As a professional, you want something more polished and personalized. Fear not! With a few lines of code, you can replace it with a warm welcome tailored to your liking.

function replace_howdy( $wp_admin_bar ) {
    // Customize the greeting you’d like to display in the admin bar instead of ‘Howdy.’.
    $new_howdy = 'Hello Dear,';
    $my_account = $wp_admin_bar->get_node( 'my-account' );
    $wp_admin_bar->add_node(
        array(
            'id'    => 'my-account',
            'title' => str_replace( 'Howdy,', $new_howdy, $my_account->title ),
        )
    );
}
add_filter( 'admin_bar_menu', 'replace_howdy', 25 );

Replace ‘Hello Dear’ with your desired greeting.

Hide Admin Bar Based On User Roles

Sometimes, you want to declutter the interface for specific user roles. For example, subscribers or contributors don’t need the Admin Bar distracting them. By selectively hiding it, you create a cleaner experience.

function hide_admin_bar_based_on_role() {
if (current_user_can('editor') || current_user_can('author') || current_user_can('subscriber')) {
show_admin_bar(false);
}
}
add_action('after_setup_theme', 'hide_admin_bar_based_on_role');

Disable The WP Admin Bar in the Frontend

Maybe you’re building a custom frontend experience, and the Admin Bar just doesn’t fit. Disabling it ensures a seamless user journey.

/* Disable WordPress Admin Bar for all users */
add_filter( 'show_admin_bar', '__return_false' );

Changing the Admin Bar Color Scheme

A dash of color can transform the mundane into something delightful. Personalize the Admin Bar to match your brand or aesthetic.

// Change Your WordPress Admin Bar color 
function custom_admin_bar_color_scheme() {
    echo '
    <style type="text/css">
        #wpadminbar { background-color: #yourBGColorHere; }
        #wpadminbar .ab-item, #wpadminbar a.ab-item { color: #yourTextColorHere; }
        /* Add more custom styles for other admin bar elements as needed */
    </style>
    ';
}
add_action('admin_head', 'custom_admin_bar_color_scheme');
add_action('wp_head', 'custom_admin_bar_color_scheme');

Here is a demo screenshot using #023cb0 as my admin toolbar background and #ffffff for the text color.

Moving the Frontend Admin Bar to the Bottom

Sometimes, change is refreshing! Moving the Admin Bar to the bottom gives your dashboard a unique twist.

function move_admin_bar_to_bottom() {

    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 .menupop .ab-sub-wrapper { bottom: 32px; }

    </style>';

}

add_action('wp_head', 'move_admin_bar_to_bottom');

Admin Bar Editor Plugin

Take your Admin Bar to the Next Level with the Admin Bar Editor plugin! Here are some straightforward tasks that will transform your admin bar experience.

Hide Unwanted Links and Options

If you find too many buttons in your admin bar, you can hide the ones you don’t need. This includes options like the default WordPress logo, domain name, and site editing tools. Simply toggle the switch to hide them.

Customizing Admin Bar Based on User Role or Name:

You can turn off the admin bar for specific user roles or individual usernames. For instance, if you have guest authors, they won’t be distracted by admin tools while writing.

Adding Custom Admin Bar Items:

Customize your admin toolbar by adding shortcuts or basic documentation. Provide a descriptive menu title, set a link, add a custom icon, and if needed, hide this custom menu for specific user roles. For instance, a photographer might add a quick link to their gallery uploads, saving time and clicks.

Reordering Admin Bar Items with Drag-and-Drop

Easily rearrange items by dragging and dropping them. Put your most-used links or options at the front, similar to organizing your favorite apps on your phone’s home screen.

Customizing Admin Bar Icons

You can choose from various icon sets, including Dashicons, Simple Line Icons, Themify Icons, Icomoon Icons, and even upload custom icons. Select an icon that reflects your brand or identity. For example, a coffee shop website could use a coffee cup icon for their blog section.

Edit Existing Links or Options

Rename any existing links or options in the admin bar to make them clearer. For instance, the “New” button can be customized to suit your specific goals.

Note : For a comprehensive understanding of Admin Bar customization and detailed insights into the plugin features, I recommend exploring the Admin Bar Editor plugin docs. It’s your gateway to fine-tuning your WordPress experience. Happy exploring!

With the Admin Bar Editor, you’re the master of WordPress Admin Bar. Tweak, customize, and simplify your default WordPress Toolbar. Happy admin bar adventures & Happy coding! 🚀🎩