Snippets / PHP
Add Password Visibility Toggle on Registration/Login
//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');
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');
}
});
});
.password-toggle {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.password-toggle img {
width: 20px;
height: auto;
}
Discussion 4
Ask a question or share how you used this.
Thank you very much! Works for Login but not for Registration and I can't get the icon on the right despite the CSS. Thanks
Corrected code: 1. Appearance > Theme Editor > functions.php //enable password at login 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'); 2. On the page you want this to appear, add an HTML widget and paste the code in there