WordPress Login Security Complete Customization

label_outlinechat_bubble_outline Comment

WordPress login security is an important part of protecting your WordPress site against brute force login attempts. This is part 3 of 3 on how to protect your WordPress login. In part 3 we are going to show you how to create redirects to completely keep people off of your wp-login.php page.

We have broken down this guide into 3 parts. We did this because each part can be implemented individually. Those that chose to use a plugin for Part 1 and Part 2 can easily implement part 3 in order to further enhance the experience of the user.

Lets get started:

First you need to access your themes funtions.php file. Edit this file and at the top, but within the php tags place the following:

add_action('login_redirect', 'redirect_login', 10, 3);
function redirect_login($redirect_to, $url, $user) {

$url = 'https://domain.tld/userlogin/';

if($user->errors['empty_password']){
    wp_redirect( $url . '?login=nopass');
}
else if($user->errors['empty_username']){
    wp_redirect( $url . '?login=nouser');
}
else if($user->errors['incorrect_password'] || $user->errors['invalid_username']){
    wp_redirect( $url . '?login=invalid');
}
else if(!empty($user->data)){
    wp_redirect( $url);
}
else{
    wp_redirect($url . '?login="nothing');
}
exit;
}

What we are doing here is using the login redirect feature which is normally used to re-direct logins once they are completed successfully. What most people don’t know is that a failed login attempt gets processed as if it was completed successfully as well. Instead of the user directive returning a user name it returns and error. We can then grab that error, return them to the originating URL, which should be your custom login page, and add a query string to the end so that we can display a message. If you’d like to redirect the user somewhere else upon successful login you can do so by replacing:

else if(!empty($user->data)){
    wp_redirect( $url);

with:

else if(!empty($user->data)){
    wp_redirect( 'domain.tld/thepageyouwantthemtogoto' );

We will now need to place some content into the page that has the custom login. At the top of the section that contains the content we’ll place the following:

<div class="show_nopass" style="display:none">
	 You failed to enter a password. Please retry by entering a valid password. Be warned that 5 invalid attempts will lock out your IP. <a href="https://domain.tld/password-recover/">Reset your password.</a>
</div>
<div class="show_nouser" style="display:none">
	 You failed to enter a username. Please retry by entering a valid username. Be warned that 5 invalid attempts will lock out your IP.
</div>
<div class="show_invalid" style="display:none">
	 The information you entered is incorrect. Please retry by entering a the correct information. Be warned that 5 invalid attempts will lock out your IP. <a href="https://domain.tld/password-recover/">Reset your password.</a>
</div>
<div class="show_nothing" style="display:none">
	 You must populate these fields. Please retry by entering a valid username and password. Be warned that 5 invalid attempts will lock out your IP.
</div>

Now if you followed along in Part 2 of this guide you’d place the above right after:

<?php } else { ?>

If you are applying this to some other type of login plugin or page you can place it directly in the page content using WP or via the theme template. You can also customize them however you’d like.

Now for a bit of CSS to make things look good:

div.show_nopass, div.show_nouser, div.show_invalid, div.show_nothing {background-color: #FFE9E9;border-color: #FBC4C4;color: #DE5959;border-style: solid;border-width: 1px;display: block;margin-bottom: 18px;padding: 20px 35px 20px 20px;position: relative;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);}

And lastly a bit of JS to make things magically appear. You can just plop this in your site’s JS file or you can create a new one. If you place this bit of code in its own file be sure to load it in the footer. There’s no need to load it in the head or enqueue it.

$(document).ready(function () {
  $("div.show_nopass").toggle(document.URL.indexOf("login=nopass") !== -1);
  $("div.show_nouser").toggle(document.URL.indexOf("login=nouser") !== -1);
  $("div.show_invalid").toggle(document.URL.indexOf("login=invalid") !== -1);
  $("div.show_nothing").toggle(document.URL.indexOf("login=nothing") !== -1);
  
});

That’s it, you have now taken those invalid login attempts and redirected them back to the page they came from instead of parking them on the wp-login.php page.

If you have followed all 3 parts of this guide then you have successfully made a complete work-around preventing anyone from ever seeing or using the default page and also blocked most malicious attempts as well.

A Brief Summary

Part 1 of this guide integrated WordPress failed login attempts with Fail2Ban and also explained why many methods and suggestions on how to do this can slow down your site by increasing CPU usage unnecessarily.

Part 2 of this guide showed you how to create custom login, password reset and registration forms that pass the results to wp-login.php. We prevent direct access to wp-login.php by redirecting all requests that aren’t POST’s and also by limiting access via User Agents.

Part 3 of the guide finishes everything off with a complete re-direct that prevents users from ever seeing the wp-login.php page and also displays an error message should the attempt be incorrect.

Why are we doing this?

As explained in Part 2, WordPress is one of the most commonly used CMS systems to date. The login page for all WordPress sites is the same, wp-login.php. This makes it extremely easy for hackers to target your website should you run WordPress. In addition, there’s no security measures in place the prevent bots or malicious scripts from attempting brute for login attempts on your website. By re-directing and nullifying attempts to access wp-login.php we have given those scripts something that they can’t access. Although scripts can use POST to access your wp-login.php page we’ve devised a rule set using Fail2Ban to thwart those efforts.

Did you know that with wp-login.php your screen shakes when someone gets a username or password incorrect? Did you know that WordPress will tell you which of these you got wrong while using wp-login.php? Hackers that are attempting to access your website whilst using the wp-login.php can easily tell if they got the username correct but not the password. Even if you hide the login failure message they’ll know by the shake. By taking these measures we’ve eliminated the shake and we’ve told both the username and password failures to return the same message and url query string. Therefore, there’s no way for the hacker to tell what went wrong.

Check out Part 1 of WordPress Login Security here.
Check out Part 2 of WordPress Login Security here.

Get Gravity Forms here (aff link).

If you’ve found this article helpful consider leaving a comment below!

From all of us at WireFlare we ask that you help others find the answers they are looking for. Please leave a comment or share this post!

About

Blog Bio Picture For Todd

I'm the President of WireFlare. I have a passion for creativity, online business and internet security. I strive to create a community that empowers people to be themselves. I'm an adventurist, fun loving and caring. Find me hiking in places most people don't dare to go!

Get a free consultation today!