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 '';
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 */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:none;}


Check out my new custom login page

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

Add <code> Some Code </code> by using this tags.