Join the Voxel Guide Community!

Get Involved

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

Chat Toggle
Voxel Guide AI
Voxel Guide AI
Voxel Guide AI
Voxel Guide AI
Ask me anything about Voxel!
Send
Powered by AI24