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.

The default PPWP Sitewide Login Form

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

You can customize our login form via WP Customizer in both Password Protect WordPress Free version 1.4.5 or greater and Password Protect WordPress Pro version 1.2.0.1 or greater. However, there are some advanced options available in the Pro version only. Learn what our Lite & Pro have to offer.

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

ppwp-customize

Choose PPWP Sitewide Login 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

 Headline

This option allows you to add a headline or description above the password form via WYSIWYG Editor.

The style set under Editor will override the following values, including Font Size, Font Weight, and Color.

Our plugin displays no headline by default.

ppwp-password-form-headline

Customize Background

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

For PPWP Free

Background customization option is available in Pro version only. If you’re using PPWP Free, please change the background using WordPress custom CSS.

To do so, go to Appearance >> Customize from your admin dashboard.

ppwp-customize

Navigate to the Additional CSS section and input the code snippet below.

/* Change the background image */ 
.ppwp-sitewide-protection {
	background: url(your-image-URL);
}

Customize Password Form

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

Form

Label

  • 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 Description below Form

Since PPWP Pro version 1.3.0.1, you can add a description below the password form and submit button via WYSIWYG Editor.

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.

Customize Password Form via Coding

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.

  • For PPWP Pro version 1.3.0 and greater
add_filter( 'ppw_custom_entire_site_login_form', 'custom_login_form' );
function custom_login_form() {
    //Check condition to show error message
	$is_wrong_password = isset( $_GET['action'] ) && $_GET['action'] === 'ppw_postpass' && isset( $_POST['input_wp_protect_password'] ) ? 'display: block' : 'display: none';  

	return '
	<div class="pda-form-login">
        <!--Add your own logo here-->
        <form action="?action=ppw_postpass" method="post">
        <label for="">Password</label>
        <input class="input_wp_protect_password" type="password" id="input_wp_protect_password"  name="input_wp_protect_password">
        <!--Customize the error message below-->
	<p id="ppw_entire_site_wrong_password" style="' . $is_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>
    ';
}
  • For PPWP Pro version 1.1.3 and lower
add_filter( 'ppw_custom_entire_site_login_form', 'custom_login_form' );
function custom_login_form() {
    return '
	<div class="pda-form-login">
	<!-- Add your own logo here -->
	<form action="?action=ppw_postpass&wrong_password=true" method="post">
        <label for="">Password</label>
        <input class="input_wp_protect_password" type="password" id="input_wp_protect_password"  name="input_wp_protect_password">
        <!-- Customize the error message below -->
	<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>
    ';
}

Please note that all values are modified with custom codes under functions.php file override the ones set by WordPress Customizer.

How about adding other assets?

You can even add your own script and styling into our login page’s header and footer using the following actions:

  • add_action( ‘ppw_custom_header_form_entire_site’ );
  • add_action( ‘ppw_custom_footer_form_entire_site’ );

For example, to add custom CSS or JS files into the page header, insert this code snippet on your (child) theme functions.php:

<?php
//Add custom styling and script into page header
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>
<?php
}
?>

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;
}

To add the default WordPress footer to our sitewide password login page, please add the following code snippet at the bottom of your (child) theme functions.php file.

For PPWP Free

add_action('ppw_custom_footer_form_entire_site', 'ppwp_get_footer');
function ppwp_get_footer()
{
	wp_enqueue_style('default_css', get_template_directory_uri() . '/style.css'); //Load theme default style
	get_footer(); //Get WordPress default footer 
}

For PPWP Pro

add_action('ppwp_sitewide_footer', 'ppwp_get_footer');
function ppwp_get_footer()
{
	wp_enqueue_style('default_css', get_template_directory_uri() . '/style.css'); //Load theme default style
	get_footer(); //Get WordPress default footer 
}
Lasted updated on September 17, 2020