Customize comment list markup

5 Views

While creating a new theme, we’ll have to customize the comment flow. For doing so there are two functions: wp_list_comments() and get_comments(). I am not very sure how to style the inner elements that appear from it such as Gravatar, comment description, comment author, etc. In order to do some styling for them, I first of all need to know the DOM elements assigned to them. Where can I go to find about them?

I’ve tried in almost all the sources, I am unable to understand properly.

Post Views: 5

Related posts

Leave a Reply

1 comment

  1. You should use wp_list_comments(), because this will call a Walker class that can handle comment threads:

    // from wp_list_comments()
if ( empty($walker) )
    $walker = new Walker_Comment;

$walker->paged_walk($_comments, $max_depth, $page, $per_page, $r);

    Walker_Comment handles the markup for the comments. You can pass a custom walker to change it.

    Example:

    class Simple_Comment_Walker extends Walker_Comment
{
    function start_el( &$output, $comment, $depth, $args, $id = 0 ) {
        $depth++;
        $GLOBALS['comment_depth'] = $depth;
        $GLOBALS['comment'] = $comment;

        print '<li>' . get_comment_author_link() . '<br>';
        comment_text();
    }
}

wp_list_comments( array ( 'walker' => new Simple_Comment_Walker ) );

    But this is not needed if you want to change the single comment markup only. You can pass a callback parameter to wp_list_comments() to do the same:

    function simple_callback() 
{
    print '<li>' . get_comment_author_link() . '<br>';
    comment_text();
}
wp_list_comments( array ( 'callback' => 'simple_callback' ) );

    • Use a custom walker if you want to change the container elements for the comment list too, use a callback if you want to change single comments only.

    • You can overwrite everything in Walker_Comment, see wp-includes/comment-template.php for details.

    • Keep in mind you should not close the first comment container (in my examples the <li>), the Walker does this when the whole thread has been printed.