0

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?

-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
  • Please add some explanations. A bunch of code without that is just confusing. – fuxia Jun 20 '15 at 13:10
  • Okay am on it, but did you downvote it because of that? I am curious. @toscho – vajrasar Jun 27 '15 at 10:59
  • No, the post has been flagged as Low Quality, and I accepted the flag. The system casts a downvote automatically in this case. Once you've explained your solution you will probably get upvotes. – fuxia Jun 27 '15 at 11:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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