login1

Update (24/8/11): The code below should all still work, but a number of the samples are no longer active, sorry!

The WordPress admin login page is very easy to customize. With the code below, you can add your own CSS to the login page and make it look however you like. Check out the new Pro Blog Design login to see it in action.

Best of all, your customizations are all done in your theme files, so the changes will stay when you upgrade WordPress.

This is the first in a series of WordPress Hacks posts. The code is all done by Milo, and then written up into a blog post by me. There will be a new hack released every Thursday!

1 – Edit Functions.php

Your theme may or may not have a functions.php file in it already. If it does, paste the code below into the bottom of it. If not, just create a blank file in Notepad and save it with that name.

And remember not to leave any space before or after the <?php and ?> tags as you do this!

1
2
3
4
5
6

<?php
function custom_login() { 
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/custom-login/custom-login.css" />'; 
}
add_action('login_head', 'custom_login');
?>

2 – Edit Your Theme Files

login-folder We will need a place to store your new CSS styles and any images you might use. Seeing that they aren’t part of the main site, let’s create a new folder for them.

Create a folder in your theme’s folder and call it “custom-login“.

And inside that folder create a new stylesheet called “custom-login.css”.

3 – Add New CSS Rules

The custom-login.css file will be loaded each time your login page is loaded. That means that any rules you add here will be applied to the login page.

If you add new images, you can store them in your custom-login folder.

However, if you want to re-use images from your theme, just use CSS rules like the following to use the image from your theme’s images folder (That way, your browser won’t need to download the images again as it will already have them cached).

1

html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}

A Simple Template Example

The following is the stylesheet I’ve used to create my new login form. It is very, very simple, but it does the trick nicely. I’ve commented it, so feel free to adapt it and use it on your own site.

1
2
3
4
5
6
7
8
9
10
11
12

/* Custom Login Styles */
 
html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}	/* Page background. Can't use the body tag for this! */
h1 a {	/* Title image (The "WordPress Logo"). Remember to update the height and width your image's dimensions */
background:url(../images/pbd-title.png) 0 0 no-repeat;
width:415px;
height:70px;
} 
 
body.login {border-top-color:#dff4fc;}	/* Top bar background color */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;}	/* Link effects in top bar */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;}	/* Rollover link effects in top bar */

More Advanced Customizations

Of course, you can do a lot more than that. If you check out the screenshot below of a site Milo created for Intellivative, you can see that she’s modified the design of the login form itself, just using a few more CSS rules.

login-intellivative

You may find it useful to check out the default WordPress login stylesheet as well. You will find it in /wp-admin/css/login.css and some of the colors will be set through /wp-admin/css/colors-fresh.css (Unless you changed the color scheme in your admin panel, in which case it is colors-classic.css).

If you update your login form, let us know in the comments and I’ll collect the links here!

Update: Andi Saleh has created a great login page with this technique.

Update 2: Andrea from WPMU Tutorials has turned this into a plugin for all your WPMU users out there!

milo WordPress Hacks Series: The code in these posts was written entirely by Milo, a web designer from Oxford, Britain. Check out her website for free WordPress themes and her blog, or follow her on Twitter!

Enjoy this post? You should follow me on Twitter!