Using the Included Password Strength Meter Script in WordPress

WordPress uses a pretty nifty password strength script that is used to display whether the passwords you entered in the WordPress admin are: not the same, very weak, weak, medium or strong. Currently this script is only used when creating creating new users and when changing your password in your admin.

In this article, I will be teaching you on how to use the WordPress' password strength meter in your own forms.

The Password Strength Script

The strength meter script is undocumented at the time of this article, so using it requires a little digging into WordPress core. The actual script is located inside the WordPress at wp-admin/js/password-strength-meter.js. You can check it out to learn more about how the script works.

The first thing we need to do is to include this script by enqueuing it in our functions.php:

wp_enqueue_script( 'password-strength-meter' );

What's in the Script?

The script alone doesn't do everything for us. It just gives us these two JavaScript functions:

wp.passwordStrength.meter( password1, blacklist, password2 ).This one is the main function that we'll use. It analyzes two given strings, then gives out the strength of these two as a number from 1-5, 1 being the weakest and 5 being the strongest. It also takes an array of blacklisted words which will be considered during the computation as weak words.

wp.passwordStrength.userInputBlacklist().This function creates an array of words that should be considered as weak words in passwords. This function compiles strings found in your site's title, tagline and URL. It also checks for certain input fields in the current page, then adds those to the list.

We can already measure the strength of passwords with just these functions above. However, there's more to it. The script doesn't give us a results that we can display. We will have to build a function of our own to do this.

Our Strength Meter Form

Let's take this <form> as a starting point in implementing the strength meter function:

1. Arguments & Resetting the Form

I made the function take in all the objects that we will modify or need information from. I prefixed all of the jQuery objects with a $ to make it easier to identify them from the normal JavaScript objects.

These first few lines are plain and simple, we get the passwords then we reset our form. We make the form always disabled at the start so that we can just enable later, after we get a good strength score.

We're also going to add styles to our strength meter by giving it class names depending on the score of the password later, for the start of the function, we're going to clear the style of the meter.

2. The Blacklist Array

The strength meter script's blacklisted words normally should be okay. But just incase you want to add more, our function can accept additional words. Both of these are merged here to be inputted to the meter function.

Now that we have the strength score, this is the part where we display it. WordPress gives us the JavaScript object pwsL10n that holds the labels for each strength score. We display the label inside the <span> just below the password fields, we're also assigning the corresponding style class to the label.

5. Enabling the Submit Button

// 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' );
}

The end of the function is for enabling our submit button only if we have a strong password.

Conclusion

In this article, we learned how to use the password strength script that's included with WordPress. This can be used in your custom registration forms and front-end profile pages for your website members.

I hope you enjoyed this article. I highly appreciate any feedback, comments and suggestions.

Let me know if you have found a cool way to use the password strength meter. Share your thoughts below!