Alternating Posts Backgrounds for Twenty Ten

This is a short instruction how to add alternating styles to the post on the front page and in the archives of the wp3 default theme.

Edit loop.php of Twenty Ten, and locate:

<?php /* How to display all other posts */ ?>
<?php else : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Change this to:

<?php /* How to display all other posts */ ?>
<?php else : ?>
<?php $stripe = ($stripe == 'dark') ? 'bright' : 'dark'; ?>
<div id="post-<?php the_ID(); ?>" <?php post_class($stripe); ?>>

This will add the css classes .dark and .bright to the post classes.

To brighten it up, add these new formats to style.css (with a harmonious choice of your own color codes):

.dark { background-color: #3f6; }
.bright { background-color: #fc3; }

ref: http://codex.wordpress.org/Template_Tags/post_class

This coding is not limited to TwentyTen – you can use it in any loop as long as the theme utilizes the post_class().
The switcher part is:

<?php $stripe = ($stripe == 'dark') ? 'bright' : 'dark'; ?>

And the merging of the new class with post_class() is:

<?php post_class($stripe); ?>

10 Replies to “Alternating Posts Backgrounds for Twenty Ten”

  1. hi,

    i applied the above code..but i didnt get the result..i am using stylo theme..what is the process for alternate background colors for posts of stylo theme in word press..can any one please help me in this issue..what are the pages i need to edit..

    1. yes, i have seen and aswered your question in the forum – slightly different method – hope it works 😉

  2. Hey!
    I love how simple this is. The only problem is all my posts have a class of dark, instead of alternating between bright and dark. I don’t understand how the code in the “switcher” alternates the classes. Could you please explain it, in case there is something I need to adjust?

    I’m trying to alternate my posts so that I have the first one floating left, then the next one floating right, etc. so they alternate. I figure all I need to do is assign them right or left classes, then style them accordingly. Am I misunderstanding something?

    Thanks for your time.

    1. this line:
      <?php $stripe = ($stripe == 'dark') ? 'bright' : 'dark'; ?>
      is a shortform for:
      <?php if($stripe == 'dark') { $stripe = 'bright'; }
      else { $stripe = 'dark'; } ?>

      if the code is encountered the first time, $stripe is not set, i.e. is empty, and not ‘dark’; therefore the if statement sets $stripe = 'dark'; the second time, $stripe is ‘dark’, therefore the if statement sets $stripe = 'bright', etc. (use ‘left’ and ‘right’ instead for your plans).
      if you have wordpress related questions, consider to join the wordpress.org support forum and inquire there.

      1. Thanks for the explanation and the quick reply.

        I’m trying to do this in a twentyeleven child theme, but I’m beginning to think it’s not possible. The Loop seems to be split between the index.php and the content.php, and a lot of the post formats have their own if statements. I really only want to alternate the standard format, since that is the one with the thumbnail.

        I’ve been combing through the WP forum, and noticed that you have answered quite a few people with variations of this and the odd/even version. I’ve tried about 30 different variations and nothing works. Do you think it’s possible to do this (in the twentyeleven theme) or should I give up?

        (I first tried it with left and right, like you suggest in your reply, but it didn’t work, so I thought I should copy yours verbatim, and just style it left and right but that didn’t work either.)

        Incidentally, I used php post_class( $stripe );

      2. because twenty eleven is using the template part code, you might need to declare the $stripe variable as global or static.

    1. Hi James,
      if you refer to the background color, that is pure chance, and will change depending on the position of the post on the page.

      if you refer to the text color, in the second row of buttons in the visual editor, there is the capital A with a grey underline – that is to select a font color for the highlighted text.

      if you don’t have the second row of buttons yet, press the button top right (kitchen sink) to open the second row.

      hope this helps,
      for more detailed questions and answers, consider joining the wordpress suport forum

Leave a Reply to billionstrang Cancel reply

Your email address will not be published. Required fields are marked *