WordPress – Customize the WordPress Login Page

 

What We’ll Be Creating

Before we get started, here’s a look at the finished product:

 

Customizing the WordPress Login Page

This tutorial will cover several modifications to theme files that will allow you to create your own personalized login page:

  1. Add a custom background
  2. Replace the WordPress logo with a custom logo
  3. Customize the look of the login form
  4. Change the login logo URL
  5. Remove the lost password link
  6. Remove the “Back to” link
  7. Hide the login error message
  8. Remove the login page shake
  9. Change the redirect URL
  10. Set “Remember Me” to checked

Here’s what you need to do:

  1. In your current theme’s folder, create a new folder called “login
  2. In the /login folder, create a new .txt file and name it custom-login-styles.css
  3. Next, we’ll need to tell WordPress to load this CSS file, so open up your theme’s functions.php file and add the following code:
function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-styles.css" />';
}

Add a Custom Background

We can achieve this by adding the following to our custom-login-styles.css file:

body.login {
background-image: url('home-bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
 }

Now i want provide example of my CSS file “custom-login-styles.css” you can copy all and past to your file but change your “jpg” path.

body.login {
  background-image: url('/wp-content/themes/mywiki/login/ferrary.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.login h1 a {
  background-image: url('/wp-content/themes/mywiki/login/it.png');
}

.login label {
  font-size: 12px;
  color: #555555;
}

p#nav {
  display: none;
}

p#backtoblog {
  display: none;
}


.login input[type="text"]{
  background-color: #ffffff;
  border-color:#dddddd;
  -webkit-border-radius: 4px;
}

.login input[type="password"]{
  background-color: #ffffff;
  border-color:#dddddd;
  -webkit-border-radius: 4px;
}

.login .button-primary {
  width: 120px;
  float:right;
  background-color:#17a8e3 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#17a8e3));
  background: -webkit-linear-gradient(top, #17a8e3, #17a8e3);
  background: -moz-linear-gradient(top, #17a8e3, #17a8e3);
  background: -ms-linear-gradient(top, #17a8e3, #17a8e3);
  background: -o-linear-gradient(top, #17a8e3, #17a8e3);
  background-image: -ms-linear-gradient(top, #17a8e3 0%, #17a8e3 100%);
  color: #ffffff;
  -webkit-border-radius: 4px;
  border: 1px solid #0d9ed9;
}

.login .button-primary:hover {
  background-color:#17a8e3 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#0d9ed9 ));
  background: -webkit-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -moz-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -ms-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -o-linear-gradient(top, #17a8e3, #0d9ed9 );
  background-image: -ms-linear-gradient(top, #0b436e 0%, #0d9ed9 100%);
  color: #fff;
  -webkit-border-radius: 4px;
  border: 1px solid #0d9ed9;
}

.login .button-primary:active {
  background-color:#17a8e3 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#0d9ed9), to(#17a8e3));
  background: -webkit-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -moz-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -ms-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -o-linear-gradient(top, #0d9ed9, #17a8e3);
  background-image: -ms-linear-gradient(top, #0d9ed9 0%, #17a8e3 100%);
  color: #fff;
  -webkit-border-radius: 4px;
  border: 1px solid #0d9ed9;
}

Make sure you replace the file name in line 2 with the name of your own image file.

Replace the WordPress Logo With a Custom Logo

The WordPress Codex provides a tidy explanation for how to replace the logo, but since we’ve already created a CSS file we can just add the following to that file:

.login h1 a {
 background-image: url('login-logo.png');
 }

Save the logo you want to use in your /login folder where your custom-login-styles.css file is also stored.

Customize the Look of the Login Form

First, we’ll style the labels to make the text darker, and the form input boxes to give them a more rounded look:

 .login label {
 font-size: 12px;
 color: #555555;
 }.login input[type="text"]{
 background-color: #ffffff;
 border-color:#dddddd;
 -webkit-border-radius: 4px;
 }.login input[type="password"]{
 background-color: #ffffff;
 border-color:#dddddd;
 -webkit-border-radius: 4px;
}

 

 

Next, we’ll style the button to make it a lighter shade of blue:

.login .button-primary {
  width: 120px;
  float:right;
  background-color:#17a8e3 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#17a8e3));
  background: -webkit-linear-gradient(top, #17a8e3, #17a8e3);
  background: -moz-linear-gradient(top, #17a8e3, #17a8e3);
  background: -ms-linear-gradient(top, #17a8e3, #17a8e3);
  background: -o-linear-gradient(top, #17a8e3, #17a8e3);
  background-image: -ms-linear-gradient(top, #17a8e3 0%, #17a8e3 100%);
  color: #ffffff;
  -webkit-border-radius: 4px;
  border: 1px solid #0d9ed9;
  }
   
  .login .button-primary:hover {
  background-color:#17a8e3 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#0d9ed9 ));
  background: -webkit-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -moz-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -ms-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -o-linear-gradient(top, #17a8e3, #0d9ed9 );
  background-image: -ms-linear-gradient(top, #0b436e 0%, #0d9ed9 100%);
  color: #fff;
  -webkit-border-radius: 4px;
  border: 1px solid #0d9ed9;
  }
   
  .login .button-primary:active {
  background-color:#17a8e3 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#0d9ed9), to(#17a8e3));
  background: -webkit-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -moz-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -ms-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -o-linear-gradient(top, #0d9ed9, #17a8e3);
  background-image: -ms-linear-gradient(top, #0d9ed9 0%, #17a8e3 100%);
  color: #fff;
  -webkit-border-radius: 4px;
  border: 1px solid #0d9ed9;
  }
 

Change the Login Logo URL

By default, the logo links to wordpress.org. You can change this to point to your own site by adding this code to your functions.php file:

function my_login_logo_url() {
  return get_bloginfo( 'url' );
  }
  add_filter( 'login_headerurl', 'my_login_logo_url' );
   
  function my_login_logo_url_title() {
  return 'Your Site Name and Info';
  }
  add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Replace “Your Site Name ” in line 7 with the name of your site. This is simply ALT text for the logo.

Remove the Lost Password Link

To remove the link, add this to your CSS file:

Remove the “Back to” Link

The “Back to…” link lets users return to the homepage of your site. I’m going for a clean look and don’t want to display the text under my form. To remove it, add the following to your CSS file:

Hide the Login Error Message

When you enter an incorrect username or password, the login page returns an error message telling you which details you got wrong. If your username is correct but password is wrong, it will say your password was wrong. If you typed the wrong username, it says “Invalid Username.” While the message may be helpful for you, the problem is that hackers can use this information to guess your login credentials and gain access to your website.

The easiest way around this is to change the error message with this code in your functions.php file:

function login_error_override()
{
return 'Incorrect login details.';
}
add_filter('login_errors', 'login_error_override');

Simply update line 3 to change the error message.

Remove the Login Page Shake

When you enter an incorrect username or password, the login form shakes to alert the user they need to try again.

I don’t really mind this feature, but some people find it annoying. To remove the shake, add this snippet to your functions.php file:

function my_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'my_login_head');

Change the Redirect URL

When you login to WordPress you’re immediately taken to the dashboard. You can easily change this to redirect users to your homepage instead.

Add the following code to your functions.php file so that all users other than admin are automatically redirected:

function admin_login_redirect( $redirect_to, $request, $user )
  {
  global $user;
  if( isset( $user->roles ) && is_array( $user->roles ) ) {
  if( in_array( "administrator", $user->roles ) ) {
  return $redirect_to;
  } else {
  return home_url();
  }
  }
  else
  {
  return $redirect_to;
  }
  }
  add_filter("login_redirect", "admin_login_redirect", 10, 3);
 

Set “Remember Me” To Checked

The “Remember Me” checkbox is unchecked by default. I like to check this when I login, but sometimes I forget, only to realize afterwards that I forgot and it’s too late. Doh!

To leave this box always checked, add this snippet to functions.php:

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>";
  }
 

That All

This wonderful article was found on this site https://premium.wpmudev.org/blog/customize-login-page/