Here’s our default form for password protected content. It’s likely that you want to customize the password protected 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 Pro plugin to work properly, the protected password form requires the following:
- An HTML <form> that wraps our child elements is required
- The form’s action should be set to “ppwp_password_action” in order for our plugin to handle the form request properly.
- 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”
- Finally, a hidden input that contains the post’s ID is required as well.
There are 2 ways to customize password protected form with our Password Protect WordPress Pro 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.
You should copy and put the following code snippet on your (child) theme functions.php file.
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 when entering wrong passwords.
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?
Show & Hide Password
Since our Pro version 1.1.0, you will be able to add a show/hide password option by adding a checkbox below the password input field (line 19 on the snippet above)
<input name="post_password" id="' . $label . '" type="password" class="form-control" placeholder="Password" required autofocus /> <input id="ppw_' . $post_id . '" onclick="ppwShowPassword(' . $post_id . ')" type="checkbox"> Show password <input class=" btn-primary btn-block" name="Submit" type="submit" value="' . esc_attr__( "Submit") . '" />
#2 Using the_password_form WordPress hook
Our Password Protect WordPress Pro 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.
- The form action must be ppwp_password_action
- The input password’s name must be post_password
- 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.
Updated for version 18.104.22.168: Customize Wrong Password Error Message
From version 22.214.171.124, 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 Pro plugin now!