How to enforce policies on custom password reset pages

You are here:

When you install the Password Policy Manager for WordPress, the strong password policies are enforced on your users via the login, user profile and password reset pages.

This works out of the box if you use the default WordPress login, password reset and other pages. It also works out of the box if you use custom login pages. However, if you use WooCommerce, or a plugin or theme that uses custom user profile and other pages, policies cannot be enforced unless you integrate the plugin.

This article explains how you can easily enforce strong password policies on your custom password reset and user profile pages.

The ppm_enable_custom_form hook

You can apply our handy password strength checker to any custom form, such as the password change form found in WooCommerce’s user account area with the ppm_enable_custom_form hook.

Although we can’t offer client-based validation due to how these front-end based systems pass the new password data to your sites database (it would not be feasible to universally account for the many nuances in each plugin) – we can help your users use passwords up to the standards you specify in our plugin by leveraging our power JavaScript based password strength checker.

See the example below, which you can add to your website’s plugin or functions.php file:

function example_ppm_enable_custom_form( $args ) {
$args = array(
'element' => '#confirm_user_password, #password, #password_1',
);
return $args;
}
add_filter( 'ppm_enable_custom_form', 'example_ppm_enable_custom_form' );

How can I use the hook?

If you’re not familiar with PHP code, please don’t let the above code daunt you. Let’s take a closer look to see what it’s doing and how we would customize it to suit my specific needs.

As you can see, the code itself is a simple function which is passed onto our plugin so our snazzy JS knows its needed, and where to target. So, let’s look at example_ppm_enable_custom_form and see what we need to change to suit.

The function only has one argument, which is this line: ‘element’ => ‘#confirm_user_password, #password, #password_1’,

This is where you provide the id/classes of the password inputs you want to apply our checker to. We will now detail how you would locate this class or ID in your page using your browser’s developer tools.

Where do I locate this ID or class?

In this example we are going to take a look at a popular plugin which you may wish to apply our check tool to, WooCommece.

To begin, head to your user’s account page. This will be the front-facing page your users go to to change account details such as their name, email address and more crucially, their passwords. Using a web browser such as Chrome, within that page, locate the “new password” fields, right click and select “Inspect”.

Right click the password field and select Inspect to see the element's code

You will see a panel in your browser – this is your page’s source. What you’re looking for here is 1st, ensure the field is the password field by checking it has the type=”password” attribute. Once you know it’s the field you want, locate the unique ID (or a unique class if your specific form does not have an id on this element). Let’s take a closer look at our example, WooCommerce, and what its html markup looks like.

The page's source code and the element

In this example we can determine this particular input has the id password_1. So we would add this to our custom functions ‘element’ argument, just like you can see in the example above. Have more than one password input you wish to use? No problem, using a comma separated list such as ‘#custom_id_1, .custom_pw_class, #another_id’ would be fine.