Password Protect WordPress is one of the best plugins to apply authentication policies for WordPress website with the useful features. Besides that, it also offers us the ability to customize the Login Form. In this article, we’ll guide you the two easy ways to achieve it.
Idea
First of all, let’s have a look at the default login form’s HTML structure.
#1 is a fixed parent element that wraps our child elements.
#2 is a fixed action “ppwp_password_action” which the plugin defined where to handle the form request.
#3 is a place where we can customize our password input and submit button. We can also add here anything we want. Please keep in mind, the password input’s name must be “post_password”
#4 is a required hidden input that contains the post’s ID.
The plugin helps us to customize the #3 by defining the hook, namely ppwp_customize_password_form
Using ppwp_customize_password_form hook
In this part, we will use the ppwp_customize_password_form hook to decorate our login form.
The hook will pass us two parameters $element is default element defined by the plugin and $post_id is the current protected post/page which user is trying to access its content. In this function, we added some wrapper div and gif image to improve the UI. The two required elements password input (with the input name is post_password) and submit button still keep remain at line 16 and 19. Here is our custom Login Form, it’s better then, isn’t it?
How about some customers are using the WordPress hook, namely the_password_form to customize the WordPress Login Form? Good news is the Protect Password plugin also supports this hook.
Using the_password_form WordPress hook
When using the_password_form hook, you need to keep in mind that we will replace the whole Login Form’s HTML structure. These are some rules we need to follow in order to keep the Protect Password plugin can work like a charm with our custom code.
1. The login 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 will show us how we apply these above rules.
The #1 rule is applied at line 6, we configure form action to be get_option( ‘siteurl‘ ) . ‘/wp-login.php?action=ppwp_password_action
The #2 rule is implemented at line 23, our input password’s name is post_password
The #3 rule is easy to find out at line 24
And then, we have our cool login form.
[Updated for version 1.0.6.2]
From version 1.0.6.2 we added a error message when user entered a wrong password. In order to display it in your own login form, please use the third parameters $wrong_password_message. We also add a new hook ppwp_text_for_entering_wrong_password that you can customize the error message. Cool right?
So, what are you waiting for? Let’s rock and enjoy the Password Protect WordPress plugin.