wordpress_loop_with_sections.php

<div class="page-inner">

	<div class="around-add">
        <div class="section-wide large-12 columns" style="margin:3px auto 10px;"><h2 class="section-title">Latest Stories</h2></div>

 <?php
       $paged   = (get_query_var('paged')) ? get_query_var('paged') : 1;
       $counter = 1;
       $args    = array(
       'post_type' => 'post',
       'paged' => $paged,
       'posts_per_page' => '10'
    
);
// different number of posts on the homepage and on the other pages.
  if (1 == $paged) {
     $args = array(
    'post_type' => 'post',
    'paged' => $paged,
    'posts_per_page' => '22'
);
  }
// The Query
$query = new WP_Query($args);

// The Loop
if ($query->have_posts()) {
    while ($query->have_posts()) {
        
        $query->the_post();
        if (1 == $paged) {

            //CODE FOR THE FIRST SECTION
            
            if ($counter < 6) {
                echo '<div class="small-12 large-4 columns margin-bottom"><div class="column-inner hover-me"><figure class="image-tint"><a href="';
				the_permalink();
				echo '">';
				
                if (has_post_thumbnail()) {
                    the_post_thumbnail('home-equal-featured-image');
                }
                echo '</a></figure>';
                $categories = get_the_category();
                if (!empty($categories)) {
                    echo '<p class="cat-title"><a href="' . esc_url(get_category_link($categories[0]->term_id)) . '">' . esc_html($categories[0]->name) . '</a></p>';
                }
                echo '<h3 class="home-blog-title"><a href="';
                the_permalink();
                echo '">';
                the_title();
                echo '</a></h3></div></div>';
            }
            
            //CODE FOR THE SIXTH (BIG ONE)
            
            elseif ($counter == 6) {
                echo '<div class="small-12 large-4 columns" style="text-align:center;margin-bottom: 30px;"><div class="column-inner sixth-add">';
                if (is_active_sidebar('add_sixth')):
                    dynamic_sidebar('add_sixth');
                endif;
                echo '</div></div>';
                $feat_image = wp_get_attachment_url(get_post_thumbnail_id($post->ID));
                echo '<div class="section-wide"><h2 class="section-title">EDITORS PICKS</h2></div>';
                echo '<div class="small-6 large-6 columns editor-pick first" style="background-image:url(';
                echo $feat_image;
                echo ')">';
                $categories = get_the_category();
                if (!empty($categories)) {
                    echo '<p class="cat-title-middle"><a href="' . esc_url(get_category_link($categories[0]->term_id)) . '">' . esc_html($categories[0]->name) . '</a></p>';
                }
                
                echo '<h3 class="home-blog-middle-title-first"><a href="';
                the_permalink();
                echo '">';
                the_title();
                echo '</a></h3></div>';
                
            }
            //CODE FOR THE OTHER EDITOR PICKS
                elseif ($counter > 6 && $counter < 11) {
                
                echo '<div class="small-3 large-3 editor-pick others" style="background-image:url(';
                echo wp_get_attachment_url(get_post_thumbnail_id($post->ID));
                echo ')">';
                $categories = get_the_category();
                if (!empty($categories)) {
                    echo '<p class="cat-title-middle"><a href="' . esc_url(get_category_link($categories[0]->term_id)) . '">' . esc_html($categories[0]->name) . '</a></p>';
                }
                
                echo '<h3 class="home-blog-middle-title"><a href="';
                the_permalink();
                echo '">';
                the_title();
                echo '</a></h3></div>';
  
            }
            //CODE FOR 11TH AND THE SUBSCRIPTION BOX
                elseif ($counter == 11) {
                   
                echo '<div class="clear"></div></div><div class="subscribe"><div class="cont"><div class="section-wide above-subs"></div>'; //ends around the add
                 
                if (is_active_sidebar('get_goods')):
                    dynamic_sidebar('get_goods');
                endif;
                 echo '<div class="section-wide below-subs"></div></div></div><div class="around-add">'; //starts around the add
                                echo '<div class="small-12 large-6 columns margin-bottom-last-section"><div class="column-inner hover-me"><figure class="image-tint">';
                if (has_post_thumbnail()) {
                    the_post_thumbnail('home-equal-featured-image');
                }
                echo '</figure>';
                $categories = get_the_category();
                if (!empty($categories)) {
                    echo '<p class="cat-title"><a href="' . esc_url(get_category_link($categories[0]->term_id)) . '">' . esc_html($categories[0]->name) . '</a></p>';
                }
                echo '<h3 class="home-blog-title"><a href="';
                the_permalink();
                echo '">';
                the_title();
                echo '</a></h3><div class="the-excerpt">';
                the_excerpt();
                echo '</div></div></div>';
            }
            //CODE FOR THE FIRST BATCH OF THE LAST SECTION
                elseif ($counter > 11 && $counter < 17) {
                
                echo '<div class="small-12 large-6 columns margin-bottom-last-section"><div class="column-inner hover-me"><figure class="image-tint">';
                if (has_post_thumbnail()) {
                    the_post_thumbnail('home-equal-featured-image');
                }
                echo '</figure>';
                $categories = get_the_category();
                if (!empty($categories)) {
                    echo '<p class="cat-title"><a href="' . esc_url(get_category_link($categories[0]->term_id)) . '">' . esc_html($categories[0]->name) . '</a></p>';
                }
                echo '<h3 class="home-blog-title"><a href="';
                the_permalink();
                echo '">';
                the_title();
                echo '</a></h3><div class="the-excerpt">';
                the_excerpt();
                echo '</div></div></div>';
            }
            //CODE FOR THE MIDDLE OF THE LAST SECTION
                elseif ($counter == 17) {
                echo '<div class="small-12 large-12 columns">';
                if (is_active_sidebar('add_last_section')):
                    dynamic_sidebar('add_last_section');
                    echo '</div>';
                endif;
                echo '<div class="small-12 large-6 columns margin-bottom-last-section"><div class="column-inner hover-me">';
                if (has_post_thumbnail()) {
                    the_post_thumbnail('home-equal-featured-image');
                }
                
                $categories = get_the_category();
                if (!empty($categories)) {
                    echo '<p class="cat-title"><a href="' . esc_url(get_category_link($categories[0]->term_id)) . '">' . esc_html($categories[0]->name) . '</a></p>';
                }
                echo '<h3 class="home-blog-title"><a href="';
                the_permalink();
                echo '">';
                the_title();                
                echo '</a></h3><div class="the-excerpt">';
                the_excerpt();
                echo '</div></div></div>';
            }
            //CODE FOR THE LAST BATCH OF THE LAST SECTION
                elseif ($counter > 17 && $counter < 23) {
                
                echo '<div class="small-12 large-6 columns margin-bottom-last-section"><div class="column-inner hover-me"><figure class="image-tint">';
                if (has_post_thumbnail()) {
                    the_post_thumbnail('home-equal-featured-image');
                }
                 echo '</figure>';
                $categories = get_the_category();
                if (!empty($categories)) {
                    echo '<p class="cat-title"><a href="' . esc_url(get_category_link($categories[0]->term_id)) . '">' . esc_html($categories[0]->name) . '</a></p>';
                }
                echo '<h3 class="home-blog-title"><a href="';
                the_permalink();
                echo '">';
                  the_title();                
                echo '</a></h3><div class="the-excerpt">';
                the_excerpt();
                echo '</div></div></div>';
            }

            else {
                
               // DO NOTHING - WE SET FIXED NUMBER OF POSTS HERE :)
            }
            
            
        } //END PAGE IF
        
        else {
            
            // ALL THE OTHER PAGES OF THE LOOP
            
          echo '<div class="small-12 large-6 columns margin-bottom-last-section"><div class="column-inner hover-me"><figure class="image-tint">';
                if (has_post_thumbnail()) {
                    the_post_thumbnail('home-equal-featured-image');
                }
                 echo '</figure>';
                $categories = get_the_category();
                if (!empty($categories)) {
                    echo '<p class="cat-title"><a href="' . esc_url(get_category_link($categories[0]->term_id)) . '">' . esc_html($categories[0]->name) . '</a></p>';
                }
                echo '<h3 class="home-blog-title"><a href="';
                the_permalink();
                echo '">';
                   the_title();                
                echo '</a></h3><div class="the-excerpt">';
                the_excerpt();
                echo '</div></div></div>';
        }
        $counter++;
    }
    
    wp_reset_postdata();
    
} else {
    echo 'no posts here';
}
?>    

		<div class="large-12 columns navigation-container">
			     <?php if ( get_next_posts_link() ) : ?>
        <div class="nav-previous"><?php next_posts_link( __( 'Next posts', 'flatsome' ) ); ?></div>
        <?php endif; ?>

        <?php if ( get_previous_posts_link() ) : ?>
        <div class="nav-next"><?php previous_posts_link( __( 'Previous posts', 'flatsome' ) ); ?></div>
        <?php endif; ?>
		</div>
            </div> <!--   ends around the add -->
	</div><!-- .page-inner -->


	</div><!-- #content -->

</div><!-- end row -->
</div><!-- end page-wrapper -->

In one of my recent projects, the client wanted to create a homepage with several different layouts for groups of posts. Normally this is not a problem – you can just create several loops, reset them, and you can get any imaginable layout. But this was a different pair of boots – the homepage consisted of several sections, with widget areas in between, while each section (there were three sections of posts) had a different layout. Moreover, the second and every other page of posts had a different layout again. I’m sure there are couple of ways to achieve this, but I found the method with counter as the most convenient one.

In my example, you will find some registered widget areas and some classes that were specific for this project. Also, on the first page, I set a different number of posts on the homepage and for the other pages. In any case, here is the code, feel free to use it if you find any of use of it.