WordPress allows you to protect pages, posts, and custom content using a password-protected feature. This feature helps keep sensitive information private while granting access to specific users. However, WordPress’s default password protected form looks plain and may not match your website’s design. However, you can customize the password protected form to make it look professional, match your brand, or improve user experience.
This guide will show you how to do so step by step.
Step 1: Enable Password Protection on a Page or Post
- Log in to WordPress
- Go to your WordPress Dashboard.
- Create or Edit a Page/Post
- Click Pages > Add New or Posts > Add New.
- If you already have a page, select Edit.
- Change Visibility Settings
- In the Publish section, find Visibility.
- Click Edit and select Password Protected.
- Enter a password and click Update/Publish.
When someone visits this page, they will see a password-protected form. Next, we’ll customize it!
Step 2: Customize the Password Form Using Code
The default password protected form in WordPress uses this template:
<form action=”<?php echo esc_url( site_url( ‘wp-login.php?action=postpass’, ‘login_post’ ) ); ?>” method=”post”>
<p>This content is password protected. To view it, please enter your password below:</p>
<p><input name=”post_password” type=”password” size=”20″ /><input type=”submit” value=”Enter” /></p>
</form>
Now, let’s change this to match your website’s style.
Customize the Form Using functions.php
You can modify the password form using your theme’s functions.php file.
Steps to Customize Password Form with Code
- Log in to WordPress.
- Go to Appearance > Theme File Editor.
- Open functions.php.
- Add this code at the bottom of the file:
function custom_password_form() {
return ‘
<form action=”‘ . esc_url( site_url( ‘wp-login.php?action=postpass’, ‘login_post’ ) ) . ‘” method=”post”>
<div class=”custom-password-form”>
<p class=”custom-message”>This page is protected. Please enter the password:</p>
<input type=”password” name=”post_password” class=”password-input” placeholder=”Enter Password” />
<button type=”submit” class=”submit-button”>Unlock</button>
</div>
</form>’;
}
add_filter( ‘the_password_form’, ‘custom_password_form’ );
5. Click Save.
The password form will now display a custom message, input box, and button.
Step 3: Style the Form with CSS
Now that we’ve customized the form structure let’s style it with CSS.
Steps to Add Custom Styles
- Go to Appearance > Customize.
- Click Additional CSS.
- Add this CSS code:
.custom-password-form {
text-align: center;
background: #f7f7f7;
padding: 20px;
border-radius: 8px;
max-width: 400px;
margin: 20px auto;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.custom-message {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.password-input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
.submit-button {
background: #0073aa;
color: #fff;
border: none;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
margin-top: 10px;
}
.submit-button:hover {
background: #005b8f;
}
4. Click Publish.
The password form will have a modern look with a clean layout, bold text, and a styled button.
Step 4: Customize the Password Form Using a Plugin
If you don’t want to edit the code, you can use a plugin to customize the password protected form.
Best Plugins for Customizing Password Protected Forms
- Passster – Password Protection
- Allows complete customization of password forms.
- Supports styling options and custom messages.
- Password Protected Plugin
- Provides simple settings for customizing password pages.
- Content Control Plugin
- It helps restrict content and customize password forms.
Step 5: Test the Customized Form
After customizing the password form, test it to ensure it works properly.
- Open a Private/Incognito Window
- Visit the password-protected page in a private browser window.
- Enter the Password
- Check if the form displays correctly.
- Submit the Form
- Verify that it unlocks the content smoothly.
If everything works as expected, you’re good to go!
FAQs
1. Can I change the “Protected” text on the password page?
Yes! Use this code in functions.php to change it:
function change_protected_title($title) {
return ‘🔒 ‘ . $title;
}
add_filter(‘protected_title_format’, ‘change_protected_title’);
This will add a 🔒 lock icon before the protected page title.
2. Can I customize the error message when the wrong password is entered?
Yes! Add this code to functions.php:
function custom_password_error() {
return ‘<p style=”color: red;”>Incorrect password. Please try again.</p>’;
}
add_filter( ‘the_password_form’, ‘custom_password_error’ );
3. Will this work with all WordPress themes?
Yes! However, some themes may override styles. If that happens, use !important in your CSS to force styles.
Conclusion
Customizing the password protected form in WordPress makes it more user-friendly, visually appealing, and aligned with your brand. You can edit it using functions.php, style it with CSS, or use a plugin for easy customization.