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); ?>