When a post is protected, its content looks like:

// This content is password protected. To view it please enter your password below:
// Password: [_______________] [Enter]

How do I add a placeholder to that <input> tag?


This can be achieved via a hook, called the_password_form:

function my_theme_password_placeholder($output) {
    $placeholder = 'Hello!';
    $search = 'type="password"';
    return str_replace($search, $search . " placeholder=\"$placeholder\"", $output);
add_filter('the_password_form', 'my_theme_password_placeholder');

A str_replace searches for the string type="password" inside the output. This gives an attribute to the <input> indicating it's of type password. The replacement string contains the searched one plus the placeholder attribute too.


Assuming the password field has an 'id' value, a bit of Javascript might be better.

The wp-admin login page uses a password id of 'user-pass', so place this in your function used with the add_filter('the_password_form', 'my_theme_password_placeholder);

function my_theme_password_placeholder() {
document.getElementById("password-field-id").placeholder = "Type password here.."; 

add_filter('the_password_form') 'my_theme_password_placeholder');

This will place the Type password here.. text inside the password field.

This will ensure that any placeholder value is the one you set, overwriting any existing placeholder value. You could adjust the function to pass a parameter containing the string to display as a placeholder.

Of course, if the visitor has disabled JavaScript, this won't work. But that is (IMHO) a small minority of site visitors.

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.