Overview

For developers and advanced users who need complete control over the password form’s appearance and functionality, PureDevs WP Locker provides a template override system. This allows you to customize every aspect of the password entry page without modifying the plugin’s core files.

Template overrides follow WordPress best practices, ensuring your customizations are preserved during plugin updates.

Advanced Feature

This feature requires knowledge of HTML, CSS, and PHP. If you’re not comfortable with code, consider hiring a developer or using the built-in customization options instead.

How Template Override Works

The template override system works similarly to WooCommerce template overrides:

  1. The plugin includes a default template file in its directory
  2. You can copy this file to your theme directory
  3. The plugin checks your theme for the template first
  4. If found, your custom template is used instead of the default
  5. Plugin updates won’t overwrite your customizations
Update Safe

Because your custom template lives in your theme directory (not the plugin directory), it won’t be affected when you update the plugin to a new version.

Setup Instructions

Follow these steps to set up a template override:

Step 1: Create Theme Directory

First, create a new directory in your active theme to store the template:

  1. Access your WordPress installation via FTP, SFTP, or cPanel File Manager
  2. Navigate to /wp-content/themes/your-theme-name/
  3. Create a new folder named puredevs-wp-locker

The complete path should be: /wp-content/themes/your-theme-name/puredevs-wp-locker/

Step 2: Copy Template File

Next, copy the default template file from the plugin to your theme:

  1. Navigate to /wp-content/plugins/puredevs-wp-locker/includes/templates/
  2. Locate the file named password-form-template.php
  3. Copy this file to your theme’s puredevs-wp-locker folder

The final path should be: /wp-content/themes/your-theme-name/puredevs-wp-locker/password-form-template.php

Step 3: Customize Template

Now you can edit the template file in your theme directory:

  1. Open password-form-template.php from your theme directory
  2. Modify the HTML, CSS, and PHP as needed
  3. Save your changes
  4. Test the password page in an incognito browser window
Success

Once the template file exists in your theme directory, the plugin will automatically use it instead of the default template.

Template Structure

The default template includes several important elements that should be preserved for proper functionality:

Essential Elements

These elements are required for the password form to work correctly:

  • Form Element: The <form> tag with proper method and action attributes
  • Password Input: An input field with name="wp_locker_password"
  • Submit Button: A submit button or input to trigger form submission
  • Nonce Field: WordPress security nonce (if included in original template)

Customizable Elements

You can freely modify these elements:

  • HTML structure and layout
  • CSS styles and classes
  • Form heading and messaging
  • Background images or colors
  • Typography and fonts
  • Additional HTML elements (logos, images, etc.)
Important

Do not remove or rename the password input field’s name attribute. The plugin relies on name="wp_locker_password" to process the submitted password.

Customization Examples

Add your company logo above the password form:

<div class="logo-container">
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="Company Logo">
</div>

Example 2: Custom Styling

Add custom CSS within the template:

<style>
    .password-form {
        max-width: 400px;
        margin: 100px auto;
        padding: 30px;
        background: #f5f5f5;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .password-input {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
</style>

Example 3: Additional Information

Add help text or contact information:

<div class="help-text">
    <p>Need access? Contact us at:</p>
    <p>Email: <a href="mailto:support@example.com">support@example.com</a></p>
    <p>Phone: (555) 123-4567</p>
</div>

Using Theme Styles

You can integrate the password form with your theme’s existing styles:

Enqueuing Theme Styles

Include your theme’s stylesheet in the template:

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

Using Theme Classes

Apply your theme’s existing CSS classes to form elements:

  • Use theme button classes for consistent button styling
  • Apply theme input classes for form fields
  • Use theme container classes for layout consistency

Child Theme Usage

If you’re using a child theme, place the template override in your child theme directory:

/wp-content/themes/your-child-theme/puredevs-wp-locker/password-form-template.php

Best Practice

Using a child theme for customizations (including template overrides) is strongly recommended. This protects your customizations from being overwritten when the parent theme is updated.

Testing Your Template

After creating or modifying your template override, thorough testing is essential:

Testing Checklist

  • Functionality: Verify password submission works correctly
  • Correct Password: Test that correct password grants access
  • Incorrect Password: Verify error handling for wrong passwords
  • Responsive Design: Test on mobile devices and tablets
  • Cross-Browser: Check Chrome, Firefox, Safari, and Edge
  • Validation: Ensure HTML is valid and accessible

Testing Procedure

  1. Save your template file
  2. Clear all caches (browser, WordPress, server)
  3. Open an incognito/private browser window
  4. Navigate to your site’s homepage
  5. Verify your custom template is displayed
  6. Test password submission functionality
  7. Check responsive behavior on different screen sizes

Troubleshooting

Template Not Loading

  • Verify the folder name is exactly puredevs-wp-locker (case-sensitive)
  • Verify the file name is exactly password-form-template.php
  • Check file permissions (should be 644)
  • Clear all caching plugins
  • Ensure the template is in the active theme directory

Password Form Not Working

  • Check that the password input has name="wp_locker_password"
  • Verify the form method is POST
  • Ensure submit button is inside the form tags
  • Check for PHP errors in your error log
  • Validate HTML structure is correct

Styling Issues

  • Check for CSS conflicts with theme styles
  • Use browser developer tools to inspect elements
  • Ensure CSS specificity is adequate to override defaults
  • Verify stylesheet is loading correctly

White Screen or PHP Errors

  • Check PHP syntax in your template file
  • Enable WordPress debug mode to see error messages
  • Verify PHP version compatibility
  • Remove template file to restore default if needed

Reverting to Default Template

If you want to return to the default password form template:

  1. Access your theme directory via FTP or File Manager
  2. Navigate to puredevs-wp-locker folder
  3. Rename or delete password-form-template.php
  4. The plugin will automatically use the default template again
Backup Recommendation

Instead of deleting, consider renaming your custom template to password-form-template.php.backup. This preserves your work for future reference or restoration.

Best Practices

Version Control

  • Keep a backup of your custom template
  • Use version control (Git) to track changes
  • Document your customizations for future reference

Code Quality

  • Follow WordPress coding standards
  • Comment your code for clarity
  • Use proper escaping and sanitization
  • Validate HTML and CSS

Maintenance

  • Test after WordPress updates
  • Test after theme updates
  • Review when plugin updates include template changes
  • Keep template synchronized with plugin updates if needed

Performance

  • Optimize images used in template
  • Minimize CSS and JavaScript
  • Avoid loading unnecessary resources
  • Test page load speed