Custom WordPress Login Page

Current Version: N/A
Price: FREE

Have you ever seen a customized WordPress login page? Pretty snazzy! Whether you’re designing a WordPress site for yourself or for a client, a customized login page adds the extra touch that makes a site feel like a truly professional creation. There are a few plugins that can assist you in creating a custom look for your login page but it’s just as easy to manipulate in your theme’s source. You’ll just need to add some code to your theme’s ‘functions.php’ file and then create a file that contains the necessary CSS to attain your desired look and feel for the page. I’ll use the login page I created for this site as an example.

First, open your theme’s ‘function.php’ and add the following code at the bottom of the file, above the closing php tag. This code attaches an action to your login page which inserts a link to a new CSS file contained in your theme’s directory named ‘custom-login.css’.

/* CUSTOM LOGIN PAGE */
function custom_login() {
	if($_SERVER["SCRIPT_NAME"]=="/wp-login.php"){
		echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/custom-login.css" />';
	}
}
add_action('login_head', 'custom_login');
/* END CUSTOM LOGIN PAGE */

Save and close your theme’s ‘fucntion.php’ file.

Now you need to create a file named ‘custom-login.css’ in the root of your theme’s folder (‘wp-content/themes/YOURTHEME/custom-login.css’). Open the file and paste the following css:

/* WordPress Custom Login Styles */


/* WEB FONTS */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700,400|Roboto+Condensed:400,700);


/* ###################################################################
              Master link properties
   ################################################################### */
a:hover, a:active, a:focus {
    color: #fff !important;
}





/* ###################################################################
              Body properties / top half of page background color
   ################################################################### */
body {
    font-family:'Lucida Sans Unicode',Verdana,Arial,Helvetica,sans-serif !important;
    background:#fff !important;
    border:none !important;
    height:100% !important;
}





/* ###################################################################
              Bottom half page background color
   ################################################################### */
html {
    background:#fff !important;
}






/* ###################################################################
              Logo above login form
   ################################################################### */
h1 a {	
/* UNCOMMENT TO ADD CUTOM LOGO IMAGE
        background: url(http://www.yourdomain.com/path-to-image) no-repeat center top;   
*/
    width:0px !important;
    height:0px !important;
    text-indent: -9999px !important;
    overflow: hidden !important; 
    padding-bottom:5px !important;
    display: block !important;
} 





/* ###################################################################
              Back to blog link bar
   ################################################################### */

.login #backtoblog{
    position: fixed !important;
    top: -16px !important;
    left: -16px !important;
    padding: 13px 0 0 18px !important;
    background-color: #42230a;
    border-bottom: 1px solid #7e6040;
    height: 37px !important;
    width: 100% !important;
    white-space: nowrap;
} 
.login p#backtoblog a:link, .login p#backtoblog a:visited {
    /* Link effects in top bar */
    color:#fff !important; 
    font-size: 1.3em !important;
    outline: none !important;
    text-shadow: none !important;
}

.login p#backtoblog a:hover, .login p#backtoblog a:active {
    /* Rollover link effects in top bar */
    color: #fff !important;
    text-decoration:underline !important;
}

body.login {
    border-top-color:#dff4fc !important; /* Top bar background color */
}




/* ###################################################################
               Login form
   ################################################################### */
#login, #registerform, #lostpasswordform {
    margin: 0 auto !important;
    position:relative !important;
    width: 367px !important;
    top: 35px !important;
}

#login .message, #registerform .message, #lostpasswordform .message{
    margin: 0 0 30px 0 !important;	
    padding: 10px !important;
    border: 1px solid #c42c00 !important;
    color: #c42c00 !important;
    background: #f0d6cf !important;
    -moz-border-radius: 10px !important;
    -khtml-border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    border-radius: 10px !important; 
}

form#loginform, form#registerform, form#lostpasswordform {

    /*remove the following two lines if you do not wish to incorporate a form background image */
    background: url(http://www.schiffner.com/wp-content/themes/schiff-responsive/images/login/login_form_bg.jpg) no-repeat left top #fff !important;
    background-position: -13px 0 !important; 

    padding: 75px 0 0 0 !important;
    margin: 0 0 0 0 !important;
    box-shadow:none !important;
    -moz-box-shadow:none !important;
    -webkit-box-shadow:none !important;
    -moz-border-radius: 10px !important;
    -khtml-border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    border-radius: 10px !important; 
    border: 1px solid #282461 !important;
}

#loginform .input, #registerform .input, #lostpasswordform .input{
    border: 1px solid #292464 !important;
    background: #f7f7f7 !important;
    width: 320px !important;
    margin: 0 0 10px 22px !important;
}
#loginform #wp-submit{
    background: #282461 !important;
    margin: 15px 24px 22px 0 !important;
}
#registerform #wp-submit{
    background: #282461 !important;
    margin: -5px 24px 15px 0 !important;
}
#lostpasswordform #wp-submit{
    background: #282461 !important;
    margin: 5px 24px 15px 0 !important;
}
#loginform, #loginform label, #lostpasswordform, #lostpasswordform label, #registerform, #registerform label, #lostpasswordform, #lostpasswordform label{
	font-size: 1.1em !important;
    color: #282461 !important;
    margin: 0 0 0 22px !important;
}
#registerform #reg_passmail{
	margin-left: 25px !important;
}
#registerform .g-recaptcha{
    margin: 10px 0 15px 32px !important;
}



/* ###################################################################
		Navigation links under login form
   ################################################################### */
#nav{
    position: relative !important;
    clear: both !important;
    position: relative !important;
    top: 20px !important;
    color:#282461 !important;
    font-size: 1.1em !important;
    text-shadow: none !important;
    text-align: center !important;
}

.login #login #nav {
    color: #282461 !important;
}
.login #login #nav a {
    color: #282461 !important;
    text-decoration: none !important;
}
 
.login #login #nav a:hover {
    color: #282461 !important;
    text-decoration: underline !important;
}

This CSS serves as a starting point for your custom creation!
You might have noticed all the !important’s throughout the above CSS. This is because this CSS does not replace the stock login page’s CSS. Rather, the contents of the your new ‘custom-login.css’ are included on the login page in addition to the stock login CSS. When we declare a duplicate style we need to make sure WordPress uses OUR style, thus the !important overrides.

Without modification, the above example code will produce a customized login page that look like this:
custom_login
For my application I decided against a custom logo and instead applied a background image on the login form. You may wish to remove the background image and add the logo back in. The necessary lines are commented in the above CSS.


Leave a Reply

Your email address will not be published. Required fields are marked *