elegant themes

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

| December 26, 2007 | 21 Comments

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.

Tags: , ,

Category: Code Snippets


Comments (21)

Trackback URL | Comments RSS Feed

  1. [...] Using PHP to alternate background colors for comments or posts in … By Miriam Schwab 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. … WordPressGarage.com – http://wpgarage.com [...]

  2. [...] Striping Comments; Using PHP to Alternate Colors [...]

  3. Forrest says:

    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.

  4. [...] like Gravatars, comment numbers, comment links, alternating colors (which we’ve discussed here), displaying the HTML tags users can use in the comments text box, and displaying a link to the [...]

  5. John Doe says:

    Used this and worked great, just took me time to realize I had to replace my old stuff with it haha.

  6. [...] goes to WordPress Garage for this awesome [...]

  7. Fred says:

    WOW! Thanks!

  8. Sean C says:

    Awesome post! This has really helped. Thanks

  9. Kangourou pas sympa says:

    Does “Alternating Comments Styles”  work with wordpress 2.7 ?
    Because I tried without succes.
    Thank you in advance.

  10. Ryan says:

    @Kangourou pas sympa – Yep, it works with 2.7.

  11. Eligio says:

    I also want to know how to do it with wp2.7. thanks

  12. Voya says:

    Just tested – works sweet with 2.7 :)

    Thanks a million!

  13. Jim says:

    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.

  14. admin says:

    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…
     

  15. Hedon says:

    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.

  16. [...] Credit: WordPress Garage [...]

  17. yokser says:

    how to adapted for nested comment??

  18. Hey – fine blog, simply looking around lots of blogs, seems a quite pleasant platform you are using. I’m currently using WordPress for a few of my sites but aiming to change one out of them over to a platform similar to yours as a trial run. Anything in particular you’d recommend about it?

  19. Stig says:

    Love this trick! Do you think it can it be modified to work with 4 different classes as opposed to 2?

  20. You actually make it seem so easy with your presentation but I find this matter to be actually something which I think I would never understand. It seems too complex and extremely broad for me. I am looking forward for your next post, I will try to get the hang of it!

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.

More in Code Snippets (23 of 34 articles)