Add Password Visibility Toggle on Registration/Login

Description/Instructions

Add the ability to show the password on login and registration and any other “password” type inputs.

If this snippet helped, feel free to buy me a taco :)

//enable password
function custom_enqueue_scripts() {
if (!is_admin()) { // Ensure it loads only on the front-end
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

  • PHP
Copy Code

jQuery(document).ready(function($) {
// Create eye icon element
var eyeIcon = $('

');

// Append eye icon to the password field's parent
$('input[type="password"]').each(function() {
$(this).parent().append(eyeIcon.clone());
});

// Toggle password visibility
$(document).on('click', '.password-toggle', function() {
var $pwd = $(this).siblings('input[type="password"]');
if ($pwd.attr('type') === 'password') {
$pwd.attr('type', 'text');
} else {
$pwd.attr('type', 'password');
}
});
});

  • JS
Copy Code

.password-toggle {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}

.password-toggle img {
width: 20px;
height: auto;
}

  • CSS
Copy Code

Let's Chat About this Snippet