Skip to content

Custom WordPress comments list template

It’s counter intuitive but, there is no such thing as comments list template, ie the template file where you can define each comment look and feel. Of course (like with almost anything in WordPress) it’s possible to change comments list HTML, but it requires a bit different approach.

First in your theme functions.php file you need to define new function (you can call it anyway you want):

<?php
function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">
      <div class="comment-author vcard">
         <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>
 
         <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
      </div>
      <?php if ($comment->comment_approved == '0') : ?>
         <em><?php _e('Your comment is awaiting moderation.') ?></em>
         <br />
      <?php endif; ?>
 
      <div class="comment-meta commentmetadata">
          <a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>">
              <?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?>
          </a>
          <?php edit_comment_link(__('(Edit)'),'  ','') ?>
      </div>
 
      <?php comment_text() ?>
 
      <div class="reply">
         <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </div>
     </div>
<?php
        }
?>

This code was taken from WordPress Codex, at the same time it’s a default design of the single comment, you can make in this function any changes you want.

In order to implement new “comment theme” you need to configure it. Open comments.php file and find code similar to this:

<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>

wp_list_comments() function is responsible for displaying comments list. To use our custom function we defined earlier to render comments we need to pass apprioprate argument to wp_list_comments()

<?php
wp_list_comments("callback=mytheme_comment");
?>

From now on each comment will be rendered using mytheme_comment() function. wp_list_comments() accepts more actually more arguments, however i don’t want to duplicate code from Codex here, if you are interested go to WordPress Codex page for more information.

Published inGeneral

10 Comments

  1. Deb Deb

    Thank you for this Greg. Just used on a project that needed special comments styling which would have been a real pain otherwise to pull off with only CSS & original markup.

  2. Thanks for the comment @Deb, i am glad you found it useful.

  3. bob bob

    Thanks greg, this is great! I’ve been trying to figure out how to re-arrange the comments template w/out touching the wordpress core.

  4. aa aa

    yess oh cool

  5. Case Case

    I would like to alter the number of nested comments allowed in my custom comments template – which overrides the WordPress setting in the ACP.

    How is this possible?

    I assume it’s something to do with

    array(‘depth’ => $depth, ‘max_depth’ => $args[‘max_depth’

  6. Daddeaux Daddeaux

    Very good

  7. Hi! Thanks for sharing this! It’s been really easy to change comments list layout, altough I must say I have a problem: if I use your technique, the “submit form” button will show a blank page! Anybody has the same problem?

  8. Thank you for this–I’d been looking for the “template” for the comments list (I wanted to change the way the information is displayed) for a few days now, and found this just as I’d given up hope! You’re a lifesaver!

  9. Thank you to writing this article; I have been frustrated by my alterations to the core comments-template file being wiped every time I update WordPress, this article has saved me a lot of time and frustration!

  10. There is no in the markup. I started to write a comment questioning the omission of the end of the list item. Then I remembered in HTML5 you do not need to end the if it is followed by another.

    Thanks for the post Greg.

Leave a Reply

Your email address will not be published. Required fields are marked *