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 login form using WordPress Customizer.
- Choose Pre-designed Themes
- Customize Logo
- Customize Background
- Customize Password Form
- Customize Description below Form
- Customize Button
- Customize Error Message
- Use Custom Code
- Add Custom CSS & JS Assets
Upon activation, go to Appearance > Customize in your WordPress dashboard.
Choose the PPWP Sitewide Login Form object in the left-hand sidebar.
Choose Pre-designed Themes
Our plugin gives you 4 pre-designed themes to freely experiment with your website.
Instead of customizing password form elements one by one, now you only need 1 click to have an attractive portal.
Customize Logo
This option allows you to change or disable the default logo as well as providing a password form headline.
Logo Image
Headline
This option supports adding 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.
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 the 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.
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 the password reveal button.
Form
Label
- Change the text displayed above the 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 display what they are typing.
Enable Password Reveal Button to show it under password form.
Remember Me
This button lets users keep the cookies after browser closing.
Once users check this box, they can re-access your content multiple times until their cookies expire. You can modify the cookie expiration time on the plugins’ settings page.
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.
For Free version 1.7.4 or greater
At the moment, you can add a description above or below the sitewide login form by adding the following code snippets to your (child) theme’s functions.php file.
- Description above form
add_filter( 'ppw_sitewide_above_password_form', 'add_custom_desc' );
function add_custom_desc() {
?>
Your-custom-description
<?php
}
- Description below form
add_filter( 'ppw_sitewide_below_password_form', 'add_custom_desc' );
function add_custom_desc() {
?>
Your-custom-description
<?php
}
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 the image below.
The style set under WYSIWYG Editor will take higher priority over 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 customization 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 style 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 into 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 style.css from your child theme --> <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 } ?>
Set a background image for the sitewide 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;
}
Show the default WordPress footer
To show the default WordPress footer on our sitewide login page, add the following code snippet to 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_scripts('my_js', get_template_directory_uri() . '/main.js'); // Load main.js from the root theme
get_footer(); //Get WordPress default footer
}
For PPWP Pro
add_action('ppwp_sitewide_footer', 'ppwp_get_footer');
function ppwp_get_footer()
{
wp_enqueue_scripts('my_js', get_template_directory_uri() . '/main.js'); // Load main.js from the root theme
get_footer(); //Get WordPress default footer
}
Use Internal CSS
Using internal CSS might help improve the site speed in some cases. To do so, add the following code snippet to your (child) theme functions.php file.
For PPWP Free
add_filter('ppw_sitewide_external_css', function () {
return '';
});
add_action('ppw_sitewide_custom_internal_css', function () {
include PPW_DIR_PATH . 'includes/views/dist/ppw-form-entire-site.css';
});
Hide password form until a checkbox is ticked
If you want the password form to be hidden until users check a checkbox, e.g. accept the private policy, simply add the following code snippet to your (child) theme functions.php file.
For PPWP Free
add_action(
'ppw_sitewide_above_password_form_container',
function () {
?>
<div>
<input type="checkbox" id="customCheckbox" onclick="handleCheckbox()">
<label for="customCheckbox">Show password form</label>
</div>
<?php
}
);
add_action(
'ppw_custom_header_form_entire_site',
function () {
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
toggleSitewideForm(false);
});
function handleCheckbox() {
if (document.getElementById('customCheckbox').checked) {
toggleSitewideForm(true);
} else {
toggleSitewideForm(false);
}
}
function toggleSitewideForm(show) {
var form = document.getElementsByClassName('ppw-swp-form')[0];
if (!show) {
form.style.visibility = 'hidden';
} else {
form.style.visibility = 'visible';
}
}
</script>
<?php
}
);
Customize different login forms for different pages
By default, you’ll see the same login page when accessing any page URLs under a protected site.
What if you want to customize different login forms for different page URLs?
Simply add the following code snippet to your (child) theme’s functions.php file or Code Snippets plugin.
function custom_theme_inline_css()
{
$arr_post = array(
[
'post_id' => '539',
'logo' => 'your-logo-image-url',
'background' => 'your-backgorund-image-url'
],
[
'post_id' => "536",
'logo' => 'your-logo-image-url',
'background' => 'your-backgorund-image-url'
]
);
$result = '';
foreach ($arr_post as $post) {
if ($post['post_id']) {
$result = $result . '
.ppwp-sitewide-protection.post-' . $post['post_id'] . ' .ppw-swp-form-container .ppw-swp-logo {
background-image: url(' . $post['logo'] . ') !important;
}
.ppwp-sitewide-protection.post-' . $post['post_id'] . ' {
background-image: url(' . $post['background'] . ') !important;
}
';
} else {
$result = $result . '
.ppwp-sitewide-protection.tag-' . $post['tag_id'] . ' .ppw-swp-form-container .ppw-swp-logo {
background-image: url(' . $post['logo'] . ') !important;
}
.ppwp-sitewide-protection.tag-' . $post['tag_id'] . ' {
background-image: url(' . $post['background'] . ') !important;
}
';
}
}
echo '<style>' . $result . '</style>';
}
add_filter('ppwp_sitewide_footer', 'custom_theme_inline_css');
function ppwp_handle_sitewide_body_class($class, $passwords)
{
$value = get_queried_object();
if ($passwords !== false) {
if ($value->ID) {
return ' post-' . $value->ID;
} else {
return ' tag-' . $value->term_id;
}
}
}
add_filter('ppwp_sitewide_body_class', 'ppwp_handle_sitewide_body_class', 10, 2);
