Customize WordPress Login

Do you want a Custom WordPress Login Screen?

It is very easy, keep reading.

1. Create a new folder into your theme.

I'll call it custom_login.

Inside the folder create a CSS file. Mine will be custom_login.css

2. Add the line

Add this line to your functions.php file (will be inside your theme folder. If it doesn't exist create it)

NOTE: please notice the custom_login folder and the custom_login.css file in the code.

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');

3. Styles

Add your styles into the custom_login.css

I used one image (stored in this new folder we just created) and my own logo.

/* Background image */
html {background-image:url(bg.jpg);}	

/* Logo Image*/
h1 a {background:url(/wp-content/uploads/2010/03/develop_logo2.png) 0 0 no-repeat;} 
 
/* Top bar background color */
body.login {border-top-color:#fff;}	

/* Link effects in top bar */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;}	

/* Rollover link effects in top bar */

Done!