Using The Included Password Strength Meter Script In WordPress

In WordPress, a very effective password strength script is used which indicates if the password that you have entered into the WordPress system, is not the same, or weak, medium or strong. It always checks the password strength while creating a WordPress account for the first time as a new user or even when you may have forgotten your password or just want to reset the Password to your admin.

I will try to achieve a few things from this post. I want to tell you how to use this particular password strength script of the WordPress in the forms that you have in your site.

The Password Strength Script

At this point, to achieve this, we will need to go a little further in the WordPress system to find what we need, the strength meter script. It is located inside the WordPress at:

1

wp-admin/js/password-strength-meter.js

You remember we open up the template of the theme that we want to edit in our child theme directory, after copying it from the parent theme directory? We are going to open functions.php in the child theme directory:

1

wp_enqueue_script('password-strength-meter');

What is in the Script?

If you think the script will do everything for us and the job is done after locating them, then you are mistaken. The purpose of the script is that it leaves us with two JavaScript functions. The first of them being the basic function that we are going to use:

1

wp.passwordStrength.meter(password1,blacklist,password2).

This one looks at two strings and then comes up with the strength of them individually as a number varying from 1 till 5. 1 indicating that it is weak, and 5 indicating that it’s strong. Not only this, this script will further use a list of blacklisted words and make them as weak words.

The second function produces a list of words that are supposed to be weak words in the passwords. This function looks like:

1

wp.passwordStrength.userInputBlacklist().

It combines these words found in the URL, or site’s title or even the tagline and then the compilation takes place. Not only that, it also checks for the certain kind of input and adds the ones found in the current page to the list being complied.

While measuring of the strength of the password could be possible by the two functions above, the script does not allow for a result which we would be able to display, hence we will have to take the route of creating a function ourselves, to create it.

Our Strength Meter Form

1

2

3

4

5

6

<form>

<input type="password"name="password"/>

<input type="password"name="password_retyped"/>

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

<input type="submit"disabled="disabled"value="Submit"/>

</form>

In the function above, let’s take this as our first step in implementing the strength meter function. And the first, form part as the mere starting. Names and ids will also be a part from above in the function that we will build. There are really three things that we are looking for to happen once the function is created.

a) We would be able to check the strength of the password as in, when something is typed in the password field.

b) We would be able to display the password strength in a same fashion as that of the WordPress

c) We would also put a submit clickable button if the password is strong enough

Our Strength Meter Function

There is a long jQuery function which we will use to make that happen. The different parts in the function will be discussed in detail a little later.

Arguments and Resetting form

The function will carry all the information from all the places that we will needing or changing. The jQuery function objects will be having a $ sign before them which will make them stand apart and differentiate them from the rest of JavaScript functions, hence making it so much easier to spot from the crowd.

1

2

3

4

5

6

varpass1=$pass1.val();

varpass2=$pass2.val();

// Reset the form & meter

$submitButton.attr('disabled','disabled');

$strengthResult.removeClass('short bad good strong');

You can actually see from the first few lines that it is quite easy and simple. Basically, it’s just that what you are thinking, which is getting the passwords and then resetting the form. Always remember to disable the form in the beginning and enabling them once a good and strong set of password with a good score is received.

Not only that, we will also be adding styles to the strength meter, so that it gives and displays different class of names based on the score of the password. For the beginning, we are just going to delete the style.

The Blacklist Array

Usually, the blacklist array of the script’s meter is enough and therefore fine, however, you may want to add additional items in it. In any case, our function has the capability to cater to both the categories. Here is a glimpse of what the function looks like:

In either case, both of them are merged at this point to be entered into the meter function.

Calling the meter function

1

2

// Get the password strength

varstrength=wp.passwordStrength.meter(pass1,blacklistArray,pass2);

We will have to call the meter function to let us know about how strong the password is, its strength score. Once that is known, it will be decided based on that information how to treat the result.

Displaying the Meter Results

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// Add the strength meter results

switch(strength){

case2:

$strengthResult.addClass('bad').html(pwsL10n.bad);

break;

case3:

$strengthResult.addClass('good').htm1(pwsL10n.good);

break;

case4:

$strengthResult.addClass('strong').html(pwsL10n.strong);

break;

case5:

$strengthResult.addClass('short').html(pwsL10n.mismatch);

break;

default:

$strengthResult.addClass('short').html(pwsL10n.short);

}

As you might be aware, we already have the strength core. Now we only are left to display it.

pwsL10n

Right above us is JavaScript object which is given by the WordPress in which the labels for every strength core is included. Just under the password field, we will display the label inside the following:

<span>

With every label, we will also allocate a style class to that label.

Enabling the Submit Button

1

2

3

4

5

6

// The meter function returns a result even if pass2 is empty,

// enable only the submit button if the password is strong and

// both passwords are filled up

if(4===strength&&"!==pass2.trim()){

$submitButton.removeAttr('disabled');

}

As pretty clear from the results of the function above, the end part of the function is the part devoted to enabling the button for submit, based on having a strong password only.

Triggering on Keyup

1

2

3

4

5

6

7

8

9

10

11

12

13

jQuery(document).ready(function($){

$('body').on('keyup','input[name=password1], input[name=password2]',

function(event){

checkPasswordStrength(

$('input[name=password]'),// First password field

$('input[name=password_retyped]'),// Second password field

$('password-strength'),// Strength meter

$('input[type=submit]'),// Submit button

['black','listed','word']// Blacklisted words

);

}

);

});

We don’t always need a password checker, we only need it for new users or in situations when the password is reset by the user either because he may have forgotten it or he just wants to reset it because of the privacy issues. Nonetheless, we need a trigger for situations like these in which the password strength meter check is run. We simply bind up a handler to the ‘keyup’ events to the password fields. This will ensure that the whenever such keyup event will arise, and that too before the password field, it will automatically signal the password strength checker and it will show up.

Changing the Strength Labels

WordPress loads the strength checker and its labels under the following object:

pwsL10n

In order to change the labels, and also to localize it, you will just have to make the script localized in functions.php after the following:

1

wp_enqueue_script

The following has been extracted when the script has been localized in the functions.php:

1

2

3

4

5

6

7

8

wp_localize_script('password-strength-meter','pwsL10n',array(

'empty'=>__('Strength indicator'),

'short'=>__('Very weak'),

'bad'=>__('Weak'),

'good'=>_x('Medium','password strength'),

'strong'=>__('Strong'),

'mismatch'=>__('Mismatch')

));

Conclusion

We learnt how to make the changes in the password strength scripts that comes with the WordPress. Not only that, in this article we also saw how to make it accept only the strong passwords, how to make changes in the styles of these scripts, etc.

Zainab is a telecommunication engineer from Islamabad, Pakistan having a flair for writing. She loves to read and write on technology and is blogging for years. Among her other favorite past times are photography, crafting, and reading.

Comments (4)

A note that there is a slight error in the code:
$( ‘body’ ).on( ‘keyup’, ‘input[name=password1], input[name=password2]’,
should be
$( ‘body’ ).on( ‘keyup’, ‘input[name=password], input[name=password_retyped]’,

Great tutorial, thanks. As Dan Smart says there is a small error in the code but great otherwise.

I am building a front end registration form using this method, however, using a browser’s inspector tools all a user has to do is delete the ‘disabled’ attribute from the submit button and they are free to submit a weak password.

To make it slightly harder for users to submit I have created a hidden input…

At the top of your javascript, outside the function I have declared a global variable
var pass_strength = 0;

Then in the strength meter results overwrite the function for each case, changing the result to ‘1’ when the password is strong enough.