Customize Individual Password Form with WordPress Customizer

Our Password Protect WordPress (PPWP) Pro allows you to customize password form messages under the plugin settings page. You’re able to customize the default form description as well as the wrong password error message.

But if you want more than just changing text and would like to see all your changes while editing, our built-in WordPress Customizer panel is just the ticket.

Requirements:

In this article, we’ll show you how to style the default individual password form using WordPress Customizer, including:

Upon activation, go to Appearance > Customize in your WordPress dashboard.

ppwp-customize

Choose Password Protect WordPress object in the left-hand sidebar.

ppwp-customize-password-protect-wp

There are 3 options for you to customize:

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.

Headline

  • Edit using WYSIWYG Editor
    • The style set under Editor will override the following values, including Font Size, Font Weight, and Color.
  • There is no headline by default.

ppwp-password-form-headline

Description

  • Edit using WYSIWYG Editor
    • The style set under Editor will override the following values, including Font Size, Font Weight, and Color.
  • The default value can be set under the plugin’s settings page.

ppwp-password-description

Password Label

Change the text displaying next to the password field.

ppwp-password-form

Password Reveal Button

Tick the checkbox to display the password reveal button, which allows users to see what they are typing.

ppwp-password-label

2. Error Message

This message will appear when user enters the wrong passwords. They will see a red line telling “Please enter the correct password!” as image below.

ppwp-error-message

The default message is set under the plugin’s settings page. You can override it in Error Message section.

The style set under WYSIWYG Editor will take higher priority than the following values, including Font Size, Font Weight, and Color.

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

Common mistakes

Please keep in mind that:

  • These values changed via WordPress Customizer are associated with the current activated theme. So if you are to change your theme, all the customizations will return to the default settings.
  • If you copy text from Microsoft Word or other website editors into this WYSIWYG Editor, you should clear its format before adjusting its style values such as color, font size or font-weight.

Lasted updated on March 20, 2020