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.
1 2 3 4 5 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* 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;} |
Done!
Check out my new custom login page http://php.quicoto.com/wp-login.php
Mark
I found this tutorial that uses FancyBox a couple of days ago. http://net.tutsplus.com/tutorials/wordpress/quick-tip-making-a-fancy-wordpress-register-form-from-scratch/. the wp-login page is always left out of the design scheme. Thanks for cleaning that up!
quicoto
Hi Mark,
The tutorial fron nettuts its great but pretty much harder.
Wich one will you use? 🙂
Mark
The Nettuts tutorial has been sitting on my browser for a couple of days. It is quite a bit of work; I am not quite ready to spend my time on it! Simple is usually the best practice.