How to Customize WordPress Login Page

Customize WordPress Login page is very important because all of our users will be logged through this webpage. So sometimes we want to change its interface for some different reasons: security, branding, design.

One of the best things about WordPress is customizability so let customize our WordPress login.

First let customize WordPress login for security reason with the installation of some plugin like:

Login Security Solution Plugin

The feature the plugin offer are:

Blocks brute force and dictionary attacks without inconveniencing legitimate users or administrators
- Tracks IP addresses, usernames, and passwords
- Monitors logins made by form submissions, XML-RPC requests and auth cookies
- If a login failure uses data matching a past failure, the plugin slows down response times. The more failures, the longer the delay. This limits attackers ability to effectively probe your site, so they’ll give up and go find an easier target.
- If an account seems breached, the “user” is immediately logged out and forced to use WordPress’ password reset utility. This prevents any damage from being done and verifies the user’s identity. But if the user is coming in from an IP address they have used in the past, an email is sent to the user making sure it was them logging in. All without intervention by an administrator.
- Can notify the administrator of attacks and breaches
- Supports IPv6
Thoroughly examines and enforces password strength. Includes full UTF-8 character set support if PHP’s mbstring extension is enabled. The tests have caught every password dictionary entry I’ve tried.
- Minimum length (customizable)
- Doesn’t match blog info
- Doesn’t match user data
- Must either have numbers, punctuation, upper and lower case characters or be very long. Note: alphabets with only one case (e.g. Arabic, Hebrew, etc.) are automatically exempted from the upper/lower case requirement.
- Non-sequential codepoints
- Non-sequential keystrokes (custom sequence files can be added)
- Not in the password dictionary files you’ve provided (if any)
- Decodes “leet” speak
- The password/phrase is not found by the dict dictionary program (if available)
Blocks discovering user names via the “?author=” query string
Password aging (optional) (not recommended)
- Users need to change password every x days (customizable)
- Grace period for picking a new password (customizable)
- Remembers old passwords (quantity is customizable)
Administrators can require all users to change their passwords
- Done via a flag in each user’s database entry
- No mail is sent, keeping your server off of spam lists
Logs out idle sessions (optional) (idle time is customizable)
Maintenance mode (optional)
- Publicly viewable content remains visible
- Disables logins by all users, except administrators
- Logs out existing sessions, except administrators
- Disables posting of comments
- Useful for maintenance or emergency reasons
- This is separate from WordPress’ maintenance mode
Prevents information disclosures from failed logins

This plugin is very useful with all these features. You can make all these fixes directly through the WordPress Dashboard and Plugin Options.

Customize Design of Login WordPress Page

There are some other customizations that can be done to the WordPress login to add an extra layer of security for example you can rename the wp-login.php file to myprivatelogin. This customization can be done also for branding purposes.

First, you have to create a .htaccess file into the root folder of the WordPress installation and into this file let write these lines:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^myprivatelogin$ wp-login.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

To complete the renaming you have to add this function to functions.php file:

add_filter('site_url',  'login_filter', 10, 3);
function login_filter( $url, $path, $orig_scheme )
{
 $old  = array( "/(wp-login\.php)/");
 $new  = array( "myprivatelogin");
 return preg_replace( $old, $new, $url, 1);
}

This code will replace all the links with wp-login.php in database to myprivatelogin.

Let change the appearance of the WordPress login page:

Create myprivatelogin folder into WordPress folder
Into the the previous folder create and myprivatelogin.css file
Now lets load this css file to WordPress theme by adding the following function to functions.php file:

function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/myprivatelogin/myprivatelogin.css" />';
}
add_action('login_head', 'custom_login');

In that way you can use myprivatelogin.css file as an normal style css file where you can customize any part of WordPress login page with this respective classes:

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Ok, if you want to replace the logo of the WordPress add this css line into myprivatelogin.css file:

body.login div#login h1 a {
  background-image: url('mylogo.png');
}

This is another customization of username and password fields:

 .login input[type="text"]{
 padding: 10px;
  border: solid 1px #dcdcdc;
  transition: box-shadow 0.3s, border 0.3s;
}

.login input[type="password"]{
  padding: 10px;
  border: solid 1px #dcdcdc;
  transition: box-shadow 0.3s, border 0.3s;
}

.login input[type="text"]:focus{
   border: solid 1px #707070;
  box-shadow: 0 0 5px 1px #969696;
}

.login input[type="password"]:focus{
   border: solid 1px #707070;
  box-shadow: 0 0 5px 1px #969696;
}

The style of the inputs will be:

Now let remove the “Remember me” option from the login page:

body.login div#login form#loginform p.forgetmenot input#rememberme {display:none}

Replace the background of WordPress login page:

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

Another way to customize not only login but the whole WordPress by hiding its to use : Hide My WP