Outputting complete custom comment form

Question

Need to implement the following bootstrap layout in twenty twelve comment form -

<div class="sub-figure">
    <div class="sub-post-title">
        <h4 class="recent-title">Leave A Comment</h4>
    </div>
    <form class="form-inline">
        <div class="col-xs-12 col-sm-4 col-md-4 form-group">
            <input type="text" name="author" id="author"  class="form-control height-in" id="reply-name" placeholder="Enter Name">
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 form-group">
            <input type="email" name="email" id="email" class="form-control height-in" id="replay-email" placeholder="Enter Email">
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 form-group top-equal">
            <textarea name="comment" id="comment" class="form-control" rows="7" placeholder="Comment"></textarea>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 form-group top-equal">
            <input name="comment_post_ID" value="<?php echo $post->ID; ?>" type="hidden">
            <input type="submit" name="submit" id="submit" class="btn btn-1 btn-1a ct-us-send">
        </div>
    </form>
</div>  

I've been through codex and also looked into comment_form() but am not able to figure out how to completely redefine comment form layout.

Also, on many occasions client need some custom field in comment form and I was wondering if I can redefine the comment_form() then maybe there can also be a method to introduce a new field, save its value in db and retrieve its value like other default fields?

Any ideas?

Answer 1

Following was the HTML –

<!-- Comment Form HTML -->
<div class="sub-figure">
    <div class="sub-post-title">
        <h4 class="recent-title">Comments</h4>
    </div>
</div>  

<!-- Leave a comment -->
<div class="sub-figure">
    <div class="sub-post-title">
        <h4 class="recent-title">Leave A Comment</h4>
    </div>
    <form class="form-inline">
      <div class="col-xs-12 col-sm-4 col-md-4 form-group">
        <input type="text" class="form-control height-in" id="reply-name" placeholder="Enter Name">
      </div>
      <div class="col-xs-12 col-sm-4 col-md-4 form-group">
        <input type="email" class="form-control height-in" id="replay-email" placeholder="Enter Email">
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 form-group top-equal">
        <textarea class="form-control" rows="7" placeholder="Comment"></textarea>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 form-group top-equal">
        <input type="submit" class="btn btn-1 btn-1a ct-us-send">
      </div>
    </form>
</div>  

<!-- Comments List HTML -->
<div class="comment-details">
    <div class="comment-pic">
        <img src="img/comment.jpg">
    </div>
    <div class="comment-inner">
        <div class="comment-info">
            <div class="clearfix">
                <h4>Vajrasar</h4>
                <a href="#"><i class="fa fa-reply"></i> Reply</a>
            </div>
            <div class="comment-on">
                <h6>September 9, 2014</h6>
            </div>
            <div class="comment-text">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </div>
    </div>
</div>

Following is the code which I used to output the modified Comment Form –

<?php

//Disabling URL field
function vg_disable_comment_url( $fields ) { 
    unset( $fields['url'] );
    return $fields;
}
add_filter('comment_form_default_fields','vg_disable_comment_url');

//To edit defaults in comment field
function vg_modify_comment_defaults( $defaults ) {
    $defaults['comment_notes_after'] = '';
    $defaults['comment_notes_before'] = '';
    $defaults['title_reply'] = 'Leave A Comment';
    $defaults['comment_field'] = '';

    return $defaults;
}
add_filter( 'comment_form_defaults', 'vg_modify_comment_defaults' );

//To modify structure of input fields and the wrapping html markup
function vg_modify_comment_form_fields( $fields ){

    $fields['author'] = '<div class="col-xs-12 col-sm-4 col-md-4 form-group">' 
                . '<input class="form-control height-in" placeholder="Enter Name" id="author" name="author" type="text" value="' 
                . esc_attr( $commenter['comment_author'] ) 
                . '" size="30"' 
                . $aria_req 
                . ' /></div>';

    $fields['email']  = '<div class="col-xs-12 col-sm-4 col-md-4 form-group">' 
                . '<input class="form-control height-in" placeholder="Enter Email" id="email" name="email" ' 
                . ( $html5 ? 'type="email"' : 'type="text"' ) 
                . ' value="' 
                . esc_attr(  $commenter['comment_author_email'] ) 
                . '" size="30"' 
                . $aria_req 
                . ' /></div>';

    $fields['comment_field'] = '<div class="col-xs-12 col-sm-12 col-md-12 form-group top-equal">
                        <textarea class="form-control" placeholder="Comment" id="comment" name="comment" cols="45" rows="7" aria-required="true"></textarea>
                        </div>';    

    $fields['comment_notes_after'] = '<input type="submit" class="btn btn-1 btn-1a ct-us-send" id="submit-new" value="' . __( 'Submit' ) . '" />';

    return $fields;
}

add_filter('comment_form_default_fields','vg_modify_comment_form_fields');

Following will go in place of default comment list call in comment.php in WP native theme files -

wp_list_comments( 'type=comment&callback=vg_format_comment' ); //vg_format_comment is the function being called

Following is the code which outputs the modified Comments List –

//To modify comment list and its wrapping markup using vg_format_comment function defined in callback
function vg_format_comment( $comment, $args, $depth ) {
    $GLOBALS['comment'] = $comment;
    $ca = get_comment_author();
    ?>
    <div class="comment-details">
        <div class="comment-pic">
            <?php echo get_avatar( $comment, 32 ); ?>
        </div>
        <div class="comment-inner">
            <div class="comment-info">
                <div class="clearfix">
                    <h4><?php printf(__('%s'), get_comment_author_link()) ?></h4>
                    <div id="reply-cover">
                        <i class="fa fa-reply"></i> <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
                    </div>
                </div>
                <div class="comment-on">
                    <h6><?php printf(__('%1$s'), get_comment_date(), get_comment_time()) ?></h6>
                </div>
                <div class="comment-text"> 
                    <?php comment_text(); ?>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
<?php 
}

Following is what I used to give custom class to comment form that WP outputs -

// To add custom class in comment form in comment.php in wp native themes
ob_start();
comment_form();
echo str_replace('class="comment-form"','class="form-inline"',ob_get_clean()); //class added is form-inline