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-<?php echo $set_mode;?>' 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('div[id="um-field-show-passwords-<?php echo $set_mode;?>"] a').click(function(){ 
		 
            var $parent = jQuery(this).parent("div"); 
            var $form = jQuery(".um-<?php echo $set_mode;?> .um-form");

		    $parent.find("i").toggleClass(function() {
		    	if ( jQuery( this ).hasClass( "um-faicon-eye-slash" ) ) {
	                $parent.find("a").text('<?php _e("Hide password","ultimate-member"); ?>');
		    		jQuery( this ).removeClass( "um-faicon-eye-slash" )
		    		$form.find(".um-field-password").find("input[type=password]").attr("type","text");
		    	   return "um-faicon-eye";
			    }
				 
				jQuery( this ).removeClass( "um-faicon-eye" );
				$parent.find("a").text('<?php _e("Show password","ultimate-member"); ?>');
			    $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!

40 CommentsClose Comments

40 Comments

  • emelineser
    Posted October 8, 2020 at 10:41 pm 0Likes

    Amazing! Thanks a lot! You’re the best!

  • jehojkim
    Posted October 31, 2020 at 2:53 am 0Likes

    Works like a charm! Thanks!

  • tarak
    Posted November 12, 2020 at 9:34 pm 0Likes

    Thanks Champ , you helped me a lot …

  • buging
    Posted November 30, 2020 at 7:28 pm 0Likes

    awesome! you’re a life-saver champ. Is there a way to also show the eye icon inside the field?

  • Victor
    Posted December 9, 2020 at 9:49 pm 0Likes

    Worked. Thanks

  • Bob
    Posted February 24, 2021 at 6:40 pm 0Likes

    This did work but doesnt anymore – the icon and text shows but keeps the password field masked 🙁

    • Posted February 25, 2021 at 1:38 pm 0Likes

      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,

  • Jakobe
    Posted March 1, 2021 at 10:59 pm 0Likes

    3 months looking for that!!!!!!!!! THAAAAANK YOUUUUUUUUUUUUU!!!!!!!!!!!!!!!

  • dhomalley
    Posted March 20, 2021 at 12:23 pm 0Likes

    I have my Registration and Login on the same page. The show/hide password is visible on both forms, but works more like a toggle on one form and then the other. Meaning click the show on login and both forms show or hide, but if I click the show/hide on registration form it doesn’t work.

    • Posted March 20, 2021 at 2:19 pm 0Likes

      Hi Dhomalley, I’ve updated the code snippet. Please test and let me know if you’re still encountering issues.

      Regards,

  • Dhomalley
    Posted March 22, 2021 at 10:27 am 0Likes

    Thank you, Champ! That did work. I’ve since changed my register and login to different pages, but it still works. Wonderful, and I appreciate the code!

  • Shirin
    Posted March 22, 2021 at 2:59 pm 0Likes

    Hi Champ,

    I’m still experiencing the issue of Show/Hide password not working in Registration Page but it works for Login Page.

    It’s clickable in the registration page, but it won’t change to hide/show. It stays stuck in show password. It works great in login page though.

  • Pahalvan Singh
    Posted March 24, 2021 at 5:20 am 0Likes

    Thank You So Much..

  • Joda12
    Posted May 6, 2021 at 6:03 pm 0Likes

    Great, fantastic – works very well, I implemented my version as a custom plugin – many thanks.

    The one thing that amazes me is just how bad most membership plugins are at the basics like this, sure they have provision to divide a site up into umpteen different pay zones and so on. But options for core usability options are often completely bypassed and neglected.

    This is crucial – if people cannot get past basic sign-up because of usability issues then the site suffers.

    I still want to see a basic membership plugin that is properly designed usability wise.

    Also as I have raised with UM and so far been ignored…

    It is a privacy issue to inform someone

    “Sorry someone is already signed up with that email”

    I wonder how many private detectives are hired by someone who has the email address of someone they know and want to find out if they are signed up with a particular website – easy peasy just try and sign up with their email address and see if they see the warning message.

    The secure way to deal with repeated signups with the same email address is to advise…

    “Sorry there is a problem please check your email inbox to resolve this issue”

    Then you send them an email saying…

    “Someone just tried to sign up with your email address – if this was you then please be advised you are already signed up – just ask for a password reminder on site if you have forgotten”

    That way you do not tell people who happen to know your member and their email address if they are signed up with a particular site.

  • Abdullah
    Posted May 20, 2021 at 5:09 pm 0Likes

    This code does not works for me, very disappointed,
    this error occurs:
    Your PHP code changes were rolled back due to an error on line 1071 of file wp-content/themes/oceanwp/functions.php. Please fix and try saving again.

    Cannot redeclare um_user_password_form_edit_field() (previously declared in wp-content/plugins/code-snippets/php/snippet-ops.php(469) : eval()’d code:2)

    • Posted May 21, 2021 at 6:21 pm 0Likes

      According to the error, you have added my code twice in your code snippet.

  • Pazz
    Posted June 24, 2021 at 6:11 pm 0Likes

    Works!! you saved me.

    There is some way that by default it remains to show I am using it for a very low-tech audience 🙂

  • ls1146
    Posted August 11, 2021 at 8:58 pm 0Likes

    Hey, thank you so much for that code!!
    Is it possible to translate the “hide passwort” and “show password” part?
    How can I do this?

    Thank you !!!

    • Posted September 4, 2021 at 10:55 am 0Likes

      Just change these lines:

      _e(“Hide password”,”ultimate-member”)
      _e(“Show password”,”ultimate-member”)

      to
      _e(“Hide passwort”,”ultimate-member”)
      _e(“Show passwort”,”ultimate-member”)

  • Mac Dev
    Posted August 30, 2021 at 11:10 pm 0Likes

    Thank you! 🙂

  • Saqib Javaid
    Posted September 4, 2021 at 3:19 am 0Likes

    This is not working at me end, I have tried this in couple of ways but its still not working at my end.

    • Posted September 4, 2021 at 10:54 am 0Likes

      Hi,

      Can you please check if there’s any javascript error in the browser console?

      Regards,

  • Antonio V Paiva
    Posted September 20, 2021 at 6:09 am 0Likes

    Estava a ponto de desistir do plugin só por causa da falta dessa opção, pois pra experiência do usuário isso é muito importante. Muito brigado pela ajuda.

    Recomendo a outros desenvolvedores utilizarem os temas child, pois sempre que um tema atualiza, essa edição do functionsphp pode ser removida.

  • Ummehany Shanda
    Posted September 28, 2021 at 9:38 pm 0Likes

    Hello,
    It’s amazing and worked for me.
    Can you help me to make the remember me option checked by default ?
    like in login form it’s unchecked and I want to make it checked by default.
    It will be great help thanks for this one too.
    Thanks a lot

    • Posted September 29, 2021 at 3:15 pm 0Likes

      Hi @Ummehany Shanda – you can try this javascript code:

      jQuery(document).on("ready", function() {
      setTimeout(function() {
      jQuery(".um-login .um-field-checkbox-option").trigger("click");
      }, 100);
      });

  • Mariana
    Posted October 2, 2021 at 2:33 am 0Likes

    No funcion no me aparece nada en mis formularios de registro y de inicio de sesión 🙁

  • Ummehany Shanda
    Posted October 3, 2021 at 6:44 pm 0Likes

    Thank you, thank you, thanks a lot.
    Your both code worked for me.
    Now can you help me with another thing, please?
    I mailed you for this too.
    As if I restricted few pages and I want after login or registration by those page should be redirect over there. Is it possible?
    Thanks in advance. 🙂

  • Cristian
    Posted October 19, 2021 at 7:43 am 0Likes

    Como adiciono a visualização da senha junto com o Placeholder do campo senha?

    How do I add the password preview along with the “Placeholder” password field?

  • Christian Castro
    Posted November 18, 2021 at 11:36 am 0Likes

    How can I implement this on both password field and confirm password field with separate toggle? Thanks

  • MGK
    Posted November 19, 2021 at 6:53 pm 0Likes

    Merciiiiiiiiii beaucouppppppppppp !!!!!!!!!!!!!!!!!!!!!!!! ça marche !!!!!!!!!!!

  • Dakisemut
    Posted December 2, 2021 at 11:07 am 0Likes

    Thanks sir thats work in every website, can i customize it?

  • Mohammad
    Posted December 18, 2021 at 10:00 pm 0Likes

    Thanks a lot

  • Jürgen Krauss
    Posted January 12, 2022 at 5:02 am 0Likes

    SUUUUPER! Hat sofort funktioniert. Ganz herzlichen Dank!

  • Jax
    Posted January 24, 2022 at 12:54 am 0Likes

    It worked on the login page but not on the registration page. what could be the problem?

  • Roland
    Posted March 3, 2022 at 10:20 pm 0Likes

    works great, thanks a lot!

  • Deborah Felicio
    Posted March 15, 2022 at 1:33 am 0Likes

    Amazing! Thanks

  • Kapatsos Stratos
    Posted June 13, 2022 at 12:57 am 0Likes

    It works fine for me! Thank you very much for helping us to develop our sites!!

  • AZERTY
    Posted July 27, 2022 at 3:53 am 0Likes

    Bonjour je ne sais pas où je dois mettre ce code sur wordpress quelqu’un pourrais m’aider merci.

  • AZERTY
    Posted July 27, 2022 at 3:56 am 0Likes

    Sorry, i thought it was in french. I said i don’t know where i have to put this code on wordpress. Someone can help me please

  • Melki Brunoy
    Posted July 27, 2022 at 3:29 pm 0Likes

    Top beautiful code thanks

Leave a comment