The default WordPress password protection feature is the easiest way to protect a post. This built-in feature is fine for simple password protection, like protecting a single page with a single password. However, it’s very limited.
If you want advanced protection and customization, the Password Protect WordPress (PPWP) plugin is a great choice, especially if you’re not comfortable with CSS and HTML. If you are, you can also look to customize and style the default WordPress password-protection to your own preference.
In this article, you’ll learn how to set up and customize password protected sites using WordPress’ built-in features and the PPWP plugin.
Customize WordPress default password forms
WordPress has a built-in content visibility feature that allows you to control access to your protected content while editing. Let’s look at how to protect a page and customize the password form without using plugins.
How to password protect pages
In your admin dashboard in the Pages or Posts section, open the page you want to protect.
In the top right corner of the ” Edit page” screen, you will see the “Visibility” option under the “Publish” section.
Click on “Edit” here and select “Password protected”.
Enter the desired password in the “Password:” field and then click ” OK”.
The visibility of your content will be changed to “Password protected”, as shown in the attached screenshot.
Don’t forget to update your content once you have finished editing so that all changes are saved.
How to customize WordPress pages with password protection
By default, your password form would look like this:
To change the default text, simply add the following codes to the functions.php file of your (child) theme or to the Code Snippets plugin.
function my_custom_password_form() {
global $post;
$label = 'pwbox-' . ( empty( $post->ID ) ? rand() : $post->ID );
$output = '
<div class="boldgrid-section">
<div class="container">
<form action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" class="form-inline post-password-form" method="post">
<p>' . __( 'This content is password protected. This is a custom message. To view it please enter your password below:' ) . '</p>
<label for="' . $label . '">' . __( 'Password:' ) . '
<input name="post_password" id="' . $label . '" type="password" size="20" class="form-control" />
</label>
<button type="submit" name="Submit" class="button-primary">' . esc_attr_x( 'Enter', 'post password form' ) . '</button>
</form>
</div>
</div>';
return $output;
}
add_filter('the_password_form', 'my_custom_password_form', 99);
With style password input fields:
function my_custom_password_form() {
global $post;
$label = 'pwbox-' . ( empty( $post->ID ) ? rand() : $post->ID );
$output = '
<div class="boldgrid-section">
<div class="container">
<form action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" class="form-inline post-password-form" method="post">
<p>' . __( 'This content is password protected. This is a custom message. To view it please enter your password below:' ) . '</p>
<label for="' . $label . '">' . __( 'Password:' ) . '
<input name="post_password" id="' . $label . '" type="password" style="background: #ffffff; border:1px solid #999; color:#333333; padding:10px;" size="20" />
</label>
<button type="submit" name="Submit" class="button-primary">' . esc_attr_x( 'Enter', 'post password form' ) . '</button>
</form>
</div>
</div>';
return $output;
}
add_filter('the_password_form', 'my_custom_password_form', 99);
You can also style the “Send” button by adding this:
.button {
background-color: #000;
color: #fff;
border: 0;
font-family: Impact, Arial, sans-serif;
margin: 0;
height: 33px;
padding: 0px 6px 6px 6px;
font-size: 15px;
cursor: pointer;
}
Or, you can integrate it into the password protection form code already added, like this:
function my_custom_password_form() {
global $post;
$label = 'pwbox-' . ( empty( $post->ID ) ? rand() : $post->ID );
$output = '
<div class="boldgrid-section">
<div class="container">
<form action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" class="form-inline post-password-form" method="post">
<p>' . __( 'This content is password protected. This is a custom message. To view it please enter your password below:' ) . '</p>
<label for="' . $label . '">' . __( 'Password:' ) . '
<input name="post_password" id="' . $label . '" type="password" style="background: #ffffff; border:1px solid #999; color:#333333; padding:10px;" size="20" />
</label>
<button type="submit" name="Submit" class="button">' . esc_attr_x( 'Enter', 'post password form' ) . '</button>
</form>
</div>
</div>';
return $output;
}
add_filter('the_password_form', 'my_custom_password_form', 99);
You can do a lot with the customization options available in WordPress if you feel comfortable with styling your forms. However, an easier option is to use a plugin specifically designed for password-protecting your website.
Customize password forms with PPWP plugins
WordPress does offer a basic password protection feature, but this is hard to scale across your whole site. To be more specific, this built-in feature only allows you to do the following:
- Protect a site with a single password.
- Even if you can protect different pages with the same password, you still need to unlock them individually.
- You cannot protect the entire website or individual content areas.
- All customization must be done via code, which is not a good choice for WordPress beginners.
This is where the PPWP plugin comes into play. The plugins offer you much more advanced features, including but not limited to:
- Protect all types of content, such as the entire site, individual pages, and content sections with multiple passwords.
- Unlock multiple protected content at once.
- Integration with the WordPress Customizer, which offers many customization options to make your password form attractive.
In the next section, we will guide you through the steps to protect individual pages, content sections and the entire website with the PPWP plugin.
How to protect WordPress content with PPWP plugins
Password protection plugins for WordPress offer you a comprehensive solution for protecting all types of content. You don’t need to install different plugins for different purposes.
Let’s go through the detailed instructions on how to protect different types of content with PPWP plugins.
Protect individual WordPress pages
With PPWP Lite (free), you can protect your individual pages with multiple passwords.
Simply navigate to the “Pages” section and open the “Edit Page” screen. Here, you will see the “Password Protect WordPress” section, which is usually located in the right sidebar.
Add your passwords into the “Passwords” field and then click “Submit”.
Your site is now protected. You may consider purchasing the PPWP Pro version to manage passwords in the same place and use many more advanced features, such as restricting passwords based on time or usage, or the ability to protect parent-child sites.
Secure content sections
PPWP plugins offer you a section protection feature that allows you to protect any content with ease.
Once you have activated the PPWP Lite (Free) plugin, navigate to Password Protect WordPress > Partial Protection > Section Protection under your admin dashboard.
Create a new section template, add the content you want to protect and create passwords to unlock the protected section.
After that, you can easily embed the created section into any pages, posts or custom post types on your site.
Secure the entire website with just one click
If you want to protect your entire site quickly, this is also possible with the PPWP Lite plugin.
All you have to do is activate the “Password protection for the entire website” option under Password protection for WordPress > Website protection.
Please note that you can only create one password with the Lite version. To create multiple passwords for your protected site, install the Premium version.
How to customize PPWP password forms
It’s easy to create customized password forms with the PPWP plugin, as it integrates well with the WordPress Customizer and gives you a user-friendly interface to customize your password-protected WordPress pages.
Please follow our step-by-step guide below to customize your password forms.
Step 1: Go to Appearance > Customize in your admin dashboard. At the bottom of the page that appears, you will see 3 options as shown below.
Select one depending on which password form you want to customize. In this example, we will choose the “PPWP Single Password Form” option.
Step 2: Click on the “Password Forms” section to customize your password forms. This option allows you to customize the following information:
- Background color
- Heading of the password form
- Description above the form
- Description below the form
- Password labels
- Button to reveal the password
Don’t forget to click “Publish” when you are finished.
Step 3: Go back to PPWP Single Password Form and select the “Error Messages” option. This option allows you to display your own messages when users enter incorrect passwords, or when their ReCAPTCHA verification fails.
You can adjust the font size, text color and background color to your liking, but don’t forget to click on the “Publish” button so that all your settings are saved.
Your changes will be applied to all single password forms on your site. This works seamlessly with all editors and page builders like Divi and BeaverBuilder. And if you are using the Elementor page builder, you can also design your partial password forms directly from the Elementor edit page.
Conclusion
We’ve just introduced a detailed guide on how to protect content and customize password forms using the standard WordPress feature and the PPWP Lite plugin. Obviously, PPWP proves to be a more advanced feature that gives you more options, like an all-in-one solution to protect individual pages, content sections and the entire site. It also gives you a user-friendly UI to customize your password forms, so for most people, it’s worth checking out.
