Styling WordPress 2.7 Comments

A few weeks ago I wrote about the WordPress 2.7 theme enhancements and specifically how the comments were now output using the tag wp_list_comments(). However, this controls all output of your markup and for a lot of people, this is different to how their existing theme is.

Just a reminder, default output is:

<li class="comment byuser comment-author-sarah bypostauthor odd alt thread-odd thread-alt depth-1" id="comment-999">

	<div id="div-comment-999">
		<div class="comment-author vcard">
			<img alt='' src='http://www.gravatar.com/avatar/img.jpg' class='avatar avatar-32' height='32' width='32' />
			<cite>Sarah</cite> Says:
		</div>

		<div class="comment-meta commentmetadata"><a href="http://wordpress-address.com/?p=99&amp;cpage=1#comment-999">November 30th, 2008 at 10:00 am</a></div>

		<p>Comment content goes here.</p>

		<div class="reply"></div>
	</div>
</li>

This is fine, but for my own site this wasn’t what I wanted. I’m sure I could have used this and moved things around with CSS but luckily the WordPress developers have realised that not everyone would want the same comment output and they allow you to create your own markup and then use a callback function.

How Does This Work?

A callback parameter is added to the wp_list_comments() function. The value of this parameter is the name of the function with the code you would like to use. This function is then stored in a functions.php file within your theme directory (you may already have this file, so just add the function to it).

So first off we need to decide on the output. You’ve probably already got this in your existing theme so you can most likely copy this out. To know where to start you need to be starting with an opening list item (li tag) and then close with a closing list item tag. Of course every theme is different so if you’re not sure then post up a comment with a link to a text version of your file and I’ll happily help you out

For my own theme this was

<li id="comment-">
         < ?php echo get_avatar(get_comment_author_email(), 40); ?>

         < ?php if ($comment->comment_approved == '0') : ?>
         	<em>< ?php _e('Your comment is awaiting moderation.') ?></em>
         	<br />
      	< ?php endif; ?>

      	< ?php comment_text() ?>

      	<p style="margin-bottom:5px;">By <strong>< ?php printf(__('%s'), get_comment_author_link()) ?></strong> on
      	<a href="http://www.bloggingtips.com/2008/12/21/styling-wordpress-27-comments/comment-page-/#comment-">< ?php printf(__('%1$s'), get_comment_date()) ?></a>< ?php edit_comment_link(__('(Edit)'),'  ','') ?></p></li>

We then take this and insert it into the correct function code in our functions.php theme file (create a blank file if you don’t already have one). The function code is

< ?php
function theme_comments ($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment;
   // comment code goes here
}
?>

A couple of changes first need doing to our comment code output. The first is to add in the new template tag comment_class(), which will give us our additional classes into the list item. The second is to remove the closing list item tag. For some reason, when using this method, WordPress automatically inserts the closing list item tag, which I think is a bug really, as not everyone uses lists (although they should!). However, for the time being this will at least create valid code.

So our final callback function looks like

< ?php
function theme_comments ($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment;
   function silverlight_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li class="comment even thread-even depth-1" id="comment-< ?php comment_ID() ?>">
         < ?php echo get_avatar(get_comment_author_email(), 40); ?>

         < ?php if ($comment->comment_approved == '0') : ?>
         	<em>< ?php _e('Your comment is awaiting moderation.') ?></em>
         	<br />
      	< ?php endif; ?>

      	< ?php comment_text() ?>

      	<p style="margin-bottom:5px;">By <strong>< ?php printf(__('%s'), get_comment_author_link()) ?></strong> on
      	<a href="http://www.bloggingtips.com/2008/12/21/styling-wordpress-27-comments/comment-page-/#comment-">< ?php printf(__('%1$s'), get_comment_date()) ?></a>< ?php edit_comment_link(__('(Edit)'),'  ','') ?></p>      	

< ?php } ?>

Modify the Comments File

Now that we’ve got our output correct, we need to call this in our comments.php. So we need to find the wp_list_comments() and add the parameter to it. So we need to change the wp_list_comments() to

wp_list_comments('callback=theme_comments');

My own function above is designed for plain comments, as opposed to pingbacks, so I also have the type parameter and therefore use

wp_list_comments('type=comment&callback=theme_comments');

Hopefully that should explain to you how you can get the benefit of the new 2.7 features in your comments, but also still maintain full control over how the code is output and how they appear.

Written by Sarah from Stuff By Sarah
Posted on December 21st, 2008 and filed under WordPress Coding & Design
Do not forget to subscribe to our RSS feed for updates

5