Custom password protected login


Hi everybody,

I'm trying to modify the look and content for a password protected page. Since it will be only one page membership plugins etc. are a little overload to use so I came up with the following solutions:

add_action( 'beans_post_content_after_markup', 'sk_login_view' );

function sk_login_view() {

    if ( post_password_required() ) {

        ?>
            <div class="uk-grid">
                    <div class="uk-width-medium-1-2">
                    <p>Some text and a form to request the password</p>
                </div>
                <div class="uk-width-medium-1-2">
                    <p>Some text for the login itself</p>
                    <p><?php echo the_content(); ?></p>
                </div>

            </div>
        <?php

    }

}

This works so far but how do I get rid of the the_content() generated by the page template itself? Any suggestion is appreciated.

Cheers Marcel


You could simply not include <?php echo the_content(); ?> in your page template (I'm assuming this is a page template) and the_content would not show up at all. Am I understanding you correctly?


That's not exactly what would work because as far as I understand the password form is generated in the _content() by WP. If I delete it, the login form will gone as well. I don't know if there's the possibility to move the_content() into my grid using the beans API or if it's possible to somehow create the login form manually.

Would have provided a screenshot but it seems the cloudup service is no longer available for puplic use.


I came up with a solution myself. Can't tell if this is the best way to manage the scenario but for now it seems to work. For everyone who struggles with a similar problem feel free to check this snippet:

beans_modify_action_callback( 'beans_post_content', 'sk_login_view' );

function sk_login_view() {

    if ( post_password_required() ) {

        ?>
            <div class="uk-grid">
                <div class="uk-width-medium-1-2">
                    <p>Some text on the left</p>
                </div>
                <div class="uk-width-medium-1-2">
                    <p>Some Text on the right</p>
                    <?php echo get_the_password_form(); ?>
                </div>

            </div>
        <?php

    } else {

          ?>
            <div><?php the_content(); ?></div>
        <?php          
            }

}

beans_modify_action_callback did the trick.


Glad you found a solution and thanks for sharing it!

Write a reply

Login or register to write a reply, it's free!