How to Customize WordPress Login Page with/without a Plugin

WordPress Login its 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 of WordPress is customizability so let customize our WordPress login.

First let customize WordPress login for security reason with 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 its very useful with all this features. You can make all this fixes directly through WordPress Dashboard and Plugin Options.

Customize Design of Login WordPress Page

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

First you have to create an .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:

1. Create myprivatelogin folder into WordPress folder
2.  Into the the previous folder create and myprivatelogin.css file
3. 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 an 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 “Remember me” option from 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

Let us know about some other customization or plugins that you have tested through comments.

Have a nice day!