theme development - customizing the_password_form filter

admin管理员组

文章数量:1122832

I'm trying to customize the_password_form to integrate it with bootstrap inline-forms with an add_filter() function:

function custom_passowrd_form ( $form ) {
global $post;
$label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID );
$form = 
    '<p>' .
        __( "To view this protected post, enter the password below:" ) .
    '</p>' .
    '<form class="form-inline" action="' .
    esc_url( site_url( 'wp-login.php?action=postpass',
                      'login_post' ) ) .
    '" method="post">' .
        '<div class="form-group"> ' .
            '<label class="sr-only" for="' .
            $label .
            '">' .
                __('Password') .
            ' :</label>' .
            '<input placeholder="'.
            __('Password') .
            '" class="form-control" name="post_password" id="' .
            $label .
            '" type="password" size="20" maxlength="20" />'.
        '</div>' .
        '<input class="btn btn-primary" type="submit" name="Submit" value="' .
            esc_attr__( "Submit" ) . '" />' .
    '</form>';
return $form;
}
if (! is_admin()) {
    add_filter('the_password_form','custom_passowrd_form');
}

the problem is the extra <p> tag that wraps the submit button, here is the output:

<form class="form-inline" action="http://127.0.0.1/wp-login.php?action=postpass" method="post">
    <div class="form-group">
        <label class="sr-only" for="pwbox-27">
            Password :
        </label>
        <input placeholder="Password" class="form-control" name="post_password" id="pwbox-27" type="password" size="20" maxlength="20">
    </div>
    <p>
        <input class="btn btn-primary" type="submit" name="Submit" value="Submit">
    </p>
 </form>

I'm trying to customize the_password_form to integrate it with bootstrap inline-forms with an add_filter() function:

function custom_passowrd_form ( $form ) {
global $post;
$label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID );
$form = 
    '<p>' .
        __( "To view this protected post, enter the password below:" ) .
    '</p>' .
    '<form class="form-inline" action="' .
    esc_url( site_url( 'wp-login.php?action=postpass',
                      'login_post' ) ) .
    '" method="post">' .
        '<div class="form-group"> ' .
            '<label class="sr-only" for="' .
            $label .
            '">' .
                __('Password') .
            ' :</label>' .
            '<input placeholder="'.
            __('Password') .
            '" class="form-control" name="post_password" id="' .
            $label .
            '" type="password" size="20" maxlength="20" />'.
        '</div>' .
        '<input class="btn btn-primary" type="submit" name="Submit" value="' .
            esc_attr__( "Submit" ) . '" />' .
    '</form>';
return $form;
}
if (! is_admin()) {
    add_filter('the_password_form','custom_passowrd_form');
}

the problem is the extra <p> tag that wraps the submit button, here is the output:

<form class="form-inline" action="http://127.0.0.1/wp-login.php?action=postpass" method="post">
    <div class="form-group">
        <label class="sr-only" for="pwbox-27">
            Password :
        </label>
        <input placeholder="Password" class="form-control" name="post_password" id="pwbox-27" type="password" size="20" maxlength="20">
    </div>
    <p>
        <input class="btn btn-primary" type="submit" name="Submit" value="Submit">
    </p>
 </form>

• theme-development
• filters
• twitter-bootstrap

Share Improve this question edited Jun 6, 2024 at 19:21 samix73 asked Nov 15, 2015 at 11:12 samix73samix73 17355 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

The output from the password form is filtered through the the_content filter when you call the_content() in your template.

That means it also goes through the wpautop() function that wraps <p></p> around your submit button with this code:

// Rebuild the content as a string, wrapping every bit with a <p>.
foreach ( $pees as $tinkle ) {
        $pee .= '<p>' . trim($tinkle, "\n") . "</p>\n";
}

You can move your submit button inside your <div></div> part or try to remove the wpautotop filtering only when the password form is displayed.

Another approach would be to remove the <p></p> tags around your input elements:

add_filter( 'the_content', function( $content )
{
    // Check if we have an input element in the content
    if( false !== strpos( $content, '<input ' ) )
        $content = preg_replace('|<p>\s*(<input[^>]+/?>)\s*</p>|', "$1", $content );
    return $content;
}, 11 );

where we use a priority later than 10.

本文标签： theme developmentcustomizing thepasswordform filter