How To Change The Color Of The WordPress Dashboard And Replace Logo With Yours
In this quick and easy to follow tutorial, I'll show you how to change the color of the bar at the top of the wp-admin dashboard, plus a quick and easy way to replace the WordPress logo in the top left of the dashboard with your own logo.
Why would I do this?
If you're like me then you have multiple WordPress blogs and are usually working on more than one at a time. Sometimes I accidentally make changes in the wrong WP admin than I intended to since they all look the same by default and you are only give two color options for the dashboard on your profile settings page. I started changing the colors of the dashboard so I could easily tell the difference when editing things and it has been nice to see my logo dashboard as well.
What if you're setting up a site for a client, and want to add a little customized looking admin area using the company brand. Once they see the dashboard has their logo colors you will get bonus points for the extra credit you did.
So how do I do it already?
To replace the WordPress default logo that you see in the top left corner of the dashboard, first make a 32x32 pixels version of your logo and upload it to your images folder of your theme (/wp-content/themes/your_theme_path/images/).
Then open up your functions.php file in a text editor located in your theme directory where the other files like sidebar.php and single.php are (use notepad if you don't have a text editor). Copy and paste the following code between the Php tags. Be sure to change YOUR_IMAGE_NAME.JPG to whatever the name of your 32px image is. Save and upload the file to your theme directory.
// Replace dashboard logo
add_action('admin_head', 'my_custom_logo');
function my_custom_logo() {
echo '<style type="text/css">
#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/YOUR_IMAGE_NAME.JPG) !important; }
</style>';
}
This will add the action hook that will launch the function my_custom_logo() when you go to your dashboard which loads the wp_head().
Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. Your plugin can specify that one or more of its PHP functions are executed at these points, using the Action API.
But what about the color?
To change the color of the dashboard head you just need to drop this piece of code into the same functions.php file (below the custom logo code so you keep them together).
// Change WordPress dashboard colors
function custom_colors() {
echo '<style type="text/css">#wphead{background:#THE_COLOR_YOU_WANT}</style>';
}
add_action('admin_head', 'custom_colors');
Just change THE_COLOR_YOU_WANT to the hexadecimal color code of your choice. For example, FFFFFF is the code for white and 000000 is the code for black.
I use the eyedropper in Photoshop to find what a color is I don't know the code for. You can also use RGB if you want, just replace #THE_COLOR_YOU_WANT including the # with the RGB color code.
This code essentially does the same thing as the first one except the function custom_colors() alters the CSS background color of #wphead.
That's so cool!
And easy.
With both of these custom functions you're on your way to customizing all your WordPress dashboards, or maybe only the one you just did.
Have something to add?
Got a question about this?
Post a comment below!
About the Author
Jared is from Boston working as a web and graphic designer. Also owns the design blog Tweeaks.com, and has designed many other websites powered by Wordpress including the New2WP theme.
User Comments
( ADD YOURS )Epiphora April 21
Thanks for this! Is there a way to use an image as the background for the whole header, rather than just a color? That would be awesome.
Jared April 21
Yes you can. Actually you can customize the color of the title too. Here's the code I'm using for my testing site to change the logo image, title text color, and background image.
// Change dashboard header
add_action( 'admin_head', 'custom_colors' );
function custom_colors() {
echo '<style type="text/css">#header-logo{ background-image:url('.get_bloginfo('template_directory').'/images/MY_LOGO_IMAGE.png)!important; } #wphead{background:#191919 url('.get_bloginfo('template_directory').'/images/MY_BACKGROUND_IMAGE.png) repeat-x!important;} h1#site-heading a{font-family:Rockwell, Palintino Linotype; color:#7BCC02;}</style>';
}
My background image repeats, thought you can change it so it doesn't, and still control the bg color by changing #191919. I also changed the font family of the title text to Rockwell, and color to #7BCC02.
Epiphora April 22
Thank you so much!! That is awesome! Thank you for taking the time to reply to me, I really appreciate it.
Jared April 22
No problem. Happy to help :)
Steve in Japan August 22
This is great! Also I just wanted to add that if you're using a child theme, and the logo is inside that theme directory, you'll want to change
template_directory
to
stylesheet_directory
Steve in Japan recently posted..Takoyaki on a Chopstick
Jim November 1
Nice to know how to do this, I suppose I figured it was always possible. I never thought about it as being a good way of reminding my clients of my participation in putting together their sites - nice idea!
Michael Smith November 11
What’s really cool and easy is that YOU put it all up here in the most simple and informative way for everyone to DIY!
Gregg April 4
I have customized my login screen with a logo using html{background:#E2DEAF url(.../images/login_logo.jpg) center top no-repeat;} because it is so wide. Usually would not tie something to the HTML element. works great BUT... it also shows up in the admin area. Anyway to prevent this? I only want it on the login.
Jared April 5
don't ever use html selector for doing something like that. if anything you could use the body tag, but ideally you should just resize the existing default WP logo placeholder h1 tag, and use your background image by overriding the default styles. You can do it right in firebug and then just copy the css to your functions file inside a function like:
add_filter( 'init', 'customStyles' ); function customStyles() { ?> <style type="text/css"> h1 { // ... your styles } .logo { // idk what the tags are }</style> <?php }Ed April 26
But what about the color?
To change the color of the dashboard head you just need to drop this piece of code into the same functions.php file (below the custom logo code so you keep them together).
view source
print?
1 // Change WordPress dashboard colors
2 function custom_colors() {
3 echo '#wphead{background:#THE_COLOR_YOU_WANT}';
4 }
5 add_action('admin_head', 'custom_colors');
Thanks for this. It was so helpful and very easy to follow your instructions. I didn't know you could change the color as well.
Ed
Jared April 29
You can change alot more than that too. The dashboard of this site is completely customized. You should join to see what it looks like and what is possible.
http://new2wp.com/wp-admin/
Gray Rollins June 3
That's cool! I never knew I could change the color of the dashboard... there are several times where that would have come in handy - like you I have a few different blogs and sometimes I have two of three of them open at once and more than once I've installed or posted something to the wrong blog.
Thanks,
Gray
Minisite Design June 6
How to change the color of the wordpress dashboard and replace logo with yours - a very informative posts! You are able to help those in search for this.This is the type of information that should be shared around the net. Minisite Design
Danielle June 24
Thanks for the helpful tips! As a new WP user I really appreciate this site.
Danielle
Writer
Enviroselects
Sarah Green July 5
"If you're like me then you have multiple WordPress blogs... Sometimes I accidentally make changes in the wrong WP admin"
I tend to make sure I upload a unique favicon to each installation early on when I start working on a site, to distinguish one admin from another. But they can be flaky in some browsers, so this is a good way to ensure you can distinguish between admins.
Trackbacks