What?

Comments. That is the topic. As some may know I’m in the middle of creating a WordPress theme to submit to the repository. I want this theme to not only pass but to pass with flying colors. I followed about as close to how the default themes are but have also integrated some from themes I have reviewed and added a bit of my own style, of course.

What started this?

What really initiated this was the default theme for WordPress 3.6: Twenty Thirteen. Previous default versions all passed a certain set of arguments and made a callback function in order to display the comments rather than have WordPress handle it. Wait? You mean to tell me that I can let WordPress do the coding for me? Yes. If you don’t like having control of how to structure your code. Twenty thirteen lets WordPress handle the coding of the comment list.

Callback?

Yes, a callback function. Simple and you have more control of how the code is structured and displayed. The function that handles this is:

wp_list_comments()

All that is needed now is some arguments:

$defaults = array(
    'walker'            => null,
    'max_depth'         => '',
    'style'             => 'ul',
    'callback'          => null,
    'end-callback'      => null,
    'type'              => 'all',
    'page'              => '',
    'per_page'          => '',
    'avatar_size'       => 32,
    'reverse_top_level' => null,
    'reverse_children'  => '',
    'format'            => 'xhtml', /* or html5 added in 3.6  */
    'short_ping'        => false, /* Added in 3.6 */
);
wp_list_comments ( $defaults );

Now, the thing that creates the comments is the callback. It tells WordPress to run the default code if no argument is passed. If there is one, then WordPress will look for that function and use that instead. In Twenty Twelve it was:

wp_list_comments( array(
    'callback' => 'twentytwelve_comment',
    'style' => 'ol'
     ) );

In the Twenty Thirteen theme it actually uses the default HTML5 markup by not setting a callback function and using the new argument:

'format' => 'html5'

This tells WordPress to use the HTML5 markup for the comment which is:

<article class="comment-body">
 <footer class="comment-meta">
 <div class="comment-author vcard"></div><!-- .comment-author -->
 
 <div class="comment-metadata">
 <a href="">
 <time></time>
 </a>
 <span class="edit-link">Edit</span>
 </div><!-- .comment-metadata -->

 <p class="comment-awaiting-moderation"></p>

 </footer><!-- .comment-meta -->

 <div class="comment-content"></div><!-- .comment-content -->

 <div class="reply"></div><!-- .reply -->

</article><!-- .comment-body -->

Keep in mind that is the very simplified version without any WordPress comment template tags. Just straight HTML5 markup. Some people don’t mind using that while others like to have more control and would like to style in a different way. In order to do that we have to pass an argument to the callback function argument.

Enter the callback

This is why you want to use a callback function to create and style the comment. In order to do this we pass the argument

'callback' => 'my_theme_comment'

in our array of arguments much like Twenty Twelve does. Next we have to create the actual function that will house our newly created and customized comment with custom markup. Where that function resides is entirely up to you.

Once we have created the function we can start with all the markup and comment template tags we so desire. I personally like to keep things fairly simple and just have the comment author, date and text. Often my code looks like:

function custom_comments( $comment, $args, $depth ) {
    $GLOBALS['comment'] = $comment;
    switch( $comment->comment_type ) :
        case 'pingback' :
        case 'trackback' : ?>
            <li <?php comment_class(); ?> id="comment<?php comment_ID(); ?>">
            <div class="back-link">< ?php comment_author_link(); ?></div>
        <?php break;
        default : ?>
            <li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
            <article <?php comment_class(); ?> class="comment">

            <div class="comment-body">
            <div class="author vcard">
            <?php echo get_avatar( $comment, 100 ); ?>
            <span class="author-name"><?php comment_author(); ?></span>
            <?php comment_text(); ?>
            </div><!-- .vcard -->
            </div><!-- comment-body -->

            <footer class="comment-footer">
            <time <?php comment_time( 'c' ); ?> class="comment-time">
            <span class="date">
            <?php comment_date(); ?>
            </span>
            <span class="time">
            <?php comment_time(); ?>
            </span>
            </time>
            <div class="reply"><?php 
            comment_reply_link( array_merge( $args, array( 
            'reply_text' => 'Reply',
            'after' => ' <span>&amp;amp;darr;</span>', 
            'depth' => $depth,
            'max_depth' => $args['max_depth'] 
            ) ) ); ?>
            </div><!-- .reply -->
            </footer><!-- .comment-footer -->

            </article><!-- #comment-<?php comment_ID(); ?> -->
        <?php // End the default styling of comment
        break;
    endswitch;
}

And there we have a custom comment that will be used instead of the default WordPress one.


Comments

25 responses to “Creating a custom comment list”

  1. Marcel Epp Avatar
    Marcel Epp

    Very usefull Thank you!

    1. I’m glad you found it useful! 🙂

  2. Hello Jose,
    Its old post but how can I reserve according to the comments of the language? For example TR>EN>BG> RU

    1. Hi!

      Are you asking about sorting them via languages? I’m not entirely sure that would be possible out-of-the-box but I’m sure there is a way to achieve it.

      Unless you mean something different in that case would you mind explaining a little more?

  3. Klaus Avatar

    Helped me a lot.
    Thank you!

  4. Good for newbies who are not a developer.

  5. Suman Shrestha Avatar
    Suman Shrestha

    Everything works well with above mentioned code, but it didn’t displayed the comment posts. It only displayed commenter name, avatar, date and reply fields. Did I missed anything in the code?

    Regards,

    1. Possibly missing a comment template tag?

  6. Ravi shakya Avatar
    Ravi shakya

    Can u explain how to use it on the Class object ??? I am using class for my plugin..

    1. Sorry for not seeing this one!

      Are you able to link to the current working code?

  7. Ok, so reading this I am starting to get the jist of it a little bit, but how would I reference a callback to where I can have a reply button apply on a comments page if and only if the user has admin rights?

    1. Hi Kevin!

      You don’t need to create an entire comment template if you want to remove the comment reply link. What you can try and use is the comment_reply_link filter so that only an admin is able to view it.

      Hope that helps!

  8. Ronit Passwala Avatar
    Ronit Passwala

    Really Nice Post With good documentation.
    It helps me to customize my comment template.

  9. Not working for me ! whu ?

    1. What is not working? If you are able to post more information I may be able to help a little more or if you’d like feel free to send me an email.

  10. This has helped me a great deal today, thank you so much!
    One small thing is that the final markup currently seems to be missing a few closing HTML tags, which is difficult to spot with the current indentation, so maybe something worth adjusting 🙂

    1. Just a little bit. 😉 Unless you mean the custom_comment callback. WordPress automatically closes the list item for the comment.

      I may just have to make a little note about that when I’m able to. Glad to hear it helped you out. 🙂

  11. Some of the code on this post seems to be a bit garbled. This article does help greatly though. Thanks!

    1. Fixed, thank you for catching that. 🙂

  12. reply link not showing for custom list comments on my site. Could you please help me?

    1. I can only guess you may be missing a template tag somewhere. If you would like feel free to email more information, would love to help however I could.

  13. Worked like a charm! Thanks, man.

    1. You are very welcome! 🙂

  14. Just stumbled upon this post while looking for something I can’t seem to figure out:
    when you look at a comment list on my blog, the meta info of the first comment in a comment thread also gets a grey background and I can’t seem to change that.

    Could you help me with this?
    Thanks!

    1. Sofie, sent you an email. 🙂