Yes, I said Sexy. We all know the default WordPress login page…
…beautifully minimal, straight-forward, but boring. Both it’s strength and weakness lie in it’s simplicity. WordPress gives us this easy to use solution for logging in to our CMS, but you don’t have to sacrifice style for functionality. Creating a customized, sexy login page is quick and easy, and will give your users a customized experience that will set you apart as a designer/developer.
For this tutorial you’ll need a basic understanding of the WordPress theme files, how to access and edit your Functions.php file, and CSS. If that’s not quite your bag, you can check out one of these custom WordPress login plugins for some quick do it yourself plugins.
1. First, Insert some stuff into functions.php
Open up your theme’s functions file (functions.php) and navigate to the bottom of the sheet. Insert the following code just before the ending “?>”:
function theme_custom_login() {
echo '<style type="text/css"/></style>';
}
add_action('login_head', 'theme_custom_login');
add_filter( 'login_headerurl', 'w4_login_headerurl');
function w4_login_headerurl(){
return home_url('/');
}
The first part of this code defines the “theme_custom_login” function that you will add style to in the 2nd step of this tutorial, the second part adds the function to the login page, and the final part adds a filter that directs the login logo to your own url, not wordpress.org.
2. Then, Add Your Style
Between the <style type=”text/css”/> and </style> you can add your CSS. Below are a couple examples of custom login pages and the CSS that accompanies them. Feel free to use my code and modify as you please!
html, body {height: 100%;}
h1 a { background-image:url('.get_bloginfo('template_directory').'/img/logo.png) !important; }
.login {background: #fff url('.get_bloginfo('template_directory').'/img/body-bg.png) repeat-x 0 0;}
html, body {height: 100%;}
.login {background: #fff url('.get_bloginfo('template_directory').'/images/login-bg.jpg) no-repeat center top !important;}
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo.png) !important; }
html, body {height: 100%;}
.login {background: #fff url(http://www.lalunaseattle.com/wp-content/uploads/2011/04/background.jpg) no-repeat center top;}
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/loginlogo.png) !important; width: 325px; height: 170px;}
#backtoblog {display: none;}
#login {background-color: #fff; margin-top: 20px; padding: 15px;-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 0 5px 1px #000; -webkit-box-shadow: 0 0 5px 1px #000; box-shadow: 0 0 5px 1px #000;}
form {box-shadow: 0 0 0 !important; border: 0 !important;}
form label {color: #9C7C67;}
That’s it! Wasn’t that easy? As you can see, with some basic background images, logos and CSS, you can transform the login page from plain and boring into creative and fun! If you need some inspiration or help with design, check out this article that has some fun designs and PSDs for creative login pages.
Lastly, I want to mention that some developers will suggest bypassing the functions.php file and editing the login page’s source CSS directly in the core files. You CAN do this, but when you update your WordPress core files (as you should every few months when updates come out), your customizations will be wiped away. By using this method, your log-in page will remain in your theme files, not being replaced by WordPress updates (if you are using a theme or framework that has regular updates, you might want to consider using a child theme functions.php file, but that’s a topic for another tutorial).
If you have any issues feel free to leave your questions in the comments below and I’ll do my best to address them. Enjoy!