Created
January 20, 2015 08:30
-
-
Save konradsroka/239b7eae4b65d4f8f53b to your computer and use it in GitHub Desktop.
Add Placeholders To WordPress Login Form And Remove Labels
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---------------------------------------------------- | |
// 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"); | |
}); | |
}); |
@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
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);