Add Snippet To Project
If you’re managing multiple WordPress sites for clients, you might want to customize the backend of WordPress to show your own company logo instead of the default WordPress logo. Or maybe you just want to add a little personality to your own site’s dashboard. In any case, changing the admin logo in WordPress is a simple process that can be done with just a few steps. In this article, we’ll guide you through the process of changing the WordPress admin logo to your own custom logo.
function wpturbo_custom_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') . '/images/admin-logo.png) !important;
background-position: 0 0;
color: rgba(0, 0, 0, 0);
}
#wpadminbar #wp-admin-bar-wp-logo:hover > .ab-item .ab-icon:before {
background-position: 0 0;
}
</style>';
}
add_action('wp_before_admin_bar_render', 'wpturbo_custom_admin_logo');
The code snippet above demonstrates how to change the default WordPress admin logo to a custom image. Specifically, the logo is changed in the top-left corner of the WordPress admin bar.
To implement this functionality, we define a new function named wpturbo_custom_admin_logo(). We use the echo statement to output a block of CSS code that defines the new logo image.
In this block of CSS code, we use the background-image property to specify the URL of the new logo image. This value is retrieved using the get_bloginfo() function and pointing to the 'stylesheet_directory' directory, where the image file is located.
We also set the background-position property to 0 0, which ensures that the top-left corner of the logo is aligned with the top-left corner of the admin bar. Additionally, we set the color property to rgba(0, 0, 0, 0) to make sure the text of the old logo is hidden.
Finally, we use the add_action() function to hook the wpturbo_custom_admin_logo() function into the wp_before_admin_bar_render action. This action is triggered just before the admin bar is rendered, allowing us to customize the admin logo image.