Alternate background color in wordpress comments list

November 11, 2008 · Print This Article

If you have a large amount of comments on your blog, it can be very more readable to alternate background colors.

Edit the comments.php file from your theme.

First, find the following line:

<?php if ( $comments ) : ?>

Once you found it,
replace the comment loop by the following code:

<?php $i = 0; ?>
<?php foreach ($comments as $comment) : ?>
<?php $i++; ?>
<li id="comment-<?php comment_ID() ?>"
<?php if($i&1) {
echo 'class="odd"';
} else {
echo 'class="even"';
} ?>>
<php endforeach; ?>

The above code automatically ad a css class to each comment. You guessed it, we now have to edit style.css and create two nice styles for our comments.

You can use this code, for exemple:
.odd {
background-color: #fcf9fc;

.even {
background-color: #616161;

That’s all, your comments now appears with alternated background colors.

Your choice for site templates and wordpress themes


Got something to say?

You must be logged in to post a comment.