Placeholder text for registration form

Question

I am trying to add placeholder text to the native WordPress registration form. I am currently using the Register Plus Redux plugin. How to add this placeholder text into the text input fields on the form?

I need to tell people to use their first and last name as the username. I'd be stoked if someone could help me out.

Answer 1

Another simple way to do this without needing to add another script is using PHP's str_replace function.

$args = array(
    'echo' => false,
);

$form = wp_login_form( $args ); 

//add the placeholders
$form = str_replace('name="log"', 'name="log" placeholder="Username"', $form);
$form = str_replace('name="pwd"', 'name="pwd" placeholder="Password"', $form);

echo $form;

Answer 2

Unfortunately there are no hooks/filters to modify the input field in the login/registration form to add a placeholder to it.

But you can do this by simple jQuery. I am adding the steps below

I am not aware of how this plugin changes the form but you can follow the same for it too. Below are the codes working for the default login/registration page

First you need to create a js file. I created it in my active theme's js folder and named it custom.js

then added the below line in this file.

/**
 * Custom js file.
 */

jQuery(document).ready(function(){
    jQuery('#user_login').attr('placeholder', 'User Name');
    jQuery('#user_email').attr('placeholder', 'User Email');
    jQuery('#user_pass').attr('placeholder', 'User Password');
});

The above adds place holder as User Name, User Email and User Password to the user_login, user_email, and user_pass input field respectively. You can change those as per your requirement.

Now you need to add/enqueue this js file which you can do by adding the below code in your active theme's functions.php file

add_action( 'login_enqueue_scripts', 'wpse_login_enqueue_scripts', 10 );
function wpse_login_enqueue_scripts() {
    wp_enqueue_script( 'custom.js', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), 1.0 );
}