How to call or add password input / generate password / password strenght meter in custom registration form?

Question

You can add password input/ generate password / password strength meter in any custom registration form in admin area or front end area with simple code.

In first step:
Add this html code in your registration form

<table class="form-table">
  <tr id="password" class="user-pass1-wrap">
    <th><label for="pass1"><?php _e( 'New Password' ); ?></label></th>
    <td>
        <input class="hidden" value=" " /><!-- #24364 workaround -->
        <button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Generate Password' ); ?></button>
        <div class="wp-pwd hide-if-js">
            <span class="password-input-wrapper">
                <input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="off" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" aria-describedby="pass-strength-result" />
            </span>
            <button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
                <span class="dashicons dashicons-hidden"></span>
                <span class="text"><?php _e( 'Hide' ); ?></span>
            </button>
            <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
                <span class="text"><?php _e( 'Cancel' ); ?></span>
            </button>
            <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
        </div>
    </td>
  </tr>
  <tr class="user-pass2-wrap hide-if-js">
    <th scope="row"><label for="pass2"><?php _e( 'Repeat New Password' ); ?></label></th>
    <td>
    <input name="pass2" type="password" id="pass2" class="regular-text" value="" autocomplete="off" />
    <p class="description"><?php _e( 'Type your new password again.' ); ?></p>
    </td>
  </tr>
  <tr class="pw-weak">
    <th><?php _e( 'Confirm Password' ); ?></th>
    <td>
        <label>
            <input type="checkbox" name="pw_weak" class="pw-checkbox" />
            <span id="pw-weak-text-label"><?php _e( 'Confirm use of potentially weak password' ); ?></span>
        </label>
    </td>
  </tr>
</table>

<script type="text/javascript">
    if (window.location.hash == '#password') {
        document.getElementById('pass1').focus();
    }
</script>

After that just enqueue 2 script of wordpress users admin.

wp_enqueue_script( 'password-strength-meter' );
wp_enqueue_script( 'user-profile' );

If you put in admin area you can use this script

add_action( 'admin_enqueue_scripts', 'include_password_in_admin_page' );
function include_password_in_admin_page($hook){
    if ( 'your_screen_admin_page' != $hook ) {
       return;
    }
    wp_enqueue_script( 'password-strength-meter' );
    wp_enqueue_script( 'user-profile' );
}

if you will put this code in specific page with custom page template at frontend you can use this script

function enqueue_password_script(){
  wp_enqueue_script( 'password-strength-meter' );
  wp_enqueue_script( 'user-profile' );
}
add_action( 'template_redirect', 'include_password_in_specific_template_page' );
function include_password_in_specific_template_page(){
    $pageTemp = get_page_template_slug();
    $pageArray = array('page-specific.php');//add every page template you need to add password script
    if ( in_array($pageTemp, $pageArray) ) {
         add_action( 'wp_enqueue_scripts', 'enqueue_password_script');
    }
}

if you need standar wordpress style just add wp_enqueue_style('forms');

Related Posts: