How to Password Protect the Entire WordPress Page or Post (NOT Just The Content) With a Free Code Snippet

No plugins and completely free

In this article, we will see how to use a custom free PHP Code Snippet to create a password protected page or post in WordPress WITHOUT ANY EXTRA OR PAID PLUGINS. This code snippet is using native WordPress built password protection on pages and posts, so you do not need to install any plugin.

We will only be using a free Code Snippet plugin to place and run our code snippet in the simplest and safest way possible without modifying the theme.

WordPress’s built-in password protection is a quick and convenient way to secure content.

However, if you’ve ever used native password protection in WordPress, you might have noticed that it protects only the CONTENT of the page or the post. Other elements like the header, footer or sidebar will remain visible.

If you’re looking for a solution to password-protect the entire page, including its layout and design elements, this tutorial is for you.

In this post, you will see how to use a simple code snippet to protect the whole page on your WordPress site, without any paid plugins.

The Code Snippet

Here’s a free code snippet you can use to completely password-protect WordPress pages and posts. It redirects the user to a password form and displays the ‘Enter password’ field if the page requires a password.

add_action('template_redirect', 'protect_full_page_with_password');

function protect_full_page_with_password() {
    if (is_singular() && post_password_required()) {
        // Display the password form directly on the page
        echo get_the_password_form();
        exit; // Stop further processing to prevent page content from loading
    }
}

How to use this Password Protect Code Snippet?

Step 1: set the password using the native, built-in WP password protection

Edit the page or post in WordPress (NOTE: if you are using Elementor or another builder, you need to edit the page or the post in WORDPRESS editor).

In the Page settings, go to ‘Status’ and check the ‘Password protected’ box, then set the password for this page or post.

This native, built-in WordPress password will only protect and hide the content, not the entire page.

Step 2: install and activate the Code Snippet plugin

Go to your WordPress dashboard > Plugins > Add New. Then find the Code Snippet plugin and activate it.

Step 3: add a new Code Snippet

From your WordPress dashboard, go to Snippets > Add New. Give this Snippet any name you want so that you can easily find it later, for example ‘Custom Password Protection’ and paste the snippet from above. You can check ‘Only run on site front-end’ and click on ‘Activate’.

Step 4: test your code

You can now try to open the page and the code snippet should open the password field while hiding everything on the page, including headers, footers and all the other elements. You should now see ONLY the password form. After entering the correct password, you should be able to see the page.

Customizing the text in the password protection form

If you want to further customize the text in the password protection form and to use a custom message, you can additionally use another snippet.

This is the native, original message and form that would pop up to enter the password for the WordPress page:

You can modify this message and the form to look like something like this instead:

To do so, first, make sure to create a new code snippet for this text change and leave the previous one active.

Now go ahead and create a new snippet, paste the code below and change the message text in the code as necessary. For example, the code below will render the message ‘Please enter your password below to view this page:’ instead of a default WordPress message.

You can also change the label for the button, for example here we are using “Submit” and the length of the input password field in characters (for example “20” in our case).

Here is the additional code snippet:

add_filter('the_password_form', 'custom_password_form_message');

function custom_password_form_message($form) {
    global $post;
    $label = 'pwbox-' . ( empty( $post->ID ) ? rand() : $post->ID );
    
    $custom_message = '<p>' . __( 'Please enter your password below to view this page:', 'text-domain' ) . '</p>';
    $form = '
    <form action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" method="post">
        ' . $custom_message . '
        <input name="post_password" id="' . $label . '" type="password" size="20" maxlength="20" />
        <input type="submit" name="Submit" value="' . esc_attr__( "Submit" ) . '" />
    </form>';
    
    return $form;
}

How to style the password protection form using CSS

You can also go further and style the password protection form using CSS so that it looks a bit prettier and more aligned with your website. You can use some simple CSS within your Code Snippet.

Below is an example of the Code Snippet with some inline CSS. You can adjust the CSS formatting as necessary.

This code does two things:

1. It customizes the message and the password form text AND
2. It applies the inline CSS styling to the password form.

So you can use this code instead of the Code Snippet above that only customizes the message:

add_filter('the_password_form', 'custom_password_form_message');

function custom_password_form_message($form) {
    global $post;
    $label = 'pwbox-' . ( empty( $post->ID ) ? rand() : $post->ID );

    // Add CSS directly into the password form
    $custom_css = '
    <style>
    .custom-password-container {
        text-align: center !important;
        padding-top: 40px;
    }

    .custom-password-message {
        font-family: "Lora", serif;
        font-size: 18px;
	font-weight: 400;
        margin-bottom: 10px;
    }

    .custom-password-input {
        border-radius: 4px;
        padding: 10px 20px;
        border: 1px solid #ccc; /* Add a border style */
	font-size: 16px;
    }

    .custom-password-submit {
	font-family: "Lora", serif;
	font-size: 16px;
	font-weight: 600;
        padding: 10px 20px;
        border-radius: 4px;
        border: 0;
        background-color: #000000;
        color: #ffffff;
        cursor: pointer; /* Add cursor for better UX */
    }
	
	@media (max-width: 767px){
	.custom-password-message{
	font-size: 22px;
	}
	}
    </style>
    ';

    $custom_message = '<p class="custom-password-message">' . __( 'Please enter your password below to view this page:', 'text-domain' ) . '</p>';
    
    $form = $custom_css . '
    <div class="custom-password-container">
        <form class="custom-password-form" action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" method="post">
            ' . $custom_message . '
            <input class="custom-password-input" name="post_password" id="' . $label . '" type="password" size="20" maxlength="20" />
            <input class="custom-password-submit" type="submit" name="Submit" value="' . esc_attr__( "Submit" ) . '" />
        </form>
    </div>';

    return $form;
}

That’s it!

You’ve learned how to:

1. Use password protection in WordPress protecting the ENTIRE page and posts, not just the content
2. Without any extra or paid plugins
3. Customize the password protection message and field text, including the button label
4. Style the password protection pop up form and field using CSS

online course

free 30min consultation

Ready to Learn CSS?

A step-by-step basic online course for beginners and non-coders with 50+ practical exercises to get you started with CSS.

• No HTML
• Interactive
• For non-coders

Enroll now