Change WP Dashboard Logo

  • Tom
  • 7th March 2019

In this article, you will find a simple explanation for how to change the default WordPress Dashboard logo for images larger than 16px by 16px.There are few useful articles on how to manually change the dashboard logo in WP, and this is one of them “Manually Adding Custom Dashboard Logo in WordPress“.

 

How to Change the WP Dashboard Logo?

Fewer WordPress plugins mean faster website and better ranking! Therefore the only option we considered was for the back end coding and manipulation of the functions.php file! Unfortunately, we couldn’t find anything online, no simple explanation on “How to change the WP dashboard logo for images bigger than 16px by 16px. Eventually, we’ve ended up diving into the code, and the result you can see below.

 

PNG of 16 x 16 pixels
wp custom logo
PNG of 20 x 140 pixels
simplo dashboard

 

 

Our logo is designed to be wider than 16px, therefore, this code customisation. In fact, our logo and this article is for images 20px height and 140px wide. If you need the change the image width, please study the code first.

<?php // Custom Dashboard Logo
function wpb_custom_logo() {
echo '
<style >
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon {
width: 140px;
}
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/my-logo.png) !important;
background-repeat: no-repeat;
color:rgba(0, 0, 0, 0);
padding-left:140px;
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/my-logo.png) !important;
background-repeat: no-repeat;
color:rgba(0, 0, 0, 0);
padding-left:140px;
}
</style>
';
}

//hook into the administrative header output
add_action('wp_before_admin_bar_render', 'wpb_custom_logo');
?>

Here are a bit more details about the above PHP.

You can place the above code straight into your functions.php, at the bottom of your document, just please check its structure first. If you file has no closing ?> bracket, please add our code without <?PHP — our code — ?> markups. If your functions file has closing PHP markup, you can paste our code as it is, directly beneath the existing lines.

WP Dashboard How to fit bigger logo

The line that made it different was padding-left:140px; . We recommend you keep your new custom logo to 20px height. Anything above this size will shift the dashboard layout. The above padding-left is for the <div> that wraps the logo object. We have gone with 140px because this is the width of the side menu panel. However, you can add even bigger images, just please be careful as this customization will shift your Dashboard display.
Also, please note that you may need to further customize this for 992px displays. The WordPress Dashboard is designed to fit the name, links and top icons, all inline. Therefore extending the default logo with may affect this display.

Make sure the image path to your logo is correct. Double check the image sizes. Save as .png and upload to your server with amended .functions.php.

Happy coding 🙂