0

I will share my knowledge how to add password input/ generate password / password strenght meter with default/standar wordpress password. If you like this information, please upvote my question and my answer.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.