Customize WordPress Password Protected Entire Site Login Page

Now, you have protected your entire WordPress site, you’d probably like to customize the password-protected “login” page according to your website’s theme. For example, you may want to change our logo to yours; add custom statements or Terms and Conditions.


In this article, we will show you how to customize our sitewide password form using WordPress Customizer.

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


Choose PPWP Sitewide Protection Form object in the left-hand sidebar.

This option allows you to change or disable the default logo as well as provide a password form headline.

Logo Image


  • 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.


Customize Background

This option allows you to display a background image or color under your password form.

Customize Password Form

This option enables you to style or hide password form background, add a placeholder, customize password label as well as showing password reveal button.



  • Change the text displaying above password input field
  • Edit using WYSIWYG Editor
    • The style set under Editor will override the following values, including Font Size, Font Weight, and Color.

Password Reveal Button

This button allows users to see what they are typing.

Enable Password Reveal Button to show it under password form.

Customize Button

You’re able to modify the button style, from the label, text color to background color.

Customize 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.

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

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.

For PPWP Pro version 1.1.3 and lower

Step 1: Go to your (child) theme folder and open the functions.php

Step 2: Add the following code snippet to the bottom of the file content. Those in red must not be removed in order for our plugin’s function to work properly.

add_filter( 'ppw_custom_entire_site_login_form', 'custom_login_form' );
function custom_login_form() {
    return '
	<div class="pda-form-login">

	     <!--Customize your own logo-->

	     <!--parameter action=ppw_postpass to bypass cache-->
	     <!--parameter wrong_password=true to show message wrong password-->
	     <form action="?action=ppw_postpass&wrong_password=true" method="post">
		<label for="">Password</label>
		<!--Required input tag with name="input_wp_protect_password"-->
		<input class="input_wp_protect_password" type="password" id="input_wp_protect_password"  name="input_wp_protect_password">
                <!-- Customize your error message here -->
		<p id="ppw_entire_site_wrong_password" class="ppw_entire_site_password_error">' . esc_html__( apply_filters( PPW_Pro_Constants::HOOK_CUSTOM_MESSAGE_WRONG_PASSWORD_ENTIRE_SITE, 'Please enter the correct password!' ), 'password-protect-page' ) . '</p>
	        <input type="submit" class="button button-primary button-login" value="Login">

             <!-- Add your T&C or custom statements here -->

How about adding other assets?

You can even add your own script and styling into the page header with the following filter:

add_action( 'ppw_custom_header_form_entire_site', 'load_other_assets' );
function load_other_assets() {
   <!-- Add your child theme style.css -->
   <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" type="text/css"/>

   <!-- Add your own assets here -->
   <link rel="stylesheet" href="your_css_file_url.css" type="text/css"/>
   <script type='text/javascript' src='your_js_file_url.js'></script>

How to set a background image for site-wide password protection login page

Add the following CSS into your (child) theme style.css file

body.ppwp-sitewide-protection {
    // change the bg image to your own 
     background: url( no-repeat center;
Lasted updated on March 31, 2020