Customize wp_login_form

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator bcworkz

    (@bcworkz)

    7 years ago

    Your code doesn’t show what $args are passed to wp_login_form(). You can alter form labels by using specific array elements in $args. See https://codex.ww.wp.xz.cn/Customizing_the_Login_Form#Make_a_Custom_Login_Page

    Thread Starter bb23

    (@bb23)

    7 years ago

    Thank you for your help I was able to remove the labels now
    Now as the labels are removed, A placeholder in the username and password box are missing. Any ideas how to get this done?

    CrouchingBruin

    (@crouchingbruin)

    7 years ago

    You can try adding this jQuery:

    <script type="text/javascript">
jQuery(document).ready(function( $ ){
	$("#user_login").val('User ID');
	$("#user_login").on("focus", function(){this.value='';});
	$("#user_pass").val('Password');
	$("#user_pass").on("focus", function(){this.value='';});
});
</script>

    This will set the value of the User ID field to “User ID” and the Password field to “Password”, as well as set an event handler that will clear the fields when the field gets the focus. The problem, though, is that the password field is of type password, so the placeholder is going to be concealed.

    Thread Starter bb23

    (@bb23)

    7 years ago

    thank you for the answer. Unfortunately it does not work for me.
    But maybe I am not able to add the jQuery properly.
    I created a file in my Themes/”myTheme”/assets/js directory, named the file script_new.js and pasted your code in it.
    Then to my functions.php I added this code to the bottom:

    add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'script_new', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/assets/js/script_new.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

    This causes no changes for me.
    I also tried it with script_new.js in my functions.php
    Did I add the jQuery correctly?

    • This reply was modified 7 years ago by bb23.
    Moderator bcworkz

    (@bcworkz)

    7 years ago

    Looks correct provided you are not using a child theme. Verify jQuery is loaded by finding script tags with src attribute URLs leading to /wp-includes/js/jquery/jquery.js and jquery-migrate.js in the page’s source HTML.

    There will also be a src attribute for your JS file. Be sure the URL leads to your actual file.

    If that all checks out, check your browser’s JS console for additional clues.

    Thread Starter bb23

    (@bb23)

    7 years ago

    Analysing the source HTML is something I have never done when before. But I did find the URLs leading to /wp-includes/js/jquery/jquery.js and even my script_new:

    View post on imgur.com


    Checking the console might have revealed the error.

    View post on imgur.com


    I changed the code to:

    jQuery(document).ready(function( $ ){
	$("#user_login").val('User ID');
	$("#user_login").on("focus", function(){this.value='';});
	$("#user_pass").val('Password');
	$("#user_pass").on("focus", function(){this.value='';});
});

    now it is showing the placeholder for User Name.
    For the password the placeholder is censored.
    Is there any possibility to make the placeholder visible but censor the user input?
    Thank you

    • This reply was modified 7 years ago by bb23.
    CrouchingBruin

    (@crouchingbruin)

    7 years ago

    Change the code to this:

    
jQuery(document).ready(function( $ ){
	$("#user_login").val('User ID');
	$("#user_login").on("focus", function(){this.value='';});
	$("#user_pass").attr('type', 'text');
	$("#user_pass").val('Password');
	$("#user_pass").on("focus", function(){this.value='';document.getElementById('user_pass').type = 'password';});
});
    Thread Starter bb23

    (@bb23)

    7 years ago

    Thank you so much!
    Exactly what I was looking for

    • This reply was modified 7 years ago by bb23.
Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Customize wp_login_form’ is closed to new replies.