How to remove or change the logo from the WordPress admin bar

Lately i have been customizing the administration toolbar of WordPress, and today we are going to change or remove the WordPress logo, that we have had enough of seeing it always there, right?

How to remove the WordPress logo from the administration bar

To begin with, we are going to remove the WordPress logo from the administration bar, and consequently the menu that appears, everything.

With a function

To start, you’ll see how easy it is, just add this function to your active theme’s functions.php file, or to a customization plugin, which you know I always encourage you to have for these things:

/* Remove from the administration bar */
function remove_logo_wp_admin() {
        global $wp_admin_bar;
        $wp_admin_bar->remove_menu( 'wp-logo' );
}
add_action( 'wp_before_admin_bar_render', 'remove_logo_wp_admin', 0 );Code language: PHP (php)

Save the changes and you got it.

With a plugin

You don’t dare with the codes? No problem, install and activate this plugin, go to its settings page and check the box “Hide WordPress Logos” to hide the WordPress logo from the administration bar.

No matter what method you choose, you’ll go from this:

To this:

How to change the WordPress logo in the administration bar

If you prefer to change the WordPress logo for another one, your brand or your client’s, for example, then you’re in the right place, let’s go for it.

With a function

Again, we start with a simple function, this one:

/* Change logo from the administration bar */
function wphelp_change_admin_logo() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(IMAGE_FULL_PATH) !important;
background-position: 0 0;
color:rgba(0, 0, 0, 0);
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
</style>
';
}
//gancho en la salida de la cabecera de admin
add_action('wp_before_admin_bar_render', 'wphelp_change_admin_logo');Code language: HTML, XML (xml)

The only thing you have to keep in mind about this code is the following:

1. Upload a logo image that is not too large, ideally no more than 20 pixels high, otherwise it will be cut off and look ugly.
2. Put the path of your custom image where the text is “IMAGE_FULL_PATH”. It can be relative or absolute, whatever you prefer.

An example with a relative path would be like this

/* Change logo administration bar */
function wphelp_change_admin_logo() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/logos/my-logo.png) !important;
background-position: 0 0;
color:rgba(0, 0, 0, 0);
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
</style>
';
}
//hook the header admin output
add_action('wp_before_admin_bar_render', 'wphelp_change_admin_logo');Code language: HTML, XML (xml)

In this example above, the image my-logo-png would be located in the folder /wp-content/themes/my-theme-active/logos/my-logo.png.

And here with an absolute path:

/* Change logo administration bar */
function wphelp_change_admin_logo() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(https://myweb.com/wp-content/uploads/2020/07/my-logo.png) !important;
background-position: 0 0;
color:rgba(0, 0, 0, 0);
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
</style>
';
}
//hook the header admin output
add_action('wp_before_admin_bar_render', 'wphelp_change_admin_logo');Code language: HTML, XML (xml)

As always, you have to add this function, either at the end of the functions.php file of the active theme or to your customizations and ‘tricks’ plugin.

With a plugin

In this case I would use the White Label CMS plugin, which has many more possible customizations, but this one in particular is here:

You just upload your logo and that’s it.

Again, remember that at most it’s 20 pixels high, wide can be a bit bigger, try several sizes, but height is the limit.

Whichever method you choose, you could go beyond the standard WordPress logo…

To something else you prefer…

Read this post in Spanish: Cómo quitar o cambiar el logo de admin de WordPress