Adding first and last classes to three column layout in Bones boilerplate

Question

I'm using the bones boilerplate theme in Wordpress and on the homepage am displaying a section containing three columns for the latest three posts in Wordpress.

The bones theme uses the responsive 960 grid and in any grid usage, we need to add the class of first to the first element and the class of last to the last element. I've tried implementing the ability to do this from this answer at their support forum.

Here is the code currently in use:-

<section class="home-section clearfix" id="what-we-say">
    <div class="wrap">
        <hgroup class=""><h2>What We Say</h2></hgroup>
        <div id="blog-posts">
            <?php
            $temp = $wp_query; $wp_query= null;
            $wp_query = new WP_Query(); $wp_query->query('showposts=3' . '&paged='.$paged);
            while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
            <?php $counter = 1; //counter tracks the number of the post we're on ?>

            <?php // This code uses the modulus operator to check the remainder of the $counter value in the current iteration and adds the 'first' or 'last' class based on either number sequence ?>

            <li class="blog-post fourcol <?php if ($counter % 3 == 0) { echo 'last';} elseif ($counter % 3 == 1) { echo 'first';} ?>"> 
                <article id="post-<?php the_ID(); ?>" <?php post_class( 'clearfix' ); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting">
                <header class="article-header">
                    <h3><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h3>
                    <p class="byline vcard"><?php printf( __( 'Posted <time class="updated" datetime="%1$s" pubdate>%2$s</time> by <span class="author">%3$s</span>.', 'bonestheme' ), get_the_time( 'Y-m-j' ), get_the_time( __( 'F jS, Y', 'bonestheme' ) ), bones_get_the_author_posts_link() ); ?></p>
                </header>
                <section class="entry-content clearfix" itemprop="articleBody">
                    <?php the_excerpt(); ?>
                </section>
                <footer class="article-footer">
                    <p class="clearfix"><?php the_tags( '<span class="tags">' . __( 'Tags:', 'bonestheme' ) . '</span> ', ', ', '' ); ?></p>
                </footer>
            </li>
            <?php $counter++; // This increases the value of $counter by 1 for every loop iteration ?>
            <?php endwhile; ?>

            <?php if ($paged > 1) { ?>

            <nav id="nav-posts">
                <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
                <div class="next"><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
            </nav>

            <?php } else { ?>

            <nav id="nav-posts">
                <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
            </nav>

            <?php } ?>

            <?php wp_reset_postdata(); ?>
        </div>
    </div>
</section>

This however, is adding the class of first to each instead of first on the first (1st) column and last on the last (3rd) column.

Can anyone see why my code may not be working as expected from the above? Thanks in advance.

Answer 1

I've just managed to resolve this now.

This

<?php $counter = 1; //counter tracks the number of the post we're on ?>

needed to be above

<?php
    $temp = $wp_query; $wp_query= null;
    $wp_query = new WP_Query(); $wp_query->query('showposts=3' . '&paged='.$paged);
    while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

(not below).

End code that works correctly is:-

<?php $counter = 1; //counter tracks the number of the post we're on ?>
<?php
$temp = $wp_query; $wp_query= null;
$wp_query = new WP_Query(); $wp_query->query('showposts=3' . '&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

All the rest of the snippet posted in the question remaining the same.