Wordpress – applying a class to the first and last post of each row

Question

I'm building a WordPress theme using the 960 grid system. I've got a startpage that displays three thumbnails on each row. These thumbnails are in a child grid with parent wrapper.

So, I need to wrap the first post of each row with a class called "alpha" and the last post (third in my case) of each row with a class called "omega".

Any idea how I might solve this?

Here's my current code, any help is appreciated!

<?php get_header(); ?>


<div class="grid_12 projects"><!-- PROJECTS BEGINS -->

<?php
if (have_posts()) :
while (have_posts()) :
?>

<div class="grid_4 project">

<?php
the_post();
?>

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>

<h2>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>

</div><!-- PROJECT ENDS -->

<?php
endwhile;
endif;
?>

</div><!-- PROJECT-CONTAINER ENDS -->

<?php get_footer(); ?>

Answer 1

Ok try this one:

See //Add this comments

Full Code:

<?php get_header(); ?>


<div class="grid_12 projects">

<?php
if (have_posts()) :

$i = 1; //Add this

while (have_posts()) :

//Add this
if ($i === 1) {
    $new_class = "alpha";
  }
  elseif ($i % 3 == 0) {
    $new_class = "omega";
    $i = 0;
  } else {
    $new_class = "";
  }
//End
?>

<div class="grid_4 project <?php echo $new_class; ?>">
                           <!-- ^^^^^^^^^^^^^^^^^^^-->
<?php
the_post();
?>

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>

<h2>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>

</div><!-- PROJECT ENDS -->

<?php
$i++; //Add this
endwhile;
endif;
?>

</div><!-- PROJECT-CONTAINER ENDS -->

<?php get_footer(); ?>

Answer 2

Note: if you don't want the last element to always have omega but only if it's truly the 3rd element on a row, remove ||$ix==$wp_query->post_count below.

<?php get_header(); ?>

<div class="grid_12 projects"><!-- PROJECTS BEGINS -->

<?php
$ix = 0; // <<< add this
if (have_posts()) :
while (have_posts()) :

$ix++; // <<< add this

?>

<div class="grid_4 project<? // << add these lines
echo ($ix == 1 || ($ix-1)%3)?' alpha':'';
echo ($ix%3||$ix==$wp_query->post_count)?' omega':'';
?>">

<?php
the_post();
?>

// nothing else changed

Another, and possibly better solution if you are okay with using CSS3 is the nth-child selector.

.grid_12.projects .project:nth-child(3n+1) {
    /* alpha styling here */
}

.grid_12.projects .project:nth-child(3n+3) {
    /* omega styling here*/
}