Change The WordPress Logo In Your Admin Pages

Tutorials | By | 1 November 2010 | Comments 9

Whilst supporting WordPress is key, you or your clients might not want the WordPress logo on the admin and login pages.

So Today I will show you how to add your own logos to replace the default WordPress logos, the following changes take part in your functions.php file, so ensure you backup before you continue, and be aware of leaving whitespace!

Login Logo

Open functions.php and add the following:

function login_logo() {
echo '<style type="text/css">
h1 a {background:url("'.get_bloginfo('template_directory').'/img/loginlogo.gif") !important; }
</style>';}
add_action('login_head', 'login_logo');

You should then upload your new login logo to the path you have specified in the code snippet above, I find the best image size to use is width: 326px x height: 76px, also a transparent .GIF image works well.

Admin Logo

Open functions.php and add the following:

function admin_logo() {
echo '<style type="text/css">
#header-logo {background:url("'.get_bloginfo('template_directory').'/imagefolder/adminlogo.png") !important; }
</style>';}
add_action('admin_head', 'admin_logo');

You should then upload your new admin logo to the path you have specified in the code snippet above, I find a 32px x 32px transparent .PNG logo works well here.

For Your Information

In the examples I have uploaded the image files to the image folder in the template I’m using with my WordPress install, the  ‘.get_bloginfo(‘template_directory’).’ line states this for you, you only need to alter the folder name and image file name that follows.

Removing The Logos

You can of course opt to have no logo displayed on the login page or the admin section, to do this use these snippets:

Login Logo

Open functions.php and add the following:

function login_logo() {
echo '<style type="text/css">
h1 a {display:none;}
</style>';}
add_action('login_head', 'login_logo');

Admin Logo

Open functions.php and add the following:

function admin_logo() {
echo '<style type="text/css">
#header-logo {display:none;}
</style>';}
add_action('admin_head', 'admin_logo');

Conclusion

This is an easy way to personalize your WordPress install and will ensure the logos remain in place. When you alter the logo images manually they sometimes are removed during an upgrade.

Paul Maloney is a UK based web designer/developer and runs the design agency Tropica. He particularly enjoys using and working with WordPress and has a keen interest in typography. You can also follow Paul on Twitter.

Visit Paul Maloney's website

9 Comments

  • November 1, 2010
    • November 1, 2010
  • November 1, 2010
    • November 1, 2010
  • November 1, 2010
    • November 1, 2010
  • November 2, 2010

Leave A Comment.