Just lately I had a consumer need certainly one of their WordPress pages protected, no downside! Then he got here again and stated, can you alter the textual content and make it look higher? Hmm… Certain! Here is tips on how to…
Step 1 Edit Your capabilities.php File
Alright, let’s open up your capabilities.php file and add this block of code:
1 |
|
2 |
<?php
|
3 |
add_filter( 'the_password_form', 'custom_password_form' ); |
4 |
operate custom_password_form() { |
5 |
international $publish; |
6 |
$label = 'pwbox-'.( empty( $publish->ID ) ? rand() : $publish->ID ); |
7 |
$o = '<kind class="protected-post-form" motion="' . get_option('siteurl') . '/wp-pass.php" methodology="publish"> |
8 |
' . __( "THIS IS YOUR NEW PASSWORD INTRO TEXT THAT SHOWS ABOVE THE PASSWORD FORM" ) . ' |
9 |
<label class="pass-label" for="' . $label . '">' . __( "PASSWORD:" ) . ' </label><enter title="post_password" id="' . $label . '" kind="password" fashion="background: #ffffff; border:1px strong #999; shade:#333333; padding:10px;" dimension="20" /><enter kind="submit" title="Submit" class="button" worth="' . esc_attr__( "Submit" ) . '" /> |
10 |
</kind><p fashion="font-size:14px;margin:0px;">∗EXTRA TEXT CAN GO HERE...THIS WILL SHOW BELOW THE FORM</p>
|
11 |
'; |
12 |
return $o; |
13 |
}
|
14 |
?>
|
Let me dissect this actually fast for you. The password-protection code is generated from a file within the wp-includes folder. “Cool”, you suppose, “I am going to simply go in there and make my adjustments”. Do not do it! Tempting as it could be, enhancing the core code is a horrible, lowdown, no good thought. For one motive: What occurs if you happen to replace WordPress? It will get worn out…sorry. Okay, so placing this block of code in your capabilities.php file let’s you amend it and never fear about dropping any adjustments to the shape once you replace.
As you’ll be able to see, I truly added lessons to the shape itself, the label of the shape, the password area in addition to the button. Now we now have all the pieces we have to fashion it utterly with CSS. Oh, and we’re not truly altering something within the wp-includes folder, so we’re not breaking any guidelines.
Step 2 Change The Default Password Defend Textual content
The textual content in capitals above additionally reveals you what I modified… the primary set of textual content:
THIS IS YOUR NEW PASSWORD INTRO TEXT THAT SHOWS ABOVE THE PASSWORD FORM
As you’ll be able to see this was your intro textual content… it used to say this:
This publish/web page is password protected. To view it please enter your password beneath
Now we’re capable of change it to no matter textual content you need up there. You possibly can even delete all the pieces between these quotations and simply don’t have anything show up there in any respect.
Step 3 Change The Password Enter Area Label
The default label that is proven to the left of the enter area is Password. Right here you’ll be able to change it to no matter you’d wish to say. In my case, I assigned it a category took the label out in css by placing the show to none.
1 |
|
2 |
.pass-label { show: none; } |
You may as well change font dimension, shade, the works to this label
Step 4 Fashion The Password Enter Area
I hate how types look, however with this addition to the default password enter area i will make it look slightly extra “updated”. Be happy to alter it nevertheless you see match.
1 |
|
2 |
<enter title="post_password" id="' . $label . '" kind="password" fashion="background: #ffffff; border:1px strong #999; shade:#333333; padding:10px;" dimension="20" /> |
Step 5 Styling The Submit Button
Within the capabilities code, I added a category to the submit button known as “button”. I did this as a result of I wished all of the buttons on my consumer’s website to look precisely the identical. Uniformity in a website is essential. Here is the CSS I used:
1 |
|
2 |
.button { |
3 |
background-color: #000; |
4 |
shade:#fff; |
5 |
border: 0; |
6 |
font-family: Influence, Arial, sans-serif; |
7 |
margin: 0; |
8 |
top: 33px; |
9 |
padding: 0px 6px 6px 6px; |
10 |
font-size: 15px; |
11 |
cursor: pointer; |
12 |
}
|
For some motive I used to be getting the arrow after I hovered over the button so I simply modified cursor to indicate pointer and it went again to the hand on hover.
Step 6 Including Additional Textual content Beneath The Type
I truly wanted so as to add slightly notice to inform people who the password area is case delicate so so as to add additional textual content beneath the shape, I simply added a paragraph code and inserted a mode tag to it to fashion the textual content individually from the remainder of the web page.
And we’re completed!
