change WordPress login page

As a WordPress developer, I often try to implement WordPress features manually rather than using different plugins all the time. A few days back I was trying to make custom wp-admin login URL for my blog and suddenly a query comes to my mind. Is it possible to change WordPress login page design without plugin? I did research on it and got my answer. Yes! It is possible to create WordPress custom login page manually. And I thought I should share this knlowldge with you.

 

If you are a WordPress developer like me and want to learn how to change WordPress login page design without plugin, then you are at right place.

 

What are You Going to Learn in This Lesson

  1. How to change WordPress login page background?
  2. How to replace WordPress Login page logo with your own logo?
  3. How to customize WordPress login form?
  4. How to keep WordPress login form remember me checkbox checked?
  5. How to customize WordPress login lost password option?
  6. How to hide complete login form?

 

Let’s get started…

 

Process to Change WordPress Login Page Design Without Plugin

In this post, we will not only learn how to design WordPress login page rather then we will also learn to hide a specific feature of WordPress login page.

 

I recommend you to try to implement this lesson on localhost instead of any live website. So, install a fresh WordPress project on your localhost.

 

If you are a Mac user then this article How to Iinstall WordPress Locally on Mac Using MAMP will help you.

 

After installing WordPress, put your theme in wp-content->themes. I am using the twentyfifteen theme for this lesson.

 

Now follow below mentioned steps

  1. Go to your theme folder and create a brand new folder with the name “login”
  2. Create a new CSS file within this “login” folder called custom-style.css
  3. Next, we will tell WordPress to load this CSS file. To do so, open functions.php and add following codes in it.

 


function my_custom_login() {

   echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-style.css" />';

}

 

Well, we are all set to go ahead…

 

How to Make Custom WordPress Login Page Background

To customize wp-login page background, go to custom-style.css and insert following code there. The following code will change the background color of the wp-login page.


body.login {

  background-color: #D81B60;

}

 

If you want to add a background image, use following codes.


body.login {

  background-image: url(‘http://localhost:8888/wplogin/wp-content/uploads/2017/07/01.jpg’);

  background-size: 100% 100%;

  background-repeat: no-repeat;

  background-position: center;

}


 

How to Replace WordPress Login Page Logo With Your Own Logo

You have seen, WordPress comes with its brand logo on WordPress login page by default. But you can replace this with your own brand logo.

 

Here is how you can do that…

 

Go to custom-style.css once again and insert following code.


.login h1 a {

  background-image: url('http://localhost:8888/wplogin/wp-content/uploads/2017/07/logo-1.png');

}


 

After using above code, the WordPress logo will be replaced with your own. But, you may face a problem with its dimension. By default, WordPress logo comes with 84px height and width. Don’t worry, we have control over it. Use following code to customize WordPress login page logo dimension.


.login h1 a {

    background-image: url('http://localhost:8888/wplogin/wp-content/uploads/2017/07/logo-1.png');

    background-size: 250px !important;

    height: 100px !important;

    width: auto !important;

}

 

How to Customize WordPress Login Form Inputs

First, we will customize input label. Use following codes.


.login label {

  font-size: 15px;

  color: #000;

}


 

Next, we will customize form inputs. Use following codes.


.login input[type="text"]{

  background-color: #FFCDD2;

  border-color:#000;

  border-radius:0 !important;

  background: #FFCDD2 !important;

}

.login input[type="password"]{

  background-color: #FFCDD2;

  border-color:#000;

  border-color:#dddddd;

  background: #FFCDD2 !important;

}
.login input[type="text"]:focus{

  border:none;

  border-radius:0 !important;

  background: #FFCDD2 !important;

}

.login input[type="password"]:focus{

  border:none;

  border-radius:0 !important;

  background: #FFCDD2 !important;

}


 

How to Customize WordPress Login Button

To customize WordPress login button, use following codes in the custom-style.css


.login .button-primary {

  width: 120px;

  float:right;

  background: #F44336 !important;

  color: #ffffff;

  -webkit-border-radius: 4px;

  border: 1px solid #F44336;

  border-radius: 0;

}

.login .button-primary:hover {

  background-color:#F44336 !important;

  color: #fff;

  -webkit-border-radius: 4px;

  border: 1px solid #0d9ed9;

  border-radius: 0;

}

.login .button-primary:active {

  background-color:#F44336 !important;

  color: #fff;

  -webkit-border-radius: 4px;

  border: 1px solid #F44336;

  border-radius: 0;

}


 

How to Keep WordPress Login Form Remember me Checkbox Checked

You would want to keep remember me checkbox checked. To achieve this feature, go to functions.php and use following code there.


function login_checked_remember_me() {

  add_filter( 'login_footer', 'rememberme_checked' );

  }

  add_action( 'init', 'login_checked_remember_me' );


  function rememberme_checked() {

  echo "<script>document.getElementById('rememberme').checked = true;</script>";

  }

 

How to Customize WordPress Login Page Lost Password Option

As we know WordPress provide “Lost Your Password” option to reset the password. We can customize it too. Use following code.


.login #backtoblog a, .login #nav a{

    color:#fff;

}

.login #backtoblog a, .login #nav a:hover{

    color:#fff !important;
}


 

Hiding “Lost Your Password” is best practice to protect your website from hackers. Use following CSS code to keep hidden this option.


.login #backtoblog a, .login #nav a{

    color:#fff;

    display:none;

}


 

How to Hide WordPress Login Form

It’s always better to keep login form hidden to protect your website from hackers. Here is how you can hide WordPress login form. Use following code.


.login form{

  display:none;

}


 

Conclusion

I have used simplest way to change WordPress login page design. There are so many ways that you can use to make WordPress custom Login page such as making separate login-page.php and login-content.php within “login” folder. You can use plugins to customize WordPress login page as well. It’s all depends on your choice and comfort.

 

I hope this lesson how to change WordPress login page design without plugin will help you a lot. If you face any issue feel free to ask via comment form. And don’t forget to join us on Facebook, Twitter, and LinkedIn.