By default, WordPress will display the following text for password protected posts,
This post is password protected. To view it please enter your password below:
This is determined by Line 1146 at wp-includes/post-template.php. What if you wanted to change that output to something else? One solution would be to simply edit Line 1146 at wp-includes/post-template.php. Of course editing core files is never a good idea unless you know what you are doing. A much better solution is to create a new function and add a filter.
Add the following to your theme's functions.php file,
add_filter( 'the_password_form', 'custom_password_form' );
function custom_password_form() {
global $post;
$label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID );
$o = '<form class="protected-post-form" action="' . get_option('siteurl') . '/wp-pass.php" method="post">
' . __( "This post is password protected. To view it please enter your password below:" ) . '
<label for="' . $label . '">' . __( "Password:" ) . ' </label><input name="post_password" id="' . $label . '" type="password" size="20" /><input type="submit" name="Submit" value="' . esc_attr__( "Submit" ) . '" />
</form>
';
return $o;
}
Edit the appropriate text above.
Note that the new function has been assigned a class > protected-post-form. To make use of this simply add .protected-post-form to your theme's style sheet along with whatever styling rules you want. For instance, using the default Kubrick theme I added the following to the style sheet,
.protected-post-form {
background:#FF0000;
color:#fff;
border:1px solid #000;
}
This is the result, (click image to enlarge)
via the WordPress Support Forum.
About Len Kutchma
Hey thanks for your post!!!
It all worked fine but i am still unable to change the input txt from white to black or change the bg color (the actual area where you'd write the password).
Any help?
peace
Hi Br1,
What an interesting question. Unfortunately I don't have an easy answer. Each time you create a password-protected post, WordPress generates a unique ID. For example, create a password-protected post then view the source code. You'll see something like the following ...
<input name="post_password" id="pwbox-20" type="password" size="20" />Note the ID pwbox-20. Each time you create a new password-protected post another unique ID will be created. Because IDs are unique, each one has to be styled individually. Using the ID cited above you could try adding this to your style sheet ...
.protected-post-form #pwbox-20{background:#000;
color:#fff;
}
This will give the unique "ID" pwbox-20 contained within the "class" protected-post-form a white text on black background. If you create another such post it will generate another unique ID - perhaps pwbox-21. You would adjust the style sheet as such ...
.protected-post-form #pwbox-20, .protected-post-form #pwbox-21{background:#000;
color:#fff;
}
See the pattern? You would have to keep modifying the style sheet.
In CSS classes are defined by a . while IDs are defined by a #. IDs are unique while classes are not. Here is a good explanation of the differences between the two.
Maybe there is an easier way but I can't think of it.