Style posts differently with a counter

You can add different classes to your posts within the loop so that you can style them differently. A good example would be that you have 3 posts on a line where the last post needs a margin of 0 to line up with the edge of the container. Or, style every other one or every third one a different color. Choices are limitless. You can change the number below to target which posts you want to style differently.

<?php
  ++$counter;
  if($counter == 3) { // change number to pick which one is going to be different
    $postclass = 'third-post';
    $counter = 0;
  } else { $postclass = 'other-post-cat'; }
?>

 

Here is an example of a normal loop and styling every other post:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
  ++$counter;
  if($counter == 2) { // "2" to style every other post
    $postclass = 'second-post';
    $counter = 0;
  } else { $postclass = 'other-post'; }
?>
<div class="blogentry-tax <?php echo $postclass; ?>">
<h2><?php the_title(); ?></h2>
</div>
<?php endwhile; endif; ?>

 

Here is an example of a Custom Query when viewing a Custom Taxonomy and styling every third post:

<?php
$current_query = $wp_query->query_vars;
$wp_query = new WP_Query();
$wp_query->query(array(
	$current_query['taxonomy'] => $current_query['term'],
	'paged' => $paged,
	'posts_per_page' => 10,
));

while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

<?php
  ++$counter;
  if($counter == 3) {
    $postclass = 'third-post';
    $counter = 0;
  } else { $postclass = 'other-post'; }
?>

<div class="blogentry-tax <?php echo $postclass; ?>">
     <?php the_title(); ?>
</div>

<?php endwhile; wp_reset_postdata(); ?>

 

Leave a Reply

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

− 2 = 6