This content originally appeared on Envato Tuts+ Tutorials and was authored by Carina Javier
I had a recent client who wanted one of their WordPress pages password-protected, which was not an issue. However, later they requested changes to the text and asked for an improved look. I gladly accepted the challenge and here's how I accomplished it.
How to Customize the Password Protected Page in WordPress
Step 1: Edit Your functions.php File
Let's open up your functions.php file and add this block of code:
1 |
<?php
|
2 |
add_filter( 'the_password_form', 'custom_password_form' ); |
3 |
|
4 |
function custom_password_form() { |
5 |
global $post; |
6 |
$label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID ); |
7 |
|
8 |
$o = '<form class="protected-post-form" action="' . get_option('siteurl') . '/wp-pass.php" method="post"> |
9 |
' . __( "THIS IS YOUR NEW PASSWORD INTRO TEXT THAT SHOWS ABOVE THE PASSWORD FORM" ) . ' |
10 |
<label class="pass-label" for="' . $label . '">' . __( "PASSWORD:" ) . ' </label><input name="post_password" id="' . $label . '" type="password" style="background: #ffffff; border:1px solid #999; color:#333333; padding:10px;" size="20" /><input type="submit" name="Submit" class="button" value="' . esc_attr__( "Submit" ) . '" /> |
11 |
</form><p style="font-size:14px;margin:0px;">∗EXTRA TEXT CAN GO HERE...THIS WILL SHOW BELOW THE FORM</p>
|
12 |
'; |
13 |
|
14 |
return $o; |
15 |
}
|
16 |
?>
|
Let me quickly dissect this for you. The password-protection code is generated from a file located in the wp-includes folder, and you might be tempted to directly edit it. However, this is not recommended as it is a bad idea to modify the core code. Why? Well, consider what would happen if you update WordPress—all your changes would be wiped out. So, it's best to avoid this approach to prevent any potential issues. Putting the above piece of code in your functions.php file, let's you amend it with the WordPress hook system so you won't have to worry about losing any changes to the form when you update WordPress.
As you can see, I actually added CSS classes to the form itself, the label of the form, the password field and the button. With all the necessary elements in place, we can now fully style it using CSS. The best part is, we won't be making any changes to the wp-includes folder, so we won't be breaking any WordPress coding standard rules.
Step 2: Change the Default Password Protect Text
The text in capitals above also shows you what I changed, the first set of text:
1 |
THIS IS YOUR NEW PASSWORD INTRO TEXT THAT SHOWS ABOVE THE PASSWORD FORM |
As you can see this was your intro text, it used to say this:
1 |
This content is password protected. To view it please enter your password below: |
Now we're able to change it to whatever text you want up there. You can even delete everything between those quotations and just have nothing display up there at all.
Step 3: Change the Password Input Field Label
The default label which is shown to the left of the input field is Password. You can change it to whatever you'd like to say. In my case, I assigned it a CSS class and removed the label with the following CSS rule.
1 |
.pass-label { display: none; } |
You can also change the other properties using the same CSS class if you wish to.
Step 4: Style the Password Input Field
I'm not a fan of the default look of of this form, but thanks to this addition to the password input field, I'm able to make it look more modern. Feel free to customize it further to your liking.
1 |
<input name="post_password" id="' . $label . '" type="password" style="background: #ffffff; border:1px solid #999; color:#333333; padding:10px;" size="20" /> |
Step 5: Styling the Submit Button
In the functions code, I added the button CSS class to the submit button. I did this because I wanted all buttons on my client's site look exactly the same. Uniformity in a site is key. Here's the CSS I used:
1 |
.button { |
2 |
background-color: #000; |
3 |
color: #fff; |
4 |
border: 0; |
5 |
font-family: Impact, Arial, sans-serif; |
6 |
margin: 0; |
7 |
height: 33px; |
8 |
padding: 0px 6px 6px 6px; |
9 |
font-size: 15px; |
10 |
}
|
Step 6: Adding Extra Text Below the Form
I also wanted to include a note informing users that the password field is case-sensitive. To achieve this, I simply added a paragraph code below the form and inserted a style tag to apply custom styling to the text, keeping it distinct from the rest of the page.
Add-on Options
In the previous section, we discussed how you can customize the password protected page from the developer's perspective. However, if you're not comfortable editing the code, there are also other tools that you could use to achieve the same.
Let me list you some of the plugins or add-ons that you could use to customize the password protected form.
YellowPencil
The YellowPencil plugin is a WordPress plugin which offers a feature-rich visual CSS editor, allowing you to customize the appearance of your website without writing any code. It provides a user-friendly interface and a wide range of customization options.
YellowPencil provides a powerful visual editor which allows you to make changes to the design of your website in real-time. You can select elements on your page, such as headings, paragraphs, images, buttons, or any other HTML element, and modify their styles visually.
The plugin offers a point-and-click interface, making it easy to select and modify elements on your website. You can simply click on an element, and YellowPencil will display a set of options to customize its appearance, including typography, colors, margins, padding, background, and more. YellowPencil comes with a library of pre-designed styles and templates that you can apply to your website.
Finally, YellowPencil works with any WordPress theme, enabling you to customize the design of your theme without modifying its core files. It provides a safe and non-destructive way to personalize your website's appearance.
SiteOrigin CSS
The SiteOrigin CSS plugin is a free WordPress plugin which allows you to easily customize the appearance of your website using a simple visual editor. It provides a user-friendly interface which enables you to make changes to your site's CSS (Cascading Style Sheets) without having to write any code.
With this plugin, users can easily customize various aspects of their website's design, including fonts, colors, spacing, backgrounds, borders, and more. The plugin provides a live preview of the changes in real-time, allowing users to see the results of their customization immediately.
SiteOrigin CSS offers a user-friendly interface that makes it easy to navigate and modify styles. You can select specific elements on your website, such as headings, paragraphs, buttons, or images, and apply custom CSS styles to them. In addition to modifying individual elements, the SiteOrigin CSS plugin allows you to define global styles that apply to your entire website. This enables you to maintain consistency in design across different pages and elements.
The plugin seamlessly integrates with other popular WordPress page builder plugins, such as SiteOrigin Page Builder, Elementor, and Beaver Builder. This makes it a versatile tool that can be used alongside these builders to further enhance the design capabilities of your website.
This content originally appeared on Envato Tuts+ Tutorials and was authored by Carina Javier
Carina Javier | Sciencx (2014-01-20T01:09:52+00:00) Customizing and Styling the Password Protected Form in WordPress. Retrieved from https://www.scien.cx/2014/01/20/customizing-and-styling-the-password-protected-form-in-wordpress/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.