Do you want to learn how to customize a password-protected page in WordPress?
Customizing locked pages allows you to encourage more visitors to become subscribers of your site. Plus, it’s a great way of utilizing the space to promote other services or pages on your site.
In this post, we’ll walk you through the steps to customize your WordPress password-protected pages.
When Should You Customize a Password Protected Page in WordPress?
There are various scenarios where using a custom password-protected page is a good idea.
For example, if your site is still under construction, locking your pages with passwords allows only authorized people to access these for testing purposes. Another common situation where password-protected pages come in really handy is when you want to restrict some of your pages to paid subscribers only.
The default WordPress password-locked page has a very basic design that has a password field and has a design based on your WordPress theme. This is what a standard WordPress password locked page looks like:
Unfortunately, it’s not easy to add additional elements like custom buttons, widgets, forms, and other elements using the default WordPress editor.
But to make this considerably easy, we’re going to use a special plugin for WordPress called SeedProd. As the best page builder plugin for WordPress, SeedProd allows you to create password-locked pages that look super awesome without requiring any code!
How to Customize a Password Protected WordPress Page with SeedProd
To customize your password-protected page in WordPress, simply follow these steps:
- Step 1: Install SeedProd
- Step 2: Make a Coming Soon Page
- Step 3: Customize the Password Protected Page
- Step 4: WordPress Password Protected Page Settings
- Step 5: Publish Your Password Protected WordPress Page
Step 1: Install SeedProd
SeedProd is a drag and drop landing page builder for WordPress. It comes with built-in templates that make it extremely easy to customize your pages.
So, we’re going to begin by installing the plugin. Once it’s installed, make sure to copy your license key. You can find your SeedProd account license key by going to your SeedProd dashboard and clicking on the Downloads tab. Then, scroll down to find the License Key field and copy it.
Now, open your WordPress admin dashboard and head over to SeedProd » Settings. Here, enter your License Key and click on the Verify button.
Step 2: Make a Coming Soon Page
SeedProd has a coming soon mode which comes with settings for access restrictions. With these access restrictions, you can easily set a password for your page.
To build a coming soon page with SeedProd, click on the SeedProd menu item within your WordPress sidebar.
Now, click on the Set up a Coming Soon Page button.
Here, you’ll find a huge variety of templates to choose from. You can pick any that you like, but we’re going to use the Conference Webinar Page template for this example.
After selecting the theme, you should now see the SeedProd drag and drop builder which lets you customize the page in all kinds of ways.
Step 3: Customize the Password Protected Page
When you’ve selected your template, you can customize your password-protected page using dozens of different kinds of blocks visible on the left-hand pane.
You can simply drag and drop these blocks on the right to add a new element such as a form, social media icons, giveaway contests, and more.
Since we want to add a password field that allows users to access the the locked content, we’re going to drag and drop the Custom HTML onto the page.
Now, click on the block on the live editor to access its settings. Here, paste this code in the Custom HTML field:
Note: Make sure to enclose the above code in square brackets when pasting in the Custom HTML field.
The code above creates a standard password field, but you’ll need to slightly edit it in order for it to work perfectly on your site. Here’s what each of the three parts of this code means:
- msg: This tag specifies the text that appears within the password field. By default, this is set to “Enter passcode”. You can edit this text if you’d like to, but it’s not necessary.
- button-txt: This tag controls the text that appears on the button that leads to your password-protected page. Again, you can edit this text but it’s not required.
- return: Within this tag, you need to provide the URL of the page you want users to access with a password. Make sure to enter the correct link.
In our example, we customized the values in the code like this:
Note that you won’t see the password input field until you preview it. But before we do that, we need to configure a few more settings to set up password protection.
Make sure to click on the Save button on the top-right to save your changes up until this point.
Step 4: WordPress Password Protected Page Settings
On your SeedProd page builder, click on the Page Settings tab (3rd option from the top-left). Now, select Access Control from the menu on the left. Then, within the Bypass URL field, you can enter any password that you want to set up.
It’s important to note that the password you choose will also be your bypass URL. This means that if you want a user to directly access this page, you can simply give them the bypass URL to it.
You’re almost there! Scroll down to the Include/Exclude URLs section and click on the Include URLs options. Then, paste here the link to the actual page that you want to be hidden behind a password.
And now it’s time to publish and activate our new custom password-protected page!
Step 5: Publish Your Password Protected WordPress Page
Now that we’ve customized the page and configured the settings to our liking, we can move ahead to publishing it.
Click on the downward-pointing arrow next to the Save button to expand the menu and then press Publish.
Now, return to your SeedProd dashboard and press the toggle switch so that the status reads Active under the Coming Soon Mode.
If you’d like to customize a password-protected form page, then see the steps below where we use WPForms to accomplish this.
How to Customize Password-Protected Form Pages
You can also create and customize a password-locked form page on your WordPress site. This is very useful if you want to restrict form access to only logged-in users or those that have a password.
For details, please see this guide on how to build a password-protected form.