Customizing the WP Comments Section Using a Callback

If your working on a theme or just trying to customize one a bit, you may find working with the comments section a bit daunting. I was working on a theme and styling the comments section. I normally do this by simply looking at the inspector and using the classes WordPress spits out to customize it to my liking.

But this time I needed to do a bit more to get it looking the way I wanted. I needed to change some of the actual code being spit out. I needed to move some divs around. So I looked into working on changing the output of the comments section.

The output is usually created inside the comments.php template file and uses this function:

// https://codex.wordpress.org/Function_Reference/wp_list_comments

<?php $args = array(
   'walker' => null,
   'max_depth' => '',
   'style' => 'ul',
   'callback' => null,
   'end-callback' => null,
   'type' => 'all',
   'reply_text' => 'Reply',
   'page' => '',
   'per_page' => '',
   'avatar_size' => 32,
   'reverse_top_level' => null,
   'reverse_children' => '',
   'format' => 'html5', // or 'xhtml' if no 'HTML5' theme support
   'short_ping' => false, // @since 3.6
   'echo' => true // boolean, default is true
 ); ?>

<?php wp_list_comments( $args, $comments ); ?> 

With wp_list_coments(); You can add the list of comments for the post along with some  nifty features, like changing the avatar size, or the reply text.

There are a few ways to change the output for the comments. Apparently the Walker allows you to pass a function that will completely override the entire comment system and involves some work.

The one that I am looking for is just to change the output of a comment, not the entire comment system. To do this I will use the callback function. Here is what the WordPress Codex says on the using the callback.

The name of a custom function to use to open and display each comment. Using this will make your custom function get called to display each comment, bypassing all internal WordPress functionality in this respect. Use to customize comments display for extreme changes to the HTML layout. Note that your callback must include the opening <div>, <ol>, or <ul> tag (corresponding with the style parameter), but not the closing tags.

Ok. So we need to create a function and this function will output the comment instead of the default from  WordPress. So here is what my function looked like:

<?php
 wp_list_comments( array(
   'style' => 'ol',
   'callback' => 'my_comments_callback',
   'avatar_size'=> '75'
   ) );
 ?>

In this example, I have set the style to ordered list, made the default avatar bigger, and set the callback to use a function called ‘my_comments_callback’.

Now what goes inside this function? WordPress gives an example on the codex, but I wanted to keep the output exactly the same as the default, but just move one or two divs around.

To do this I looked through the WordPress core files and found the default output. I copied and pasted it into my function. I had to make a few changes to some variables to make it work but below is the default html5 comment output for WordPress as of 4.5. Feel free to take it and manipulate it as you see fit!

//using callback to change just html utput on a comment
//html5 comment
function my_comments_callback($comment, $args, $depth){
   //checks if were using a div or ol|ul for our output
   $tag = ( 'div' === $args['style'] ) ? 'div' : 'li';
?>
      <<?php echo $tag; ?> id="comment-<?php comment_ID(); ?>" <?php comment_class( $args['has_children'] ? 'parent' : '', $comment ); ?>>
         <article id="div-comment-<?php comment_ID(); ?>" class="comment-body">
            <footer class="comment-meta">
               <div class="comment-author vcard">
                  <?php if ( 0 != $args['avatar_size'] ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
                  <?php printf( __( '%s <span class="says">says:</span>' ), sprintf( '<b class="fn">%s</b>', get_comment_author_link( $comment ) ) ); ?>
               </div><!-- .comment-author -->

               <div class="comment-metadata">
                  <a href="<?php echo esc_url( get_comment_link( $comment, $args ) ); ?>">
                     <time datetime="<?php comment_time( 'c' ); ?>">
                        <?php
                           /* translators: 1: comment date, 2: comment time */
                           printf( __( '%1$s at %2$s' ), get_comment_date( '', $comment ), get_comment_time() );
                        ?>
                     </time>
                  </a>
                  <?php edit_comment_link( __( 'Edit' ), '<span class="edit-link">', '</span>' ); ?>
               </div><!-- .comment-metadata -->

               <?php if ( '0' == $comment->comment_approved ) : ?>
               <p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></p>
               <?php endif; ?>
            </footer><!-- .comment-meta -->

            <div class="comment-content">
               <?php comment_text(); ?>
            </div><!-- .comment-content -->

            <?php
            comment_reply_link( array_merge( $args, array(
               'add_below' => 'div-comment',
               'depth'     => $depth,
               'max_depth' => $args['max_depth'],
               'before'    => '<div class="reply">',
               'after'     => '</div>'
            ) ) );
            ?>
         </article><!-- .comment-body -->
         <?php
}

Hope this helps somebody! It helped me greatly. Remember to leave the closing div or li tag out. WordPress will close it for us. We just needed to open it.