The default login screen that we see in WordPress is not that good looking. If you want to create an identity for your blog then you should definitely spend some time on making your login page a nice looking one. Previously to create a custom login page lots of codings and css were involved. But now there is a plugin called Branded login screen plugin which helps to create a powerful login page in no time.  Now I will tell you how to make a custom login page using plugin.

Related Read:

How to change login username in WordPress

Creating Custom WordPress Page Template

Wordpress Custom Login Page

Click Here to see my login page.

How to make custom login page – Step by Step

1. First download, install and activate Branded Login Screen plugin. Check whether any update is available for the plugin in your WordPress plugins page and if so then update the plugin. After updating the plugin take a copy of it in your system so that you can modifying the plugin in your system and then transfer it again.

2. Now if you login you can see your new login page but the page has plugin author name and other stuff. So the next steps will be on how to modify the page to our needs.

3. In your branded login screen plugin folder go to assets->j>branded-login-screen.js.  There you can see the background image url. You can change the background image to your desired background image or you can also remove the background image. After removing the image if you want have any specific background color then go to assets->c-> branded-login-screen.css and change the color code in bg property.

4. By default the login form appears at the right side of the page.  To change it open the branded-login-screen.css located at assets->c-> branded-login-screen.css. If you want to move the form to center then uncomment that section lines and same thing for left and right. If you just scroll down the css file you can spot it easily. Remember to recomment the sections if you wish to reposition the form.

5. To change the logo image above the login form go to assets->i and replace the image named header with your image. It’s better if you have the image in same dimensions.

6. The links present in the footer can be modified using the same branded-login-screen.js file that we saw before.

7. Now you have your new powerful login screen. If you are little comfortable with plugins and CSS then you can modify the design more and more. I have just dealt with a basic setup.

See the login page that I have done for healthmango.com. It’s one of my blogs.

If you have any problems in setting up the plugin just say it in comments and I will help you.