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.

Since our PPWP Pro version 1.1.3, you can do so with ease.

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-->
	     <h1><a></a></h1>

	     <!--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">
	     </form>

             <!-- Add your T&C or custom statements here -->
	</div>
    ';
}

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(https://passwordprotectwp.com/wp-content/uploads/2019/09/ppwp-custom-bg.jpg) no-repeat center;
}

How about adding other assets?

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

<?php
add_action( 'ppw_custom_header_form_entire_site', 'load_other_assets' );
function load_other_assets() {
?>
   <!-- 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>
<?php
}
?>
Lasted updated on November 18, 2019