WordPressGarage.com

Using PHP to alternate background colors for comments or posts in WordPress

Some blogs have alternating background colors for their comments and posts, i.e. a green background for every even comment and post, and a grey background for every odd comment and post. How do they do that?

Alternating Comments Styles

To alternate comments, add the following code to your comments.php template file, under where it says <?php if ( $comments ) : ?>:

<ul>
<?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"';} ?>>

Then, create a style called .even and a style called .odd in your style.css file. Give each style a different background color, like this (but change the colors to what you want):

.odd {
background-color: #fcf9fc; }

.even {
background-color: #616161; }

This information is from the following WordPress support topic:

How to alternate background colors of comments posted on blog?

Alternating Post Styles

Adam Brown has a tutorial on his site for creating alternating styles for posts. Basically, you do the following:

1. Right before the loop begins, add the following code:
   <?php $odd_or_even = 'odd'; ?>
2. Right after the loop, there will be a div. Let’s say it’s called class=”post”. Change it to
   <div class="post <?php echo $odd_or_even; ?>">, and then add the following piece of code on the next line: <?php $odd_or_even = ('odd'==$odd_or_even) ? 'even' : 'odd'; ?>
3. Now, create .odd and .even styles in your style.css.

Adam’s site has another really useful PHP Tutorial for Wordpress Users, which is good for those of us who aren’t going to become PHP gurus, but would like to know enough PHP to extend our WordPress sites.