Add Sexy, Secure Password Visualization To Your WordPress Site

Add Sexy, Secure Password Visualization To Your WordPress Site

We all want to make our WordPress passwords more secure but in doing so we invariably make them longer and given that we can’t seem them when we type them in, harder to get right first time.

Adding a chroma-hash to your WordPress password entry fields, a sort of short colorful barcode, will give you and your site’s users a visual clue that they’ve got their password right.

No more having to having to hit enter and hope.

WordPress login form with chroma-hash showing on a completed password field
Instant visual feedback on your password

The chroma-hash is neat idea. With our passwords being obscured by *’s as we type them in, there’s no real way of knowing if we’ve got it right or not until we hit enter. The longer the password, the greater the chance of messing up.

So, chroma-hash converts your input, as you type, into a small set of colored bars. This is really useful on single password forms (if you recognize the chroma-hash then you know you’ve got the password right) but even better on those password / confirm password forms where you can tell in an instant whether you’ve entered the same password twice.

The jQuery plugin is the brainchild of Matt Thompson and to implement it on a WordPress site, all we need to do is wrap it up in a small plugin to enqueue both the plugin script and some initialization script into our WordPress pages.

Simply download the plugin, install it in your WordPress site and activate it to have chroma-hashing on your password fields in the main site, the admin interface and in the login screen.

If you want to see the jQuery plugin in action, visit Matt’s demo.

How The WordPress Plugin Works

Of course, all the smarts are contained in Matt’s jQuery plugin and all this WordPress plugin does is ensure that the scripts are added to the site’s output.

This achieved via the standard approach of using the wp_enqueue_script function but it actually needs to be added to 3 different actions:

  1. wp_enqueue_scripts : for front-end (public)
  2. admin_enqueue_scripts : for the admin interface (useful for the password fields on the profile page)
  3. login_enqueue_scripts : for the login pages

The initialization script itself simply attaches the chromaHash function to any input element that has a type of password:


// number of bars displayed (1,2,3, or 4)
var ch_bars = 3;

// value to be appended when calculating hash function
var ch_salt = '7be82b35cb0199120eea35a4507c9acf';

// minimum number of characters needed for grayscale bars to be displayed in color
var ch_minimum = 6;

$("input:password").chromaHash({bars: ch_bars, salt: ch_salt, minimum: ch_minimum});


Matt’s claim that his plugin is “sexy” is certainly debatable. But there’s no denying it’s useful.