wordpress wrap every 3 posts in a div after the very first post in a loop

Question

I want to add every 3 posts in my index.php file in a row div but I would like to exclude the first post so that I can style the first post differently.

I currently have the loop working for every 3 posts but I would like to exclude the first post and style the first post differently to make it a featured post

below is my code

<div class="content post-main__content clearfix" id="post-<?php the_ID(); ?>" >
<?php
if(have_posts()) : for($count=0;have_posts();$count++) : the_post();
    $open = !($count%3) ? '<div class="post-main__row clearfix">' : ''; //Create open wrapper if count is divisible by 3
    $close = !($count%3) && $count ? '</div>' : ''; //Close the previous wrapper if count is divisible by 3 and greater than 0
    echo $close.$open;


?>
<div class="post-main__cell">
   <a href="<?php the_permalink() ?>" rel="bookmark" title="Click to go to <?php the_title(); ?>">
        <div class="post-main__cell-top">
            <?php the_post_thumbnail(array(330, 167,)); ?>
            <h3 class="content__category-name <?php foreach((get_the_category()) as $category) { echo $category->cat_name. ''; } ?>">
                <?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>
            </h3>
        </div>
        <div class="post-main__cell-bottom">
            <h2 class="archive-header"><?php the_title() ?></h2>
            <p class="paragraph--time"><?php posted_on(); ?></p>
        </div>
    </a>
</div>
<?php endfor; else : ?>

<?php echo $count ? '</div>' : ''; //Close the last wrapper if post count is greater than 0 ?>

Answer 1

There is a great answer here for creating a loop that separates out the first post from the rest: https://wordpress.stackexchange.com/questions/101096/how-to-show-one-post-different-from-the-rest

Then I'd use a grid framework or some simple css to style the remaining containers, personally I love getskeleton.com but this part is up to you using the blog loop template.

Answer 2

I worked it like this

 <?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => 12, 'paged' => $paged );
query_posts($args); ?>

<?php if (have_posts()) : ?>
<?php $postcount = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $postcount++; ?>

<?php if ($postcount == 1 && $paged == 1) : // if this is the first post & first page ?>
<div class="post-main__row clearfix">
    <div class="post-main__cell post-main__cell-large">
       <a href="<?php the_permalink() ?>" rel="bookmark" title="Click to go to <?php the_title(); ?>">
            <div class="post-main__cell-left clearfix">
                <?php the_post_thumbnail(array(691, 317,)); ?>
                <h3 class="content__category-name <?php foreach((get_the_category()) as $category) { echo $category->cat_name. ''; } ?>">
                    <?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>
                </h3>
            </div>
            <div class="post-main__cell-right">
                <h2 class="archive-header"><?php the_title() ?></h2>
                <p class="paragraph--time"><?php the_time('l, F jS, Y') ?></p>
            </div>
        </a>
    </div>
</div>
<?php
if(have_posts()) : for($count=0;have_posts();$count++) : the_post();
    $open = !($count%3) ? '<div class="post-main__row clearfix">' : ''; //Create open wrapper if count is divisible by 3
    $close = !($count%3) && $count ? '</div>' : ''; //Close the previous wrapper if count is divisible by 3 and greater than 0
    echo $close.$open;
?>
<div class="post-main__cell">
   <a href="<?php the_permalink() ?>" rel="bookmark" title="Click to go to <?php the_title(); ?>">
        <div class="post-main__cell-top">
            <?php the_post_thumbnail(array(330, 167,)); ?>
            <h3 class="content__category-name <?php foreach((get_the_category()) as $category) { echo $category->cat_name. ''; } ?>">
                <?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>
            </h3>
        </div>
        <div class="post-main__cell-bottom">
            <h2 class="archive-header"><?php the_title() ?></h2>
            <p class="paragraph--time"><?php the_time('l, F jS, Y') ?></p>
        </div>
    </a>
</div>
<?php endfor; else : ?>
<?php endif; ?>
<?php echo $count ? '</div>' : ''; //Close the last wrapper if post count is greater than 0 ?>
<?php endif; ?>
<?php endwhile; ?>