How To Customize the WordPress Admin Login Logo

As with most internet marketers, the team here at Ephricon are huge fans of WordPress.  That said, sometimes the default login page can look a bit common and drab.  The solution?  A quick customization by adding your (or your client’s) logo.

Changing the WordPress admin log in screen logo to be branded for your company is simple.  It does not require any plugins that could cause conflicts with another plugin or extensive knowledge in web development.  The code below will allow simple replace the current WordPress logo with the logo of your choice.

Place your logo file ( ours being “custom-login-logo.png” ) in your themes images folder.  You can also upload the logo using WordPress Media and then give a direct URL to the file but I personally recommend the approach outlined in my code.  If you ever wanted to change the logo it would be as simple as replacing the image file in the images folder as opposed to re-uploading the image to WordPress Media and changing the direct URL.

Once you have done this then it’s time to place the code in the appropriate file.  Before we do this let me say before someone jumps all over it.  I do not recommend placing code directly into your themes functions.php file.  When developing on WordPress, even with a theme you may have purchased I always recommend creating a child theme of the theme you chose and then working on files within there.  But the topic of Child themes goes beyond the scope of this post. The issue is if your theme gets an update you may lose any additions to the core theme files.

Now lets go break my own rule for the sake of this post.  Locate the themes functions.php file which should be in your themes root folder.  Go ahead and copy and paste the code below into your themes functions.php file.

/* ADD CUSTOM LOGO TO WP LOGIN SCREEN */
function change_login_logo() {
    echo '<style type="text/css">
         h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.png) !important; }
         </style>';
}
add_action('login_head', 'change_login_logo');

Yup.. that’s it.. go ahead and refresh your WordPress log in screen.  Just one simple way to give your business/personal site a little extra character.  We all know we log in to WordPress 25 times a week.  It will now be nice to see your company’s branding!

In the above image for Ephricon’s log in in screen the form is styled with different colors than the default WordPress admin.  That above code will only change the logo.  If anyone is interested in that feature please hit me up in the comments.

Update: 12-11-2012

Arlight! Now for the customizing of the form colors..  There are two simple steps to customizing the colors.

1. In your theme directory create a file name “wp-admin.css”.
2. Add the following code to your themes functions.php file.

/* CHANGE LOGIN FORM STYLES */
function change_form_styles() {
      echo "<link href='".get_bloginfo('template_directory')."/wp-admin.css' rel='stylesheet' type='text/css'/>";
}
add_action('login_head', 'change_form_styles');

As easy as that.. Now just go ahead and add whatever CSS styles you would like to the wp-admin.css file you created. In case your were wondering.. the form styles on the Ephricon Login form are as follows.

.login form {
    background: none repeat scroll 0 0 #074D85;
    border: 1px solid #E5E5E5;
    box-shadow: 3px 3px 8px -3px #000000;
    font-weight: normal;
    margin-left: 8px;
    padding: 26px 24px 46px;
}
.login label {
    color: #FFFFFF;
    font-size: 14px;
}