Skip to content

Snippets / PHP

PHP JS CSS

Add Password Visibility Toggle on Registration/Login

D Donald McGuinn · 472 views · Updated 2 years ago
Add the ability to show the password on login and registration and any other "password" type inputs.
//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 · 7 lines
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 · 21 lines
.password-toggle {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}

.password-toggle img {
width: 20px;
height: auto;
}
CSS · 12 lines

Discussion 4

Ask a question or share how you used this.

Log in to join the discussion.
unidfr 1 year ago

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

adriiii 2 years ago

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

prestatop 2 years ago

Hi Donald ; I try to implement the snippet , but it doesnt work for me When I copy past your JS Code Snippet I get an unexpected error Could you help me to fix it Thank Nicolas

adriiii 2 years ago

check my comment. there's the corrected code

gabrielvb 2 years ago

does this go in the auth page?

Donald McGuinn 2 years ago

Best to add the JS site wide.

Voxel Guide assistant
Ask about snippets, addons & how-tos

Hey — how can I help?

I can dig through the library for snippets, addons, and tutorials.

AI can be wrong — double-check anything important.