How to Customize Protected Post Password Form

Here’s our default form for password protected content. It’s likely that you want to customize the form so that it looks nicer and closer to your website themes

First of all, let’s have a look at the default form’s HTML structure.

In order for our Password Protect WordPress plugin to work properly, the protected password requires the following:

  1. An HTML <form> that wraps our child elements is required
  2. The form’s action should be set to “ppwp_password_action” in order for our plugin to handle the form request properly.
  3. Section #3 is where you can customize the password input, submit button and form text. You can even add new text and images that you would like to. Please keep in mind the password input’s name must be “post_password
  4. Finally, a hidden input that contains the post’s ID is required as well.

There are 2 ways to customize protected post/page password form with our Password Protect WordPress plugin.

#1 Using ppwp_customize_password_form hook

Our plugin makes it easy for you to customize section #3 by providing you with ppwp_customize_password_form hook

The hook will provide us with 3 parameters, i.e. $element – the default element defined by the plugin; $post_id – the current protected post/page that the user is trying to access its content and lastly $wrong_password_message – the default message for wrong password.

In our custom function, we’ve added some div wrapper and GIF image to improve the UI. The 2 required elements password input (with the input name is post_password) and submit button still remains unchanged at line 16 and 19. Here is our custom password protected form, it looks better now, doesn’t it?

#2 Using the_password_form WordPress hook

Our Password Protect WordPress plugin also supports the default WordPress hook, i.e. the_password_form, to customize the protected post password form. Now you can use the same form to password protect your private content across your website.

When using the_password_form hook, please keep in mind that we will replace the whole password protected form’s HTML structure. You have to follow our requirements mentioned above in order for our plugin to work like a charm with your custom function.

  1. The form action must be ppwp_password_action
  2. The input password’s name must be post_password
  3. The input hidden’s name post_id must be added

The following snippet gives you an example of how we apply these above rules.

The 1st requirement is applied at line 6 where we configure form action to be  get_option( siteurl ) . /wp-login.php?action=ppwp_password_action

The 2nd requirement is implemented at line 23 where our input password’s name is post_password

The 3rd one is found at line 24

We’ll have the same cool protected post password form as per the first method.

Custom Protected Post Password Form

 

Updated for version 1.0.6.2

From version 1.0.6.2, we’ve added an error message when users enter a wrong password. In order to display it on your own custom password form, please use the third parameter $wrong_password_message. We’ve also added a new ppwp_text_for_entering_wrong_password hook so that you can customize your own error message.

So, what are you waiting for? Get our Password Protect WordPress plugin now!

Lasted updated on November 27, 2018