Welcome, visitor! Log in
 

KB Plugins blog

The best Wordpress plugins are free

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

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:

<code>__abENT__lt;div class=__abENT__quot;post__abENT__quot;__abENT__gt;__abENT__#46;__abENT__#46;__abENT__#46;__abENT__lt;__abENT__#8260;div__abENT__gt;</code>

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:

<code>__abENT__lt;div class=__abENT__quot;post even__abENT__quot;__abENT__gt;__abENT__#46;__abENT__#46;__abENT__#46;__abENT__lt;__abENT__#8260;div__abENT__gt;<br />
__abENT__lt;div class=__abENT__quot;post odd__abENT__quot;__abENT__gt;__abENT__#46;__abENT__#46;__abENT__#46;__abENT__lt;__abENT__#8260;div__abENT__gt;<br />
__abENT__lt;div class=__abENT__quot;post even__abENT__quot;__abENT__gt;__abENT__#46;__abENT__#46;__abENT__#46;__abENT__lt;__abENT__#8260;div__abENT__gt;<br />
__abENT__#46;__abENT__#46;__abENT__#46;</code>

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

<code>__abENT__#46;post{ __abENT__#46;__abENT__#46;__abENT__#46; the theme author will have put properties here __abENT__#46;__abENT__#46;__abENT__#46; }<br />
__abENT__#46;odd{background:#f00;}<br />
__abENT__#46;even{background:#0f0;}</code>

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:

<code>__abENT__lt;?php if ( have_posts() ) : while( have_posts() ): the_post(); ?__abENT__gt;<br />
__abENT__lt;?php while( have_posts() ): the_post(); ?__abENT__gt;<br />
__abENT__lt;?php while( have_posts() ){ ?__abENT__gt;</code>

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

<code>__abENT__lt;?php $odd_or_even = __abENT__apos;odd__abENT__apos;; ?__abENT__gt;</code>

Now, right after the loop starts, there is probably a <code>__abENT__lt;div__abENT__gt;</code> wrapper that looks something like this:

<code>__abENT__lt;div class=__abENT__quot;post__abENT__quot;__abENT__gt;__abENT__#46;</code>

Change that to this:

<code>__abENT__lt;div class=__abENT__quot;post __abENT__lt;?php echo $odd_or_even; ?__abENT__gt;__abENT__quot;__abENT__gt;</code>

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:

<code>__abENT__lt;?php $odd_or_even = (__abENT__apos;odd__abENT__apos;==$odd_or_even) ? __abENT__apos;even__abENT__apos; : __abENT__apos;odd__abENT__apos;; ?__abENT__gt;</code>

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:

<code>__abENT__lt;?php<br />
if (__abENT__apos;odd__abENT__apos; == $odd_or_even){<br />
  $odd_or_even = __abENT__apos;even__abENT__apos;;<br />
}else{<br />
  $odd_or_even = __abENT__apos;odd__abENT__apos;;<br />
}<br />
?__abENT__gt;</code>

We’re done with the PHP. All you need to do now is add something to your CSS to make the <code>__abENT__#46;odd</code> and <code>__abENT__#46;even</code> class names look different.

25 Comments

  1. Momo
    Posted June 8, 2008 at 7:20 am | Permalink

    is it possible to alternate between more than two posts?

  2. Posted June 14, 2008 at 8:37 am | Permalink

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

  3. Posted July 22, 2008 at 7:08 pm | Permalink

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

  4. Posted July 23, 2008 at 6:59 am | Permalink

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

  5. Posted August 22, 2008 at 10:38 am | Permalink

    Thanks for the great tutorial Adam!

  6. David
    Posted December 2, 2008 at 12:38 pm | Permalink

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

  7. Posted December 13, 2008 at 10:24 pm | Permalink

    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. Posted December 15, 2008 at 9:46 am | Permalink

    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. Posted January 4, 2009 at 4:27 am | Permalink

    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. Posted January 5, 2009 at 9:56 am | Permalink

    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. Posted February 24, 2009 at 5:49 pm | Permalink

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

  12. Posted June 24, 2009 at 4:01 pm | Permalink

    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

  13. Posted July 13, 2009 at 9:29 am | Permalink

    I know you are busy, just posting so I do not forget. Did find out going about this wrong. The combo should be in the html not the CSS but still can not get it to work. Here is where I am going

    <h2 class=”postTitle even”= This is even Title

    I think it has something to do with the PHP?

    Thanks, when you can

    JIM

  14. Fernando
    Posted September 28, 2009 at 4:20 pm | Permalink

    JIM:
    If you have in HTML:
    <h2 class=”postTitle even”>
    Means that h2 have two classes: PostTitle AND even.
    So your css should be:

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

    A little late, but maybe helps someone.

  15. Posted February 11, 2010 at 4:09 pm | Permalink

    Let me try this again with the back-ticks, lol.

    Adam-

    Thanks for your great tutorials! I used a previous one to style the first post only on the homepage and it worked like a charm. Now I would also like to add the above function so I can have alternating colors for odd and even posts. The only problem is, I can’t seem to get it to work alongside the previous addition of $firstpost.

    Here is what I currently have:

    get_header();
    ?>
    <?php include (ABSPATH . '/wp-content/plugins/featured-content-gallery/gallery.php'); ?>
    
    <?php $firstClass = 'firstpost'; ?>
    
    <?php $odd_or_even = 'odd'; ?>
    
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    <div id="post-<?php the_ID(); ?>" class="post <?php echo $firstClass; ?>"><?php $firstClass = ""; ?>

    After laying with it for some time, I was able to get it so that the colors were alternating but it messed up the styling for the first post. This is how I tried it:

    <div id="post-<?php the_ID(); ?>" class="post <?php echo $firstClass; ?><?php echo $odd_or_even; ?>"><?php $firstClass = ""; ?><?php $odd_or_even = ('odd'==$odd_or_even) ? 'even' : 'odd'; ?>

    And it resulted in ignoring the $firstpost styling. Do you know of a way in which i can combine the odd and even posting as well as the first post?

    Thanks!!!!

    ~Deirdre

  16. Posted February 11, 2010 at 4:25 pm | Permalink

    Put a space between these:

    <?php echo $firstClass; ?> <?php echo $odd_or_even; ?>

    Here’s the context:

    <div id="post-<?php the_ID(); ?>" class="post <?php echo $firstClass; ?> <?php echo $odd_or_even; ?>"><?php $firstClass = ""; ?><?php $odd_or_even = ('odd'==$odd_or_even) ? 'even' : 'odd'; ?>

    Hope that helps.

  17. Jen
    Posted April 22, 2010 at 10:33 am | Permalink

    I’ve tried several variations to apply this for use in a dynamic sidebar to no avail. How would you apply this to alternate the colors of the sidebar headings?

  18. Kevin Jones
    Posted June 27, 2010 at 10:14 pm | Permalink

    Thank you so much for this clear and awesome tutorial. I’ve been searching for a few hours on how to accomplish something like this and your tut was the answer. Keep up the fantastic work!

  19. Posted July 29, 2010 at 10:02 am | Permalink

    Excellent tutorial.. I tried as you mention to add the PHP code and what i got was that all the posts are colored, there’s no differentiation between the odds and evens.

    [edited. please post code in backticks per the instructions. but more generally, please don't post long chunks of code in the comments.]

  20. Alvin
    Posted August 25, 2010 at 2:33 am | Permalink

    Hi there! I am looking for this for days now , and finnaly found it.
    I am not a wp/php expert so could you help me out here?
    I have found the loop , but the “featured posts” are also in there , so where should i insert this ?

    See code;

    [editor: truncated for length]

  21. Posted August 25, 2010 at 7:00 am | Permalink

    Alvin, every theme is different. You’ll just need to play around with it until it works.

  22. Anna
    Posted September 17, 2010 at 2:51 pm | Permalink

    Thank you so much for this, just what I was looking for ^_^

    Just onw question, I’m a newby at php so I’m a bit lost, I have more than two classes, so I used the code you wrote for Momo, but in the first line before the loop starts:

    I’m assuming I have to put the three or more classes too, but how do I do that?

    I’m sorry if this is too noob of a question ^_^U

  23. viraj
    Posted August 9, 2011 at 11:48 am | Permalink

    very nice tutorial. Worked straight away. thanks a lot

  24. Posted August 14, 2011 at 2:38 pm | Permalink

    Thanks for the post. Really helped to know i could alternate between 2 or more post styles for the front page! Much easier than I thought

  25. Pradyumna
    Posted January 5, 2012 at 5:31 am | Permalink

    Amazing simplest solution to the problem i saw many sites but this is Awesome ………. Thanks for the quick solution.