Customizing and Styling the Password-Protected Form in WordPress

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:

<?php
add_filter( 'the_password_form', 'custom_password_form' );

function custom_password_form() {
    global $post;
	$label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID );

    $o = '<form class="protected-post-form" action="' . get_option('siteurl') . '/wp-pass.php" method="post">
' . __( "THIS IS YOUR NEW PASSWORD INTRO TEXT THAT SHOWS ABOVE THE PASSWORD FORM" ) . '
<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" ) . '" />
</form><p style="font-size:14px;margin:0px;">∗EXTRA TEXT CAN GO HERE...THIS WILL SHOW BELOW THE FORM</p>
';

	return $o;
}
?>

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 lets you amend it with the WordPress hook system so that 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 that 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 is your intro text, which 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. You can even delete everything between those quotations and just have nothing displayed up there at all.

Step 3: Change the Password Input Field Label

The default label shown to the left of the input field is Password. You can change it to whatever you'd like it 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 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 function's code, I added the button CSS class to the submit button. I did this because I wanted all the buttons on my client's site to look the same. Uniformity in a site is key. Here's the CSS I used:

.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;
}

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 result.

Here are a couple of plugins or add-ons that you could use to customize the password-protected form in WordPress.

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 you can use alongside these builders to further enhance the design capabilities of your website.