Create A Custom WordPress Login Page

The default WordPress login screen has a nice clean look to it, but there may be times where you want to customize its appearance with a custom login logo.  For example, let’s say you’re creating a custom theme for someone and want to add a special touch to it.  Why not add this special touch to it?

You probably are well aware of what the standard WordPress login page looks like, but in the off chance that you don’t here is what almost everyone sees when logging into their WP site:

You can make your login page uniquely yours by substituting the image above the input boxes.  For example, here is what I see when I pass through my login page:

I did this with a very short function and a little time in Photoshop.  I modified the default graphic in Photoshop to reflect my blog’s title, named it custom-login-logo.png, uploaded it into my theme’s image folder and then added this to my functions.php file:

function my_custom_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', 'my_custom_login_logo');

You may have to modify the location of your theme’s image folder on line 3 above if your images are located in a different path.  Since I’m currently using the Thesis theme, the function I used was this:

function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/custom/images/custom-login-logo.png) !important; }
    </style>';
}

add_action('login_head', 'my_custom_login_logo');

While we’re on the subject of custom login pages, it would also be a good idea to add a little extra security here if you haven’t done so already.  Have you ever noticed that when you log in to a WordPress site with the wrong info an error message pops up?  You may see something like this:

Well, that little error message is actually helping out anyone who may be trying to brute force their way into your site.  If the error message says, “Invalid username” then a hacker knows that they have to try a different username.  If the error message says, “Incorrect password” then a hacker knows they have a valid username but an invalid password.

For security reasons it is a good idea to remove these error messages from the login page.  You can do that by adding a single line of code to your functions.php file:

add_filter('login_errors', create_function('$a', "return null;"));

After doing this, anyone who logs in with incorrect information will see this instead:

If you have any examples of custom login pages you’ve created, share them in the comments!

Tip of the hat goes to WPRecipes

No related posts.