Search

How to add a Password Strength Meter in WordPress

Listen to this article

wordpress-website-security-blogWhat is the simplest way to secure your user profile?

You set a strong password. Right?!

All that’s well when it’s your own profile.

But how can you ensure, that a user who creates an account on your website has a strong and secure password? Will you request them to set a strong password? Or, will you not create an account until the password is strong enough?

You need to think about this.

There are malicious people all around you, who would like to gain access to your site. A user profile with a weak password is an opportunity for them to get their foot in the door.

How do you prevent all of this?

Well, it’s quite simple. You have to ensure that all user profiles have a strong password. (Ha! You knew that). On your WordPress website, when a new user tried to create an account, you have to ensure that the user sets a strong password.

So, how do you do this? Do you use a plugin? Or, do you add a custom functionality?

Well, the answer is…… either way.

But, what if I told you WordPress itself provides this functionality with its core setup!

Surprised?!!

So was I, when I first found it.

Most of us don’t know this, and we end up trying plugins and adding custom functionality to no end.

But where is it?

The functionality goes by the name of “Password Strength Meter“. It can be implemented on your registration page, where users register or even when users want to change their password.

[space]

The “Password Strength Meter” in WordPress

 

password-field-on-registration-form-wordpress

Now, although the functionality is provided by WordPress, it’s not something you would find in your dashboard. You need to follow a few steps to make it work.

So… How do you enable the Password Strength Meter?

You need to connect to your website using an FTP client. Under wp-admin->js you should be able to find a file called password-strength-meter.js. This is the file which sets the ball rolling.

This file needs to be enqueued. You can do this by hooking on to an appropriate action and adding the below line, in functions.php file of your theme (preferably child theme):

wp_enqueue_script( 'password-strength-meter' );

You need to enqueue this file on every page where the password strength meter has to be displayed. For this, you need to find the appropriate hooks. For example, say you need to display this on your BuddyPress registration page. Then you need to use the ‘bp_before_register_page’ action to enqueue my script. And for the usual WordPress registration page, you need to use the ‘register_form’ hook.

But merely enqueueing the JS file is not enough. The JS just provides us functions we would be using to check the password strength. You now need to add your own script, which will act as a mediator between your settings page and the password strength meter script.

Let’s add this script in password-strength-meter-mediator.js. You need to create it in your theme’s js folder, and enqueue it along with the password-strength-meter.js.

wp_enqueue_script( 'password-strength-meter-mediator', get_stylesheet_directory_uri() . '/js/password-strength-meter-mediator.js', array('password-strength-meter'));  

You can rename the file path form ‘/js/password_strength_meter_mediator.js’ to wherever your file is stored 🙂

Now, for the main part- the pièce de résistance- using the password-strength-meter.js functions to test the strength of the password.

Using the Password Strength Meter

Now, validating the password strength will return a status. To display this status, we need to add the below line of code where the password strength meter has to work (the registration page for example) and save it.

<span id="password-strength"></span>

Then, we need to add the below code in password_strength_meter_mediator.js. Let’s assume, you have two fields which input the password- signup_password (password field), and signup_password_confirm (confirm password field).

jQuery( document ).ready( function( $ ) {
// trigger the wdmChkPwdStrength
$( 'body' ).on( 'keyup', 'input[name=signup_password], input[name=signup_password_confirm]', function( event ) {
    wdmChkPwdStrength(
        // password field
        $('input[name=signup_password]'),
        // confirm password field
        $('input[name=signup_password_confirm]'),
        // strength status
        $('#password-strength'),
       // Submit button
       $('input[type=submit]'),
       // blacklisted words which should not be a part of the password
       ['admin', 'happy', 'hello', '1234']
    );
  });
});

We’re using the ‘keyup’ function on the password input fields to test the strength of the password.

The wdmChkPwdStrength is the function which will check the strength of the password entered. The parameters which we’ll be passing are:

  1. The password field id (you could use the field name instead)
  2. The confirm password field id
  3. The field id where the password strength status has to be displayed.
  4. The id of the form submit button
  5. A list of words which won’t be accepted as a part of the password
function wdmChkPwdStrength( $pwd,  $confirmPwd, $strengthStatus, $submitBtn, blacklistedWords ) {
    var pwd = $pwd.val();
    var confirmPwd = $confirmPwd.val();

    // extend the blacklisted words array with those from the site data
    blacklistedWords = blacklistedWords.concat( wp.passwordStrength.userInputBlacklist() )

    // every time a letter is typed, reset the submit button and the strength meter status
    // disable the submit button
    $submitBtn.attr( 'disabled', 'disabled' );
    $strengthStatus.removeClass( 'short bad good strong' );

    // calculate the password strength
    var pwdStrength = wp.passwordStrength.meter( pwd, blacklistedWords, confirmPwd );

    // check the password strength
}

The wp.passwordStrength.meter is a default function provided by WordPress present in password-strength-meter.js. It accepts the passwords and blacklisted words array and returns the strength of the password (2,3,4,5).

So, we need to extend the wdmChkPwdStrength function by checking the return value.

// check the password strength
switch ( pwdStrength ) {

    case 2:
    $strengthStatus.addClass( 'bad' ).html( pwsL10n.bad );
    break;

    case 3:
    $strengthStatus.addClass( 'good' ).html( pwsL10n.good );
    break;

    case 4:
    $strengthStatus.addClass( 'strong' ).html( pwsL10n.strong );
    break;

    case 5:
    $strengthStatus.addClass( 'short' ).html( pwsL10n.mismatch );
    break;

    default:
    $strengthStatus.addClass( 'short' ).html( pwsL10n.short );

}
// set the status of the submit button

Depending on the value of the strength result returned by the wp.passwordStrength.meter function, we need to take the appropriate action.

  1. If the pwdStrength value is 2: This implies the password is weak and will show “weak” as the output on the frontend and keep the submit button disabled
  2. If the pwdStrength value is 3: This indicates the password strength is better than weak but not as good and shows “medium” as the output on the frontend, keeping the submit button disabled
  3. If the pwdStrength value is 4: The password strong and hence “strong” is shown on the frontend and the submit button is enabled. A user can now create his account provided all other required fields are properly filled 😀
  4. If the pwdStrength value is 5: This means the password and confirm password do not match and the user has to correct it. The submit button remains disabled.
  5. By default: The submit button remains disabled.

The last and final piece of code you need to add, is to enable the submit button, if the password is strong and both fields match.

// set the status of the submit button
if ( 4 === pwdStrength && '' !== confirmPwd.trim() ) {
    $submitBtn.removeAttr( 'disabled' );
}

return pwdStrength;

If you’re okay with allowing a user with a medium strength password to create an account, you can change the above condition accordingly.

A word of caution: Do not change the value to 5 or else you will enable the submit button even if the passwords don’t match! 🙂

[space]

(Deep breath) Sigh!

That was a lot to take in wasn’t it?! Maybe. But once you start implementing it, I’m sure it won’t take you more than an hour if you follow the above steps! 🙂

So there it is. You’ll have just added a password strength functionality easily 😀

For those of you who have any doubts, the comment section is open. Ask away!

Nikhil Vichare

Nikhil Vichare

4 Responses

  1. Hi! Great tutorial.

    Can you tell me where I add the code you have supplied above?
    Does it all go in functions.php of my child theme?

    Thanks

    1. Yes Michael that’s right, the code will have to added to the functions.php file of your child theme.

    2. Only the 2 “wp_enqueue_script” go to the function.php file.
      The “” goes to the HTML, JS or wherever the form is located.
      The rest of the code goes to the password-strength-meter-mediator.js file.

      Thanks for this post. It works great.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads