Take a look at some of the articles I’ve written. (feel free to comment )

I’ve seen many articles on setting up alternating rows or “zebra stripes” for comments as well as many articles on styling author comments.  I’m gonna show you how to combine the two into one function.

Zebra striping is when every other comment has a slightly different background color or some other visual variation.  Zebra striping helps the reader sort through the comments quicker.  Author styling on comments is when comments posted by the author have been styled to stand out from the rest of the comments.  Author styling allows readers to quickly skim comments to find those posted by the article’s author.  You’ve no doubt seen these two methods used on blogs before. Here’s an example of what you can do:

So here’s how’s it’s done. Find the comment loop inside your comments.php file. It should look like this:

<?php foreach ($comments as $comment) : ?>
	<li id="comment-<?php comment_ID() ?>">
	<?php echo get_avatar( $comment, 32 ); ?>
	<?php comment_text() ?>
	<p><cite><?php comment_type(__('Comment'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> &#8212; <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
	</li>
 
<?php endforeach; ?>

Change the first part to this:

 
<?php foreach ($comments as $comment) : ?>
   <?php $i++  ; ?>
	<li id="comment-<?php comment_ID() ?>" class="<?php alternate_rows_author_comment($i, $comment, $post); ?>">

We’re doing a couple things here. We’ve created an iterator ($i) that adds 1 to itself each time through the loop and we’ve set the class property to a php function passing the iterator, post object, and comment object variables. As of now there is no “alternate_rows_author_comment” function. So let’s make one

Open up your functions.php file and add this:

function alternate_rows_author_comment($i, $comment, $post){
   $className = '';
   if($i % 2) {
      $className = 'odd-row';
   }
   if($comment->user_id == $post->post_author) {
      $className = 'author-comment';
   }
   echo $className;
};

This handy function we’ve created checks if our iterator ($i) is odd and if so adds ‘odd-row’ to our class. the “if($i % 2)” part is called a modulo operator. Basically it checks the remainder of the value of “$i” divided by 2. A remainder of 1 evaluates to ‘true’ and a remainder of ‘0′ evaluates to false. Odd numbers always have a remainder of 1 and even numbers always have a remainder of 0 when divided by 2. The second if statement checks the user id of the commenter against the user id of the author. If they are equal then it sets our class to ‘author-comment’ overwriting, if need be, our previous value of ‘odd-row’. At this point if it’s an author comment we’re no longer interested in whether it’s odd or even.

Now you can set up definitions in your style sheet to style your new comment types like so:

li.odd-row{
   /* change the background color or other attributes here */
}
 
li.author-comment{
   /* change the background color or other attributes here */
}

And that’s all there is to it. Now you have comments styled by alternating rows and author.