Enter your keyword

How To Alternate Colors (Or Other Styles) On Comments In WordPress

How To Alternate Colors (Or Other Styles) On Comments In WordPress

Ever noticed how it’s kind of hard to keep track of comments when they’re all one color? For example, look at my comment section on ABDPBT:

All of the comments are set to the same background, font styles, et cetera, except for my own, which appear in their own background color. But what if I wanted to make it so that the colors alternated with each comment? Here’s a way to set up your comment section to alternate colors (or other styles) so that it’s a snap to determine where one person’s comment ends and another starts. If you’re using a recent version of WordPress (after 2.7, in other words), all you have to do is alter the CSS with the following code (since I’m using Thesis, I’m going to put it in my custom.css file):

.odd {
background: white;
color: black;
.even {
background: black;
color: white;

I’ll change some colors around to make things a bit less dramatic:

.odd {
background: #EFEFEF;
.even {
background: #FFFFFF;
color: #111111;

NOTE: If you’re using an older version of WordPress, you’ll have to set up an alternating set of classes for yourself in order to get it to work. First, open up your comments.php file and modify the comments loop as follows:

  • >

then you can adjust the style as shown above. Play around with different colors and styles until you get something you like. Done!

For older versions of wordpress, you’ll have to set up a custom class of your own. Here’s the code to add to your

Comments (3)

  1. Alexis
    Jun 9, 2010

    Thanks for the tutorial. I was wondering if you could please share how you styled the huge comment numbers you have. I’m a complete Thesis noob, still getting the hang of hooks, and can’t seem to figure this out. Thanks so much.

  2. Jun 9, 2010

    Hi Alexis,

    Sure. I’ve actually written a post on it in case anybody else is looking for the same thing. It’s a pretty easy fix. Try it and let me know if it needs any additional fixing for your particular install, because sometimes there will be some CSS somewhere that is slightly different that leads to something getting messed up somewhere. Here’s the link:


  3. Alvin
    Aug 24, 2010

    Nice tut!
    Is this also possible for the homepage posts ?

    It seems pretty easy , but i am not an wp expert 🙁


Post a Comment

Your email address will not be published.