How to: Add custom dashboard logo in WordPress

In my previous note How to: Customize Your WordPress Login Logo, I explained how to add your own logo to your WordPress login page. In this note, I’ll teach you how to customize the dashboard logo with your own logo.

It’s very easy to add your own logo. No need to install plugins. Just add some line of code to your theme’s funtion.php file and you can feel the difference. I think this is very helpful for WordPress Multisite Users. How it’s possible?. Please follow these steps.

Step 1: Creating a Logo Image

If you are using a new version of the WordPress(3.2x) blog, create an image with a 16×16 pixel size or if you are using an old version create an image with a 30×30 pixel size. Here I set “dash_board_logo.png” as it’s the file name. You can create the logo image in any format (.gif, .png, .jpg) as you like. Save it into your theme’s image folder like “/your_theme_folder/images/“.

Step 2: Setting Image

Open a text editor and copy-paste the script shown below

#header-logo {
 background-image: url('.get_bloginfo('template_directory').'/images/dash_board_logo.png) !important; }

16×16 pixel size is very small. If you want to show a big image instead of a 16×16 pixel image in your new WordPress version dashboard, set it’s width and height as you like. Here I like to set 30×30 pixel size, then the code becomes like this

#header-logo
 {
 background-image: url('.get_bloginfo('template_directory').'/images/dash_board_logo.png) !important;
 width:30px;
 height:30px;
 }

Also, you can add any CSS property to your logo as you like

Step 3: Adding an image to the Dashboard

Open your theme’s function.php file. Create a function dashboard_logo(). Copy and paste the CSS script, that we have written above. Now it’s time to add the CSS script to your admin page, by using WordPress’s add_action() function.

Here's the final script to replace your WordPress dashboard logo with your own logo.

 // Custom dashboard logo
 function dashboard_logo()
 {
 echo '
 #header-logo
 {
 background-image: url('.get_bloginfo('template_directory').'/images/dash_logo.png) !important;
 width:30px;
 height:30px;
 }';
 }
 add_action('admin_head', 'dashboard_logo');

Now save the function.php file and go to your WordPress blog admin page feel different. If you have any bug report please Comment below. Happy blogging 🙂