There are quite a few themes out there that still use the classic method of looping through comments to display them. While, I guess, that is still a valid way of displaying comments on a WordPress blog, I would strongly advise changing it to wp_list_comments().

Something that can be confusing is how to customise the way comments are displayed when using wp_list_comments(). You can’t just edit the HTML as there isn’t any there to edit. Instead you must use the callback option that is provided in the argument list of wp_list_comments(). A callback is an instruction to run another function that you define. We will use this to customise the HTML of the comments while maintaining the ability to use threading (should you wish).

Defining The Callback

First let’s define our callback function. You can call it anything you like, but I would advise calling it something like themename_comment where ‘themename’ is the name of your current theme. Here is a simple example:

<?php
function themename_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 = get_bloginfo('stylesheet_directory').'/images/default-avatar.gif' ); ?>
				<?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
}
?>

Note the lack of a closing <li>. This is purposely left out as WordPress will automatically close any tags itself. Just for giggles let’s go through what all of the functions mentioned in the above code do:

comment_class()
This function outputs a list of classes as class="class1 class2 class3". They include odd/even, current depth and others. An extra class can be provided if needed.
comment_ID()
The unique numeric ID for the current comment.
get_avatar()
Uses the commenters email to check for a gravatar. First parameter must be the $comment object, second is the size for the avatar, last is the URL to a default avatar (must be full URL).
get_comment_link()
Gets the link to the current comment. Parameter is the ID for the comment link wanted.
edit_comment_link()
Gets the link to edit the current comment. First parameter is the text for the link, second is what to place before, last is what to place after.
comment_text()
Gets the text for the current comment.
comment_reply_link()
Gets the link to reply to the current comment. Will only be visible is threaded comments is enabled in settings->discussion. Lots of parameters, check the codex for all of them.

Using The Callback With wp_list_comments

To instruct wp_list_comments to use the callback you simply do this:

wp_list_comments('callback=themename_comment');

There is obviously the CSS to create for making your comments look nice, but this is just a tutorial to explain more about creating the customised comments, not styling them. All of the css classes can be seen in the code above anyway & if you want to style children the classes are exactly the same, but they are all children of the <ul> class children.

That’s it. As always any questions leave a comment, or drop me an email. Also any suggestions or tips are always welcome.

P.S. I have just noticed the theme I am currently using doesn’t use wp_list_comments. Guess I’m going to have to get stuck in an change it… The irony. :lol: