People have designed so many beautifull wordpress theme but many of them leave the login screen remain intact. Sometime it’s necessary to customize the login screen to give our user a better experience of using our site, especially for someone who have multiple user for posting articles or administering their blog/website or blogs who requires user to log in before making comments. Your user will be happy to see your customized login screen as we can see in these examples. So, How do we do that? In WordPress 2.9, it should be easy to restyle the login screen by just using one stylesheet and add it to the login page using hooks.

Login Page Action Hooks

Hooks are provided by WordPress to allow you to create and execute your custom function without having to modify wordpress core files. There are two kind of hooks in wordpress, ‘action’ and ‘filter’. Refer to the wordpress codex to get more understanding about hooks.

What we need to look after is hooks which are available on wp-login.php where our login page is generated. There are several hooks available, but we need to concentrate only on two hooks: login-head, and 'login_form_' . $action. First hook is where we will hook our custom stylesheet, the second one is where we will modify the login page HTML if we find it necessary.

Create Custom Stylesheet

First of all, we need to create a stylesheet and name it anything you like but for this instance, I name my stylesheet: login.css. This is where we will write our custom style to override any of the defaults. Take a look at the following code;

/* Hides the wordpress logo and display the heading text */
h1 a {
	text-indent: 0;
	text-align: center;
	font: 22pt "Palatino Linotype", "Book Antiqua", Palatino, serif;
	text-decoration: none;
	color: #1d1d1d;
	background: none;
	margin: 25px 0 10px 0;
	width: 400px;
	height: 40px;
	line-height: 40px;
}

h1 a:hover {
	color: #333;
}

/* Change the width of the login box */
#login {
	width: 400px;
	margin: 0 auto;
}

/* Move the "Lost password" link to upper right of the page */
#login #nav {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0 18px;
	line-height: 45px;
	text-shadow: none;
	font-size: 9pt;
	color: #ffffff;
}

What I did on above example is simply hides the wordpress logo, show the heading text and move the “Lost password” link to the upper right of the login page. You need to take a look on wp-admin/css/login.css to find what elements should be override for more customization. You may as well need to reset all the element before restyling. You can find a good example of CSS Reset code on meyerweb.com . Add the reset code before anything on the login.css. Save the file and upload them into the same directory of your theme style.css.

Function to Hook The Custom Stylesheet

The second thing is we need to create a callback function to hook the stylesheet into the login page header. Open your theme functions.php (create one if your theme doesn’t have one) and add this code onto it:

// Custom wordpress login style function
add_action( 'login_head', 'my_custom_login_style', 99 );
function my_custom_login_style() {
	print '<link rel="stylesheet" type="text/css" href="';
	print get_stylesheet_directory_uri();
	print '/login.css" media="screen" />' . "\n";
}

Save or upload the functions.php file into your theme directory, that’s it! Go to your login page and see the difference. Well, it isn’t that beauty, but you do know now how to customize your wordpress login screen, the rest is depend on your design creativity.

Customizing the Login Page HTML

We sometime need to make more customization to the login page, like adding links or something. To achieve this, we need to use the second hook 'login_form_' . $action. $action in this hook allow theme and plugins to override the default actions, and to add extra actions if we want. In this case, the $action refers to ‘login’, so our real hook is 'login_form_login'. Customizing the login page HTML can be way more complicated than adding custom stylesheet to the login-head hooks since we need to copy and paste something. I guest I’ll take my time and try to explain it later on my next article. :)