How to add a Password Strength Meter in WordPress

What’s the simplest way to secure your user profile? You guessed it—set a strong password. Easy enough for your own profile, but what about the users on your website? How can you ensure they create secure passwords that keep your site safe from malicious attacks?

It’s a real problem: weak passwords can be an open door for hackers. And as a site owner, you need to make sure every user sets a strong password without making the registration process too complicated.

Here’s the good news: WordPress has a built-in feature called the “Password Strength Meter” that helps you do just that. Surprisingly, many people don’t know about it and end up using plugins or custom code. Let’s explore how you can easily enable this feature and make your website more secure.

Need help securing your site?

If setting up these features sounds daunting, our team at Wisdm Labs can assist you. We’ll help secure your website, so you can focus on growing your business. 

Contact us

The “Password Strength Meter” in 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!

Need expert assistance?

Setting up security features can be tricky. If you’d rather leave it to the pros, the experts at Wisdm Labs are just a message away. We’ll make sure your site is secure and running smoothly. 

Get Expert Help