Add a custom dashboard logo in WordPress

Have you ever thought of changing the dashboard logo in WordPress?
Alternatively, ever wonder about branding your site by adding just a logo. So here is a small snippet that helps to replace the default logo with your branding logo. First, add the logo image in the thems’s images folder, or if you don’t find such a folder then create one. Just make sure that your logo size must be 16×16.
Paste this to function.php file in child theme

function wps_custom_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/custom-logo.png) !important;
     background-position: 0 0;
     color:rgba(0, 0, 0, 0);
     background-repeat:no-repeat;
   }
     #wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
     background-position: 0 0;
   }
   </style>';
   }
 
//hook into the administrative header output

add_action('wp_before_admin_bar_render', 'wps_custom_logo');

In the above function, we are printing the logo with the CSS and also passing the path of the logo. After the CSS the add_action hook is added to display the logo in the header. And yeah don’t forget to replace the custom-logo.png with your logo.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top