Customize Password Form with WordPress Customizer

Our Password Protect WordPress (PPWP) Pro allows you to customize password forms in the plugin settings page. You’re able to adjust the default password message as well as displaying custom error messages.

You can also create a custom password form using WordPress Customizer now*. Values set in the customizer has higher priority than ones set under the settings page. Once you change or remove your current theme, password forms will display the default values set in the settings page.

* This function is available in Password Protect WordPress (PPWP) version 1.3.0 or greater.

In this post, we will show you how to create custom password forms using WordPress customizer.

  1. Head to Customize under Appearance in your WordPress dashboard
    ppwp-customize
  2. Choose Password Protect WordPress in the left-hand sidebar
    ppwp-customize-password-protect-wp
  3. Select the section you intend to update
    ppwp-customize-password-form

(1) Password Form – This option enables you to provide a password form headline, change the description, and customize the password label.

In the left-hand navigation menu, enter your headline under the Headline section. This headline will be placed below the page title and above the description. You can customize its font size as well as the font weight and the text color.
ppwp-password-form-headline

Scroll down to update the description. The default message is “This content is password protected. To view it please enter your password below:“. Similar to the Headline, you can also decide the font size, font weight, text color of the description.
ppwp-password-description

The last setting in the Password Form section comes to Password Label. The default label is “Password“. To let users view their passwords while filing in the form, simply click on Password Reveal Button.
ppwp-password-label

Once you complete the Password Form settings and hit Publish, the password form on your protected content will look something like this:
ppwp-password-form

You can click on the back button at the top of the page in order to move to the next setting option, Error Message.
ppwp-back-button

(2) Error Message – When users enter an incorrect password, they will be notified by an error message. They will see a red line telling “Please enter the correct password!”.
ppwp-error-message
You can replace this default message in the Error Message box with your own one. To change its color, move down to the Text Color section and hit the Set Color button.
ppwp-error-message

(3) Button – You’re able to modify the button style, from the label, text color to background color.
ppwp-password-button-label

Finally, click the Publish button to save your change.

Lasted updated on December 18, 2019