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

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

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 */

.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:none;}

3 comments