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');
}
everything is fine but the problem is the an 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>
1 Answer
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.