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 Answer 1

-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
3
  • 1
    Please add some explanations. A bunch of code without that is just confusing.
    – fuxia
    Jun 20, 2015 at 13:10
  • Okay am on it, but did you downvote it because of that? I am curious. @toscho
    – vajrasar
    Jun 27, 2015 at 10:59
  • 1
    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, 2015 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.