Customize your wordpress login page

Styling your wordpress login page

View the LIVE DEMO
This article is in regards to our custom login page. We have had many requests on how it was created, so we decided to share. I hope this helps you all create something amazing.

First of all we need to tell WordPress to load a custom style (CSS) sheet for the login page which is does not do by default. In order to do this we need to write a custom function and add it to your themes functions.php.

It is always best to organize your work and for this project we will be creating a folder in your themes root directory called /login.

  • So it should look like this “themes/your themes name/login” without the quotes of course.

Here is an example of what you should put in your themes functions.php file.

function custom_login_css() {
echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login/login-styles.css" />';
}
add_action('login_head', 'custom_login_css');

As you can see, we are telling WordPress to load a custom CSS file called login-styles.css for the login page and to find that file in your new /login directory.

Now we need to create that CSS file. Make a new CSS file in a text editor or Dreamweaver or something like that and name it ‘login-styles.css’:

1. First we will set a background image by adding the following code to your new style sheet

body.login {
background: #fbfbfb url('your-bg.jpg') no-repeat fixed center;
}

2. Now we will replace the WordPress logo with your logo. Create a logo.png and put that in your /login directory and then add the following to your login-styles.css. You will want to change the sizes to match your logo image of course

.login h1 a {
background-image: url('../login/logo.png');
background-size: 300px 260px;
width: 300px;
height: 260px;
}

3. Now you can change the look of the login form itself by adding your custom styles like the following

.login form {
margin-left: auto;
>margin-right: auto;
padding: 30px;
border: 1px solid rgba(0,0,0,.2);
-moz-border-radius: 5px
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
}

4. Next we should style the input fields so we can separate our form from the standard form even more

.login form input {
width: 240px;
height: 48px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display: block;
}

.login form input:focus,
.login form textarea:focus {
background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
overflow: hidden;
}

Ok, that about covers it. You may have noticed that we have also added a social bar to our login form and that is pretty cool, but that is also a much more involved process. If we get enough requests then I promise I will come back to this article and add an additional tutorial about that as well. This is a good start though and I hope you all are able to make some incredible login pages.

Please share your custom creations with us and comment below regarding any troubles or questions or even to give us thanks if you would like. Looking forward to hearing from you all…

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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