Using PHP to alternate background colors for comments or posts in WordPress
December 26, 2007 – 5:05 pm | bySome 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:
- Right before the loop begins, add the following code:
<?php $odd_or_even = 'odd'; ?> - 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'; ?> - 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.
![[del.icio.us]](http://images.del.icio.us/static/img/delicious.small.gif){kind=small}
17 Responses to “Using PHP to alternate background colors for comments or posts in WordPress”
By Forrest on Jan 1, 2008 | Reply
Depending on your theme, it can be nice to use a gradient background image instead of a solid bg color for this. The beautiful thing is once you’ve assigned them classes, you can go back and fine tune the appearance in CSS at any time.
By John Doe on Jul 25, 2008 | Reply
Used this and worked great, just took me time to realize I had to replace my old stuff with it haha.
By Fred on Nov 17, 2008 | Reply
WOW! Thanks!
By Sean C on Apr 17, 2009 | Reply
Awesome post! This has really helped. Thanks
By Kangourou pas sympa on Apr 27, 2009 | Reply
Does “Alternating Comments Styles” work with wordpress 2.7 ?
Because I tried without succes.
Thank you in advance.
By Ryan on May 1, 2009 | Reply
@Kangourou pas sympa – Yep, it works with 2.7.
By Eligio on May 9, 2009 | Reply
I also want to know how to do it with wp2.7. thanks
By Voya on Jun 4, 2009 | Reply
Just tested – works sweet with 2.7
Thanks a million!
By Jim on Jul 13, 2009 | Reply
How can we integrate this with the Title area that each post has. This was we could have 2 colors for each post, odd or even.
By admin on Aug 18, 2009 | Reply
Actually this does NOT work with Wordpress themes that use the updated comments loop available since 2.7. The new comments loop starts with <?php if ( have_comments() ) : ?> rather than
<?php if ( $comments ) : ?>The new loop is needed if you are going to use paged comments or threaded comments.
So…Anybody have success alternating background colors for comments using the new Wordpress Comments Loop? It’s driving me crazy…
By Hedon on Sep 13, 2009 | Reply
Is there a way to do the same thing with the widgets on your sidebar? I was thinking that our sidebar would look much cleaner if each widget had an alternating background color, but I’m not sure it is possible.