6

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.

5

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;
  • Unless I'm missing something this seems like the ideal solution as then you aren't relying on js, which could result in your placeholders not showing if user has js turned off or there is javascript error. And if you hid your labels then your form would be useless in that case. – Trevor May 24 '17 at 4:41
  • This is DEFIENTLY the correct approach to this, NOT the JS option – vimes1984 Aug 19 '18 at 9:45
3

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 );
}
  • 1
    Maruti, YOU HAVE MADE MY DAY!. I can't thank you enough!! – mr_bythatmuch Jan 22 '14 at 21:47
  • 1
    Can't I give you, like, a gold badge or something? :) – mr_bythatmuch Jan 22 '14 at 21:49
  • Glad it helped, and about the badge, no you can't give a badge to me, atleast WPSE doesnt have that feature yet ;) but surely you can upvote my answer and accept it to give me the max 25 points from you :) – Maruti Mohanty Jan 23 '14 at 5:26
  • @mr_bythatmuch If this solution worked for you then accept it so that it helps other with same issue. how-does-accepting-an-answer-work – Maruti Mohanty Jan 29 '14 at 7:41
  • Content to remunerate with gold but not marking as correct answer. SMH. – Clarus Dignus Jan 12 '16 at 13:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.