“Show Passwords” feature in Ultimate Member Forms

-
um-show-password-field-LOTR-eye

Here’s another Friday trick that will make your site powerful as the Eye of Sauron with Ultimate Member!

In this tutorial, you will learn how to add “Show Password” functionallity in your Ultimate Member Login & Register forms.

Here’s a block of codes that will automatically add the “Show Password” in UM Forms with Password fields. You can add this in your Theme’s function.php file or paste it in the code snippet plugin.

add_filter("um_confirm_user_password_form_edit_field","um_user_password_form_edit_field", 10, 2 );
add_filter("um_user_password_form_edit_field","um_user_password_form_edit_field", 10, 2 );
function um_user_password_form_edit_field( $output, $set_mode ){
    
    ob_start();
    ?>
    <div id='um-field-show-passwords' style='text-align:right;display:block;'>
    	<i class='um-faicon-eye-slash'></i>
    	<a href='#'><?php _e("Show password","ultimate-member"); ?></a>
    </div>
    <script type='text/javascript'>
	    jQuery('#um-field-show-passwords a').click(function(){ 
		    
		    jQuery(this).parent("div").find("i").toggleClass(function() {
		    	if ( jQuery( this ).hasClass( "um-faicon-eye-slash" ) ) {
	                jQuery( this ).parent("div").find("a").text('<?php _e("Hide password","ultimate-member"); ?>');
		    		jQuery( this ).removeClass( "um-faicon-eye-slash" )
		    		jQuery(".um-form").find(".um-field-password").find("input[type=password]").attr("type","text");
		    	   return "um-faicon-eye";
			    }
				 
				jQuery( this ).removeClass( "um-faicon-eye" );
				jQuery( this ).parent("div").find("a").text('<?php _e("Show password","ultimate-member"); ?>');
			    jQuery(".um-form").find(".um-field-password").find("input[type=text]").attr("type","password");
			  
                return "um-faicon-eye-slash";
			});

		    return false; 

		});
	</script>
    <?php 
	return $output.ob_get_clean();

}

If you will notice in the code below, there are two UM filter hooks that is attached to a function.

add_filter("um_confirm_user_password_form_edit_field","um_user_password_form_edit_field", 10, 2 );
add_filter("um_user_password_form_edit_field","um_user_password_form_edit_field", 10, 2 );

UM HOOK: um_{$field_key}_form_edit_field – We use this UM filter to modify the field before it gets rendered in the form – allows us to add extra html elements.

user_password – This key is widely use in Login & Register form ( if confirm password is not enabled. The Show password link button will show below this field.

confirm_user – This key is when Confirm Password field is enabled in the form. The Show password link button will show below this field.

Now once you’ve added the code snippets, it should work and look like this!

If your site is in multi-language setup, it’s very easy to translate the strings. Just use poedit.com to add “Show password” and “Hide password” in UM’s English translation files.

So I hope that this new trick will help you with your site development with Ultimate Member! Don’t forget to subscribe to my newsletter to get updates and free plugins!

Leave some good vibes in the comment and let me know if you’re encountering any issues with this tutorial!

Subscribe to my newsletter!

Help me reach other people who need the help

7 Comments “Show Passwords” feature in Ultimate Member Forms

    1. Hi Bob, did you try changing your theme to a default WP theme e.g. 2020 and see if there’s a conflict issue with your theme?

      Regards,

Leave a Reply

Your email address will not be published. Required fields are marked *