Skip to main content

In the world of online learning, user experience plays a critical role in ensuring that learners have seamless access to their courses. If you’re using a WordPress LMS with the Theme My Login plugin to create a custom frontend login experience, adding a simple show/hide password toggle can greatly improve usability. This feature allows users to verify their password input before submitting, reducing login errors and frustration.

In this article, we’ll walk you through the process of adding a show/hide password toggle to your WordPress login screen and provide you with the necessary code to implement it.

Why Add a Show/Hide Password Feature?

By default, password fields obscure the text for security reasons. However, in certain cases—such as mobile logins where mistyped passwords are common—users may want the option to reveal their password temporarily. This feature is especially useful for LMS learners who frequently log in and need to ensure their credentials are entered correctly.

Our solution will add a small eye icon inside the password field. When clicked, it toggles between showing and hiding the entered password.

Implementing the Show/Hide Password Feature

To achieve this, we’ll add a small snippet to your functions.php file and include a JavaScript file inside your theme folder.

Step 1: Add the Code to functions.php

Add the following function to your theme’s functions.php file. This code enqueues the required JavaScript and Font Awesome icons and injects a small script to add the toggle icon next to the password field:

function my_enqueue_script_showhide_pwd() {
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), null, true);
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');

// Inline script to add the eye icon
$script = "
jQuery(document).ready(function($) {
$('<span toggle=\"#user_pass\" class=\"fa fa-fw fa-eye field-icon toggle-password\"></span>').insertAfter('#user_pass');
});
";
wp_add_inline_script('custom-js', $script);

// Inline CSS to position the icon
$css = "
.tml-field-wrap {
position: relative;
align-items: center;
}

.tml-field {
flex-grow: 1;
}

.toggle-password {
position: absolute;
cursor: pointer;
right: 10px;
top: 55px;
}
";
wp_add_inline_style('font-awesome', $css);
}
add_action('wp_enqueue_scripts', 'my_enqueue_script_showhide_pwd');

Step 2: Add JavaScript to Your Theme Folder

Inside your theme’s js folder, create a file named custom.js and add the following JavaScript code:

jQuery(document).ready(function($) {
$('body').on('click', '.toggle-password', function() {
var input = $($(this).attr('toggle'));
if (input.attr('type') == 'password') {
input.attr('type', 'text');
$(this).addClass('fa-eye-slash').removeClass('fa-eye');
} else {
input.attr('type', 'password');
$(this).removeClass('fa-eye-slash').addClass('fa-eye');
}
});
});

This script ensures that when the eye icon is clicked, the password field toggles between visible and hidden states, updating the icon accordingly.

Visual Demonstration

To illustrate the functionality, here are some example screenshots:

  1. Default Login Screen – The username and password box displaying the eye icon.
  2. Login Attempt with Hidden Password – The password remains hashed as it is typed.
  3. Revealing the Password – Clicking the eye icon shows the entered password.
  4. Google reCAPTCHA Integration – Demonstrating that reCAPTCHA can be included alongside this feature.

 

Some Further Enhancements and Considerations:

    • Security: While revealing a password can be convenient, users should be reminded not to use this feature in public spaces.
    • Styling: Adjust the positioning and size of the eye icon via CSS to match your login form’s design.
    • reCAPTCHA Compatibility: This feature works seamlessly with Google reCAPTCHA, ensuring enhanced security while maintaining usability.

 

Final Thoughts

For WordPress LMS administrators, ensuring a smooth and frustration-free login experience is key to keeping learners engaged. By adding this simple but effective show/hide password feature, you can make it easier for users to access their courses while maintaining security best practices.

If you’re looking to customise your LMS login further, stay tuned for more WordPress and eLearning development tips!

Chris Hodgson

Chris Hodgson is an award-winning Digital learning Solutions Developer and Director of Discover eLearning Ltd. He supports organisations of all sizes to implement engaging, meaningful, and impactful eLearning solutions. Chris has over 15 years’ experience working in both private and public sector learning and development.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.