0

Is there a decent standard WP way of wrapping the 3 standard fields (name, email, website) in a div? I'm using bootstrap and would like them to be in their own row.

Example:

    <?php

    $fields =  array(
        'author' =>
          '<div class="col-md-4 comment-form-author">' .              
          '<input placeholder="'.__( 'Name', '_lp' ).' '.( $req ? ' ( Required )' : '' ) .'" id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
          '" size="30"' . $aria_req . ' /></div>',

        'email' =>
          '<div class="col-md-4 comment-form-email">'.
          '<input placeholder="'.__( 'Email', '_lp' ).' '.( $req ? ' ( Required )' : '' ) .'" id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
          '" size="30"' . $aria_req . ' /></div>',

        'url' =>
          '<div class="col-md-4 comment-form-url">' .
          '<input placeholder="'.__( 'Website', '_lp' ).' '.( $req ? ' ( Required )' : '' ) .'" id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
          '" size="30" /></div>',
        );
    ?>

Originally I could have put the opening <div class="row"> before the author div, then the closign </div> after the closing url div...but in the case that not all three are output, I'd break the HTML.

2 Answers 2

1

The hook you're using is correct, however, you don't need to bloat it out so much. This simpler version will do exactly what you're looking for, with much less lines.

function wpse172052_comment_form_before_fields() {
    echo '<div class="row">';
}
add_action('comment_form_before_fields', 'wpse172052_comment_form_before_fields');

function wpse172052_comment_form_after_fields() {
    echo '</div>';
}
add_action('comment_form_after_fields', 'wpse172052_comment_form_after_fields');
0

Answering my own question - I'm not 100% sure this is safe, but I'm using supplied before/after actions to put in a before/after div like so:

//for the comment wrapping functions - ensures HTML does not break.
$comment_open_div = 0;

/**
 * Creates an opening div for a bootstrap row.
 * @global int $comment_open_div
 */
function _lp_before_comment_fields(){
    global $comment_open_div;
    $comment_open_div = 1;
    echo '<div class="row">';
}
/**
 * Creates a closing div for a bootstrap row.
 * @global int $comment_open_div
 * @return type
 */
function _lp_after_comment_fields(){
    global $comment_open_div;
    if($comment_open_div == 0)
        return;
    echo '</div>';
}

add_action('comment_form_before_fields', '_lp_before_comment_fields');
add_action('comment_form_after_fields', '_lp_after_comment_fields');

This results in a

<div class="row">
<!--the fields and stuff-->
</div>

If there is a better solution I'd love to know!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.