Custom html Wordpress Comments with avatar and reply

Question

I am developing a theme and has no idea how wordpress handles the comment outputs.

I havewp_list_comments in my comments.php, but I'm not sure how to customize the output to get the desired output like this :

this my html code :

  <div class="row">
    <div class="col-sm-2 text-center">
      <img src="https://freeiconshop.com/wp-content/uploads/edd/person-flat.png" class="img-circle" height="65" width="65" alt="Avatar">
    </div>
    <div class="col-sm-10">
      <h4>John Row <small>Sep 25, 2015, 8:25 PM</small></h4>
      <p>I am so happy for you man! Finally. I am looking forward to read about your trendy life. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <br>
      <p><span class="badge">1</span> Comment:</p><br>
      <div class="row">
        <div class="col-sm-2 text-center">
          <img src="http://www.noviasalcedo.es/wp-content/uploads/2016/05/person-girl-flat.png" class="img-circle" height="65" width="65" alt="Avatar">
        </div>
        <dsiv class="col-xs-10">
          <h4>Nested Bro <small>Sep 25, 2015, 8:28 PM</small></h4>
          <p>Me too! WOW!</p>
          <br>
        </div>
      </div>
    </div>

Any suggestions on how to customize the output rendered by wp_list_comments ?

#update

comments.php:

<div id="comments" class="comments-area">

    <?php if ( have_comments() ) : ?>
        <h2 class="comments-title">
            <?php
                $comments_number = get_comments_number();

                    printf(
                        /* translators: 1: number of comments, 2: post title */
                        _nx(
                            '<p><span class="badge">%1$s</span> Comments:</p><br>',
                            '<p><span class="badge">%1$s</span> Comments:</p><br>',
                            $comments_number,
                            'comments title'
                        ),
                        number_format_i18n( $comments_number )
                    );
            ?>
        </h2>




<ol class="commentlist">
    <?php wp_list_comments('type=comment&callback=mytheme_comment');
   ?>
</ol><!-- .commentlist -->


    <?php endif; // Check for have_comments(). ?>



    <?php
        comment_form( array(
            'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
            'title_reply_after'  => '</h2>',
        ) );
    ?>

</div><!-- .comments-area -->

Answer 1

You can use the callback function on wp_list_comments() function.

wp_list_comments();

Usually, you will find this line in comments.php file of your wordpress theme. And the output from this command is a pretty straightforward HTML structure.

Wordpress have a option of passing the callback function as an argument to wp_list_comments function.

This callback function should return the modified HTML structure of comments section, which we are looking to implement.

<ul class="comment-list comments">
    <?php
    wp_list_comments( array(
        'style'      => 'ul',
        'short_ping' => true,
            'callback' => 'better_comments'
    ) );
     ?>
</ul><!-- .comment-list -->

You can check detailed tutorial here

https://www.5balloons.info/custom-html-for-comments-section-in-wordpress-theme/

Answer 2

You can override the template using the wp_list_comments function.

Refer to this link.

You can put that code inside of a function and call that from the wp_list_comments as a callback. All the info on how to do that is in that link.