Multiple loops on same category with different design

Question

I am having a problem regarding the showing the multiple loops on the category posts i want a posts from a category=social where 3 design is located the structure is as follows

Note: I want a posts with-out duplication

Here is the code where i am facing a problem

           <?php 
           $args=array(
              'posts_per_page' => 1,
              'category_name' => 'social'
                    );
           $my_query = new WP_Query($args);
             while ($my_query->have_posts()) : $my_query->the_post(); 

             if( 1 > $wp_query->current_post ): ?>
        <article class="post post--overlay post--overlay-xs post--overlay-floorfade post--overlay-bottom cat-1">
           <?php 
           $image = get_the_post_thumbnail_url(get_the_ID(),'full');

            ?>
           <div class="background-img" style="background-image: url(<?php echo $image; ?>)"></div>
           <div class="post__text inverse-text">
              <div class="post__text-wrap">
                 <div class="post__text-inner">
                    <h3 class="post__title typescale-2"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

                 </div>
              </div>
           </div>
        </article>
        <?php else: break; endif; endwhile; wp_reset_postdata(); ?>

        <div class="spacer-xs"></div>
        <ul class="list-space-xs list-seperated list-square-bullet-exclude-first list-unstyled">
           <?php 
           $wp_query->current_post = 2;
           while ( have_posts() ) : the_post();
            ?>
           <li>
              <article class="post--horizontal post--horizontal-xs cat-2">
                 <div class="post__thumb"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array( 100, 75 ) ); ?></a></div>
                 <div class="post__text">
                    <h3 class="post__title typescale-1"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

                 </div>
              </article>
           </li>
           <?php endwhile; ?>

           <?php 
           // Problem in showing the post in the third loop 

           while(have_posts()): the_post(); ?>
           <li>
              <article class="cat-4">
                 <div class="post-content">
                    <h3 class="post__title typescale-0"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                 </div>
              </article>
           </li>
        <?php endwhile; ?>

        <?php  ?>

        </ul>

I got help from the following site Multiple Loops Homepage?

Answer 1

In the first loop you display posts from the social category, so you should put it at the end of code. And you query for only one post from that category: 'posts_per_page' => 1.

<?php 
//
// display first post
while( have_posts() )
{
    the_post();

    ?>
    <article class="">

    </article>
    <?php 
    // exit from loop after first posts (count from 0)
    if ( $wp_query->current_post >= 0 )
        break;
}

?>
<div class="spacer-xs"></div>
    <ul class="list-space-xs list-seperated list-square-bullet-exclude-first list-unstyled">
    <?php

    //
    // display second post
    while( have_posts() )
    { 
        the_post();
        ?>
        <li>
            <article class="post--horizontal post--horizontal-xs cat-2">

            </article>
        </li>
        <?php 

        // exit from loop after second posts
        if ( $wp_query->current_post >= 1 )
            break;
    }

    //
    // display posts from "category=social"
    $args=array(
        'posts_per_page' => 3, // <-- 
        'category_name' => 'social'
    );
    $my_query = new WP_Query($args);
    while ($my_query->have_posts()) : $my_query->the_post();
    ?>
        <li>
            <article class="cat-4">
            </article>
        </li>
    <?php endwhile; ?>


    ?>
    </ul>
</div>
<?php