Password protected site - how to set template?

How To
1

I want to secure one page with a password, using the mechanism built into WP.

1059Ă—270 23.5 KB

However, when I open this page it doesn’t use any of my templates and displays badly.

1158Ă—247 106 KB

How in Bricks do I handle this page asking for a password for the protected page?

2

@jaclas I have the same problem, I couldn’t manage to assign a template to the password prompt of wordpress protected pages. The bricks page template only renders it after entering the password correctly displaying the page with its bricks template.

Did you find a way to assign the template to the password request?

For now I had to fix it with some custom css just to prevent the password request form from going over the sticky menu.

Screen Shot 2023-05-07 at 09.06.05
Screen Shot 2023-05-07 at 09.06.051569Ă—192 22.8 KB

3

Hi

I use this standard WP function in a WPcodebox snippet…

<?php
function my_password_form() {
    global $post;
    $label = 'pwbox-' . ( empty($post->ID) ? rand() : $post->ID );
    $o = '<body><svg height="64px" width="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#FFB655;" d="M411.151,201.697h-23.273h-46.545H256h-85.333h-46.545h-23.273c-12.853,0-23.273,10.42-23.273,23.273 v263.758c0,12.853,10.42,23.273,23.273,23.273H256h155.152c12.853,0,23.273-10.42,23.273-23.273V224.97 C434.424,212.117,424.004,201.697,411.151,201.697z"></path> <path style="fill:#C3C3C7;" d="M170.667,131.877c0-47.051,38.281-85.332,85.333-85.332s85.333,38.281,85.333,85.332v69.82h46.545 v-69.82C387.879,59.161,328.718,0,256,0S124.121,59.161,124.121,131.877v69.82h46.545V131.877z"></path> <path style="fill:#B4002B;" d="M288.912,356.848l16.514-16.514c9.089-9.087,9.089-23.823,0-32.912 c-9.087-9.089-23.824-9.089-32.912,0L256,323.936l-16.514-16.514c-9.087-9.089-23.824-9.089-32.912,0 c-9.089,9.087-9.089,23.823,0,32.912l16.514,16.514l-16.514,16.514c-9.089,9.087-9.089,23.824,0,32.912 c4.544,4.544,10.501,6.817,16.455,6.817s11.913-2.271,16.455-6.817L256,389.761l16.514,16.513 c4.544,4.544,10.501,6.817,16.455,6.817s11.913-2.271,16.455-6.817c9.089-9.087,9.089-23.824,0-32.912L288.912,356.848z"></path> <path style="fill:#EE8700;" d="M100.848,512H256V389.761l-16.514,16.514c-4.544,4.544-10.501,6.817-16.455,6.817 c-5.955,0-11.913-2.271-16.455-6.817c-9.089-9.087-9.089-23.824,0-32.912l16.513-16.514l-16.513-16.514 c-9.089-9.087-9.089-23.823,0-32.912c9.087-9.089,23.824-9.089,32.912,0L256,323.936V201.697h-85.333h-46.545h-23.273 c-12.853,0-23.273,10.42-23.273,23.273v263.758C77.576,501.58,87.996,512,100.848,512z"></path> <path style="fill:#A9A8AE;" d="M124.121,131.879v69.818h46.545v-69.818c0-47.053,38.281-85.333,85.333-85.333V0 C183.282,0,124.121,59.161,124.121,131.879z"></path> </g></svg></body>';
    $o .= '<form action="' . esc_url(site_url('wp-login.php?action=postpass', 'login_post')) . '" method="post" style="color: red;margin-top: 2px;">';
    $o .= __("Here goes your password message");
    $o .=' <label for="' . $label . '">' . __(" ") . ' </label>';
    $o .= '<input name="post_password" id="' . $label . '" type="password" size="20" maxlength="20" />';
    $o .= '<input type="submit" name="Submit" style="padding:9px;" value="' . esc_attr__("Submit") . '" />';
    $o .= '</form>';
    return $o;
}

add_filter('the_password_form', 'my_password_form');

In the form, if you need a margin top to have the form below the header for example, just add

<p style = "margin-top: 15px;"></p>

in the line after the <body>, so that line would then be

$o = '<body><p style = "margin-top: 15px;"></p><svg height…

Cheers

Patric

1 Like
4

Unfortunately, I have not found a solution other than ugly combinations with CSS.
Bricks does not support it.

Can you suggest something @timmse ?

2 Likes
5

Thanks @Patric it is very helpful to customize the password form, I like the svg icon :slight_smile:
But does not fix the bricks template rendering :frowning: