Custom Looping of Wordpress Posts

Question

I have been working on a Wordpress theme from few days. I want to achieve modern like layout in my theme's frontpage.

But I am having no clue that how to achieve it.

Now my wordpress theme loops the post in this manner

<div class="col-xs-8">
<article class="post1"></article>
<article class="post2"></article>
<article class="post3"></article>
<article class="post4"></article>
<article class="post5"></article>
</div>

What I want to achieve in the above code is

<div class="col-xs-8">

   <!-- First post Wrapper-->
   <div class="first-post">
      <article class="post1"></article>
   </div>

<!-- Rest all post Wrapper-->
   <div class="all-posts">
      <article class="post2"></article>
      <article class="post3"></article>
      <article class="post4"></article>
      <article class="post5"></article>
   </div>

</div>

Can anyone suggest a possible solution with this custom looping for a frontpage.

Answer 1

Hi I believe this should work

<div class="col-xs-8">
    <?php $count  = 1; ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
       <?php if $count = 1; ?>
            <!-- First post Wrapper-->
            <div class="first-post">
              <article class="post1"></article>
            </div>

            <!-- Rest all post Wrapper-->
            <div class="all-posts">
        <?php else : ?>
                <article class="post<?php echo $count; ?>"></article>
        <?php endif; ?>
    <?php $count++; endwhile; endif; ?>
    </div>
</div>