KB Plugins

The best Wordpress plugins are free

Print this post

How do I make my posts (or anything else) have alternating colors?

This page is part of my Easy PHP Tutorial for WordPress Users. I'm assuming you already read the tutorial. If not, and something here seems confusing, well... read the tutorial :)

If you came here from the WP forums, please continue asking for support at the forums (rather than posting a comment here). I'm very sluggish at responding to comments on this page.

People frequently want to give something in their blog alternating colors. Most frequently, I’ve seen this question come up when people want the even posts to have a green background (or something) and the odd posts to have a red background (or something). Alternating colors can create a very flattering effect–you may have noticed that your WordPress administration screen uses alternating colors all over the place, especially on the “manage posts” table.

Fortunately, creating alternating colors is a very easy trick is you use just a little PHP. First, an overview.

Overview: What We’re Doing

In most themes, each post gets wrapped in a div that looks something like this:

<div class="post">...</div>

The class name might be different, but I have yet to see a theme that doesn’t wrap each post in a div with some class in there. What we want to do is assign an additional class to distinguish even from odd posts. Maybe something like this:

<div class="post even">...</div>
<div class="post odd">...</div>
<div class="post even">...</div>
...

Then, in the style.css file, you’ll insert something like this:

.post{ ... the theme author will have put properties here ... }
.odd{background:#f00;}
.even{background:#0f0;}

And voila, odd posts are red and even posts are green. To accomplish this trick, we need minimal PHP. Here goes:

How to Do It

Open up your Wordpress template folder. You need to open whichever file controls the part of your blog in question. If we’re talking about your main page (we probably are), then you probably want to open index.php. (But if there’s a home.php, open that instead.)

Find the beginning of the loop . Usually, that looks something like one of these:

<?php if ( have_posts() ) : while( have_posts() ): the_post(); ?>
<?php while( have_posts() ): the_post(); ?>
<?php while( have_posts() ){ ?>

Now, just before the loop starts, insert this line of code, exactly as shown, on a line by itself:

<?php $odd_or_even = 'odd'; ?>

Now, right after the loop starts, there is probably a <div> wrapper that looks something like this:

<div class="post">.

Change that to this:

<div class="post <?php echo $odd_or_even; ?>">

Easy so far, right? Now all we need to do is make the class name switch from “odd” to “even” with each post. Just insert this piece of code on the line after the one you just edited:

<?php $odd_or_even = ('odd'==$odd_or_even) ? 'even' : 'odd'; ?>

That piece of code may look strange to you. It uses what’s called a ternary operator , which is just a more concise way of writing this:

<?php
if ('odd' == $odd_or_even){
  $odd_or_even = 'even';
}else{
  $odd_or_even = 'odd';
}
?>

We’re done with the PHP. All you need to do now is add something to your CSS to make the .odd and .even class names look different.

12 comments »

1
Momo contributes
at 7:20 am on June 8, 2008 #

is it possible to alternate between more than two posts?

2
Joey thinks
at 8:37 am on June 14, 2008 #

Awesome tip. I used it to customize the search results for my theme. Thanks!

3
Brian opines
at 7:08 pm on July 22, 2008 #

On my site, the shading only appears on the post title, and not on the post content. Any ideas would be appreciated…

4
Cindi exclaims
at 6:59 am on July 23, 2008 #

What a great tutorial worked perfectly! Thank you so much!

5
Steve says
at 10:38 am on August 22, 2008 #

Thanks for the great tutorial Adam!

6
David remarks
at 12:38 pm on December 2, 2008 #

Excellent tutorial! Saved me from loading up yet another jquery script.

7
Lil Jon thinks
at 10:24 pm on December 13, 2008 #

Simply amazing! I had no idea how to do this beforehand, and I had always dreamed of adding it to my site. Thanks a lot!

8
Thus saith Adam
at 9:46 am on December 15, 2008 #

Brian: Make sure you added the alternating class name to the correct <div>. Sounds like you put it into the header’s div, not the post’s div. Fiddle around until it works.

Momo: Replace the ternary operator with the long version shown above:

<?php
if ('odd' == $odd_or_even){
  $odd_or_even = 'even';
}else{
  $odd_or_even = 'odd';
}
?>

And add in an additional line. (Note that I changed the variable name and CSS class names, too, so it makes more sense)

<?php
if ('class1' == $post_class){
  $post_class = 'class2';
}elseif ('class2' == $post_class){
  $post_class = 'class3';
}else{
  $post_class = 'class1';
}
?>
9
Sean comments
at 4:27 am on January 4, 2009 #

I’m trying to do this with a dynamic sidebar. In the functions.php file I currently have this code, but when I replace with echo $increment; the page goes all wonky $increment is currently set to and placed in the sidebar1.php file before dynamic sidebar code.

Not sure if I’m doing somethign wrong or if this just can’t be done.

if ( function_exists('register_sidebar') )
    register_sidebars(2, array(
        'before_widget' => '<div class="widget1">',
        'after_widget' => '</div><!--widget1-->',
        'before_title' => '<h3 class="shortsifr">',
        'after_title' => '</h3>',
    ));
10
Thus saith Adam
at 9:56 am on January 5, 2009 #

Sean, I’m not sure what you mean. But one thing is clear: You shouldn’t be using echo anywhere in that block of code.

11
Boon exclaims
at 5:49 pm on February 24, 2009 #

Actually the easiest thing ever! Amazing. Thanks a lot :)

12
at 4:01 pm on June 24, 2009 #

Hi,

Got everything in and post work great. since I use a black, whit, and gray theme, I thought it would be cool to reverse the colors odd and even for the post title. If I understand all correctly all we need to do is create some CSS for the postTitle odd and even but I think my syntax is wrong

h2.postTitle {
padding: 0 10px;
letter-spacing: -1px;
}
h2.postTitle odd {
background-color: #000000;

Does this sound right

JIM

Leave a comment

Comment Guidelines
  • Yes, your comments will be visible to everybody. (Unless you use the private contact form.)
  • Allowed HTML: <a> <b> <blockquote> <cite> <code> <em> <i> <strong>
  • Code: Put code in `backticks` (above your "Tab" key) or it won't display well
  • Gravatars: To override the default image by your comment, use a gravatar
  • Links: If you include more than one link, your comment will go into the spam queue

Please read before commenting: Because my real job has me swamped at the moment, I am not supporting my plugins at this time. Sorry. This may last several weeks.

If you have a bug report, feature request, or other general feedback about a plugin, please leave a comment—but do not expect an immediate response. If you are requesting help, though, please check the plugin's documentation thoroughly rather than ask your question as a comment.

Thank you for your understanding.