using the included password strength meter script in wordpress - tuts+ code article

Learning to code? Skill up faster with our practical video courses. Start your free trial today. Dismiss

Jobs BlogFree Tutorials Courses eBooks Create Account / Sign In

Code Categories Learning Guides

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

CREATIVE CODING

by Benjamin Intal 12 Mar 2014 3 Comments

48 96 6

Using the Included Password Strength Meter Script in WordPress - Tut... http://code.tutsplus.com/articles/using-the-included-password-strength...

1 of 12 02/10/2014 10:43

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 :

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 as a starting point in implementing the strength meter

function:

1 wp_enqueue_script( 'password-strength-meter' );

1

2

3

4

5

6


2 of 12 02/10/2014 10:43

We will be using the field names and ids from above in the function that we'll

create.

These are the goals that we want to achieve when we're done:

When a something is typed in our password fields, we check the strength of

the password,

1.

We then display the strength results below the password fields similar to how

WordPress does it,

2.

Finally, we enable the submit button if the password is considered strong.3.

Our Strength Meter Function

Let me first show you the finished jQuery function that we'll be using. I'll explain each

part in detail afterwards:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

function checkPasswordStrength( $pass1,

$pass2,

$strengthResult,

$submitButton,

blacklistArray ) {

var pass1 = $pass1.val();


// Reset the form & meter

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

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

// Extend our blacklist array with those from the inputs & site data

blacklistArray = blacklistArray.concat( wp.passwordStrength.userInputBlacklist

// Get the password strength

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

// Add the strength meter results

switch ( strength ) {

case 2:

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

break;

case 3:

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

break;

case 4:

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


3 of 12 02/10/2014 10:43

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.

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

break;

case 5:

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

break;

default:

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

}

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

}

return strength;

}

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

// Binding to trigger checkPasswordStrength

$( '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

);

}

);

});

1

2

3

4

5

6



// Reset the form & meter

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

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


4 of 12 02/10/2014 10:43

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.

3. Calling the meter Function

Now we call the meter function to get the strength score of the password. Next we

will decide what to do with the result.

4. Displaying the Meter Results

1

2

// Extend our blacklist array with those from the inputs & site data

blacklistArray = blacklistArray.concat( wp.passwordStrength.userInputBlacklist() );

1

2

// Get the password strength

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

01

02

03

04

05

06

07

08

09

10

11

12

// Add the strength meter results

switch ( strength ) {

case 2:

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

break;

case 3:

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

break;

case 4:


5 of 12 02/10/2014 10:43

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 just below the password fields, we're

also assigning the corresponding style class to the label.

5. Enabling the Submit Button

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

password.

6. Triggering on Keyup

13

14

15

16

17

18

19

20

21

22

23


break;

case 5:

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

break;

default:

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

}

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

}

01

02

03

04

05

06

07

08

09

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

);

}

);

});


6 of 12 02/10/2014 10:43

Lastly, we need a way to trigger when to run our password strength meter checker.

We do this by binding a handler to the keyup events to the password fields.

We're done!

Advertisement

Changing the Strength Labels

The labels for the strength meter are loaded up by WordPress under the object

pwsL10n .

To change and override these labels, you would have to localize the script after our

wp_enqueue_script in functions.php :

You can read more about passing localized strings to JavaScript in the article: How to

Pass PHP Data and Strings to JavaScript

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' )

) );


7 of 12 02/10/2014 10:43

Suggested Tuts+ Course

Related Tutorials

Advertisement

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!

Categories:

Creative Coding

WordPress

Translations Available:

Tuts+ tutorials are translated by our community

members. If you'd like to translate this post into

another language, let us know!

About Benjamin Intal

Benjamin is a designer and WordPress

developer from the Philippines who loves

creating WordPress themes for

Guide to Your First WordPressFramework

$15

Creating a Custom WordPress

Registration Form Plugin


8 of 12 02/10/2014 10:43

+ Expand Bio

Framework, and runs a small start up named

Gambit which specializes in WordPress

development.

Code

Quick Tip: Changing the Password

Protected Text in WordPress

Code

Accessing External APIs Using

AngularJS's Services

Code


9 of 12 02/10/2014 10:43

3 Comments

Dan Smart

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]',

Ryan S

I've been thinking above too, where the hell those name came from? :D

Dan Bahrami

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

browsers 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.

case 4:


pass_strength = 1;

break;

And finally in the document ready function at the bottom we add an extra function to

change the value of the hidden input on submit...

$('#registration-form').submit(function() {

$('input[name=password_strength]').val(pass_strength);

});


10 of 12 02/10/2014 10:43

18,353 Tutorials 411 Video Courses

Custom digital services like logo design, WordPress installation, video

production and more.

Check out Envato Studio

Add more features to your website such as user profiles, payment

gateways, image galleries and more.

Browse WordPress Plugins

Advertisement

Teaching skills to millions worldwide.

Follow Us

Help and Support

FAQ

Terms of Use

Contact Support

About Tuts+

Advertise

Write for Us

Email Newsletters

Subscribe to receive inspiration, ideas,

and news in your inbox.

Subscribe

Privacy Policy


11 of 12 02/10/2014 10:43

2014 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.


12 of 12 02/10/2014 10:43

using the included password strength meter script in wordpress - tuts+ code article

Documents

script passwordstrength

strength ofthe password

strength of passwords

strength results

strength meter formlets

strength meter functionlet

strength meterfunction

script doesnt