Styling every other post differently is a powerful technique for creating interest in your theme and leading a visitor's eye down the page. The options for styling are endless, but some of the most popular and pervasive options include changing background images, colors, layout items, and more.
Open the template file in which you wish to style posts differently as they are iterated over. In general, you'll insert this functionality into a template like index.php
or category.php
. Place your cursor where you wish to insert The Loop. Insert the following code:
<?php if( have_posts() ) { $alt_post = 'alt-post'; while( have_posts() ) { the_post(); $alt_post = $alt_post == 'alt-post' ? '' : 'alt-post'; ?> <div class="post <?php echo $alt_post; ?>"> <h2><?php the_title(); ?></h2> </div> <?php } } ?>
Now open your theme's stylesheet, style.css
, and insert the following styles:
/** Styling for alternating...