How to Customize a Password Protected Page in WordPress
Do you want to customize password-protected pages on your WordPress website? Doing so keeps your branding consistent across your entire site, allowing you to use the space to promote other pages.
But changing the design of locked pages isn’t easy without a developer. So in this article, we’ll explain how to customize a password protected page in WordPress without writing a single line of code.
We’ll cover several different methods in this tutorial. Click any of the links below to jump straight to the section you need:
- Customize Password Protected Pages with SeedProd
- Customize Protected Form Pages with WPForms
- Customize Protected Form Pages in SeedProd
- Customize Default Password Pages with CSS Hero
First, let’s explore why and when to customize password-protected pages in WordPress.
When to Customize Password Protected Pages?
There are several reasons for wanting to customize password-protected pages. The most common reason is to hide content from the public.
You might want to hide your WordPress site until it’s ready or only give clients access to preview your work.
You might have a membership website and want to password protect content with a WordPress form, so only subscribers can access it.
Whatever the reason, the result is a page where a password is required to gain access.
Yet, when you lock a page or create protected posts in WordPress, the design is pretty basic.
You’ll see a simple page with a box for entering a password and a submit button. The design usually reflects the WordPress theme you’re using. Aside from that, there isn’t much you can do to make it more interesting.
Here’s an example of what we mean:
If you edit and customize protected pages in WordPress, you can enhance your design with the following features:
- Your brand’s logo to increase trustworthiness and keep your branding consistent.
- A custom message welcoming users and telling them how to access your protected content.
- Social media buttons to encourage users to follow your social channels.
- Contact forms for users to get in touch if they have issues.
- Links to other areas of your website to promote your products and services.
Instead of having a basic page, you can turn locked pages into the perfect place to engage visitors, improve SEO, and generate leads.
How to Customize Password Protected Pages
Customizing password-protected WordPress pages isn’t easy if you’re not tech-savvy. Usually, you’d need a developer to edit pages in WordPress with the changes you need.
We understand that hiring expert help isn’t an option for many site owners. So, we’ll walk you through 4 methods to customize a password protected page in WordPress, with the help of 3 easy-to-use WordPress plugins.
1. Customize Password Protected Pages with SeedProd
The first method uses SeedProd, the best WordPress landing page builder, with coming soon, and maintenance mode functionality.
SeedProd comes with built-in Coming Soon and Maintenance Mode pages you can customize with its powerful drag and drop page builder. It lets you customize every aspect of your landing pages in minutes with no coding required.
Plus, it includes access controls that let you restrict access to and password protect pages. This ensures only the people you want can see the pages you’re working on.
Let’s look at the steps to edit and customize protected pages in WordPress with SeedProd.
If you’d prefer written instructions, just keep reading.
Step 1: Create a Coming Soon or Maintenance Mode Page
The first step is to create a coming soon or maintenance mode landing page using SeedProd. Both of these landing pages include access controls for restricting access to your website.
For this tutorial, we’ll show you how to customize a password protected coming soon page.
To do that, click the SeedProd icon from your WordPress admin area. This will take you to the SeedProd dashboard overview, where you can add new pages and edit them in the customizer.
After that, click the Set Up a Coming Soon Page button.
Step 2: Choose a Landing Page Template
After clicking to set up your coming soon page, you’ll see several templates you can use as a starting point for your page design.
For our example, we’ll use the Swipe coming soon template. To launch the template, hover your mouse over the thumbnail and click the tick icon.
Your coming soon page template will now appear in the drag and drop page builder, where you can customize the page to suit your brand.
Step 3: Customize Your Protected Page Content
SeedProd’s page builder comes with various content blocks. This makes it easy to customize your page without any prior design experience.
You can choose from standard blocks such as headlines, buttons, images, videos, dividers, etc.
Or you can use landing-page specific blocks to drive more leads and conversions, such as:
- Giveaways – Add a RafflePress giveaway to your page with the ready-made giveaway block.
- Contact Forms – Automatically add contact forms made with WPForms to your landing page.
- Optin Forms – Boost your leads with sign up forms that come with custom templates and styles
- Countdown Timers – Create a sense of urgency with live countdowns.
- Social Buttons – Grow your social media followers with social profile and sharing buttons.
- And much more.
You can add any of these features to your page by dragging them from the left-hand panel to your live page preview on the right.
Then you can click on any page element to edit the content, choose a custom block template, and add advanced customizations.
If you like, you can include a password input field on your page, so users have to type a password for access.
To do that, drag the Custom HTML block onto your live page editor.
Then click the block to edit the content. Now paste this shortcode seed_bypass_form into the content editor with square brackets on either side.
You won’t see the password input field until you preview your live page. Then users will be asked to “please enter your password”.
Step 4: Publish Your WordPress Custom Password Protected Page
Once you’re happy with the customizations for your protected WordPress page, it’s time to publish it.
To publish a password protected page in WordPress using SeedProd, click the down arrow next to the Save button, then click Publish.
You’ll then see a lightbox popup telling you that your page is published. You can then click the See Live Page button to preview your changes.
To make your page live, head back to your SeedProd dashboard and under the Coming Soon Mode section, switch the Inactive toggle to Active.
Your custom password-protected page is now live!
2. Customize Protected Form Pages with WPForms
It’s also possible to customize password-protected form pages in WordPress. Then anyone trying to access specific forms on your site will have to enter a password.
Let’s look at the steps needed to customize protected forms next.
First, make a password-protected form using these instructions. Then make sure you’ve activated the Form Pages addon.
You can do that by navigating to WPForms » Addons and making sure the Form Pages addon status is set to Active.
Next, head to WPForms » All Forms and click Edit on the form you created in the previous step.
Then click the Settings tab and choose the Form Pages option. On the right-hand side, check the Enable Form Pages Mode box, and further settings will appear.
Here you can enter a title and message for your form page and choose a custom permalink. Then you can add a custom logo image and choose a color scheme that matches your site’s branding.
Remember to click the Save button to preserve your changes.
Now when you navigate to that particular form’s page, you’ll see a modern, customized password-protected form with its own dedicated page.
3. Customize Protected Form Pages in SeedProd
Another way to customize password-protected form pages in WordPress is to use a combination of SeedProd’s landing page builder and WPForms.
First, create a password-protected form using the instructions linked earlier, then in the SeedProd pages overview, click the Edit Page button in the Coming Soon Page section.
Once the page builder opens, click the Page Settings tab at the top of your screen and click the Access Controls section. This is where you can restrict access to certain pages and single posts and set your user roles.
You can also set bypass rules so only specific IP Addresses can view your private content.
Next to the Include/Exclude URLs heading, click the Include URLs option, and paste the URL of your protected form page. Now click the Save All Changes button.
Once you’ve done that, click the Design tab at the top of the page and drag the Contact Form block onto your live page preview.
Now, click the block and choose your password-protected form in the drop-down menu. This will add your form to the page and show a password input field for users to access.
From now on, when users navigate to your form page, they’ll have to enter a password to unlock it.
4. Customize Default Password Pages with CSS Hero
Our final solution for customizing passowrd protected pages is to edit your CSS with a visual editor plugin. This means you can edit the CSS of any page without having to edit the code manually.
For this method, we’re using CSS Hero, one of the best plugins for easily customizing your WordPress site by pointing and clicking.
CSS Hero is ideal for customizing the standard page you see when password protecting WordPress using the default WordPress visibility option.
So instead of a password page like the one below, you can pinpoint each area individually and change the look.
To do this yourself, get CSS Hero here and install the plugin on your website. Then navigate to your password-protected page in WordPress.
Now from the WordPress admin bar at the top of your page, click the Customize with CSS Hero option.
This will reveal a simple point-and-click visual editor you can use to edit and customize your WordPress page.
For example, to customize the background color for the header area, simply click it to open the options panel on the left-hand side. Then you can choose a color from the color picker tool.
To change your background color, click your page’s background and choose a color or gradient from the list. You can also add your background image.
The only drawback with using CSS Hero is that you can’t add crucial elements like contact forms, signup forms, social buttons, and so on. For that, we suggest using the SeedProd method above.
Continue customizing your page, clicking different elements, and adding custom colors and fonts.
Then when you’re happy with your design, click the Save and Publish button and click the Quit icon in the top-right corner of your screen.
This will take you to your newly edited password protected page, complete with its’ custom design.
There you have it!
Customizing Password Protected Pages is Easy
While customizing protected pages in WordPress can seem like a daunting task, it doesn’t have to be. Using the methods above, you can create stunning locked pages without having to write a single line of code.
And with SeedProd’s handy page builder, you won’t have to start from scratch and can include essential lead generation elements like optin forms to grow your business.
So what are you waiting for?