Skip to content

Instantly share code, notes, and snippets.

@konradsroka
Created January 20, 2015 08:30
Show Gist options
  • Save konradsroka/239b7eae4b65d4f8f53b to your computer and use it in GitHub Desktop.
Save konradsroka/239b7eae4b65d4f8f53b to your computer and use it in GitHub Desktop.
Add Placeholders To WordPress Login Form And Remove Labels
// ----------------------------------------------------
// Adding the placeholders in textfields of login form
// ----------------------------------------------------
jQuery(document).ready(function($) {
$('#loginform input[type="text"]').attr('placeholder', 'Username');
$('#loginform input[type="password"]').attr('placeholder', 'Password');
$('#loginform label[for="user_login"]').contents().filter(function() {
return this.nodeType === 3;
}).remove();
$('#loginform label[for="user_pass"]').contents().filter(function() {
return this.nodeType === 3;
}).remove();
$('input[type="checkbox"]').click(function() {
$(this+':checked').parent('label').css("background-position","0px -20px");
$(this).not(':checked').parent('label').css("background-position","0px 0px");
});
});
@clementgonin
Copy link

clementgonin commented May 23, 2018

Hi !

This is old but usefull, I'd suggest a little modification : instead of writing 'Username' and 'Password' in english, I got the content of labels to put in placeholders. It's "better" because it will take language into account automatically, following wordpress lead.

Just replaced the start with :

placeholder_login = $('#loginform label[for="user_login"]').html();
placeholder_password = $('#loginform label[for="user_pass"]').html();

$('#loginform input[type="text"]').attr('placeholder', placeholder_login);
$('#loginform input[type="password"]').attr('placeholder', placeholder_password);

@dvdmierden
Copy link

@Rancebrume

That's pretty sweet, but I think using html() also adds the actual form field to the placeholder.
I've used this instead:
placeholder_login = $('#loginform label[for="user_login"]').text();
placeholder_password = $('#loginform label[for="user_pass"]').text();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment