Posts in Multiple Columns and Rows with one single loop

You can do this in one loop without as custom query. A couple of clever functions should get you there

So lets look at a solution. First things first. I would suggest to separate your code completely here for easiness of reading and organisation. Roll back the changes in content.php and use this template only for all other templates. Create a separate template for the homepage, lets call this content-home.php.

Put that template away for a while, but keep it in mind. Lets looks at the index.php template for your homepage. Most of your code in redundant and is not needed, so you can remove most parts here. Your index.php should look something like

<?php get_header(); ?>

<section class="row main_content"> 

    <div class="small-12 large-4 large-push-8 columns">
        <?php get_sidebar( $name ); ?>
    </div> 

    <div class="hero">  
        <div class="small-12 large-8 large-pull-4 columns">

            <?php 

                if( have_posts() ) {

                    while( have_posts() ) {
                        the_post();

                        get_template_part( 'content', 'home' );

                    }

                    previous_posts_link('Newer');
                    next_posts_link( 'Older' );

                }else{ ?>

                    <p>
                        <?php _e( 'Sorry, no posts matched your criteria.' ); ?>
                    </p>

                <?php }
            ?>

<?php get_footer(); ?>

Custom post types are not included by default in the main query, except on taxonomy pages and post type archive pages. To get your homepage to display custom post types, we will use pre_get_posts to add them to the home page. Do not use a custom query to do this. Don’t drop the main query in favor of a custom query. I have explained everything in this post, so be sure to go and read that post and all linked posts

Ok, now open up functions.php and add the following code. This will add your custom post type to home page. (This code uses closures which needs PHP 5.3+)

add_action( 'pre_get_posts', function ( $q ) {

    if( $q->is_main_query() && $q->is_home() ) {

        $q->set( 'post_type', 'blog' );

    }

});

You now have your custom post type displaying on your homepage, and by just placing the_title(); in content-home.php you will at least see the titles of your custom post type posts

Now, lets get back to content-home.php. You can make use of the build-in loop counter here which can be accessed through $wp_query->current_post, and remember, this counter starts at 0

I have taken your code from your answer as a quick reference and combined it with what should go into your content-home.php. Here is a basic idea of what your content-home.php should look like

<?php

if( $wp_query->current_post == 0 ) { ?>

            <!--Start of the FEATURED post image-->
            <div class="hero_img"><a href="https://wordpress.stackexchange.com/questions/175944/<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a></div>
            <!--End of the FEATURED post image-->

            <div class="thumbpost-text">
                <h2 class="thumbpost-titles"><a href="https://wordpress.stackexchange.com/questions/175944/<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
                <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
            </div>

        </div>

    </div>

</section>

<?php  }else{//End of the Main image post


    if( $wp_query->current_post == 1 ){
        echo "<div class=row sub_content>"; 
    }
    ?>  
    <div class="small-12 medium-4 large-4 columns">
        <a href="https://wordpress.stackexchange.com/questions/175944/<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a>
        <div class="thumbpost-text">
            <h2 class="thumbpost-titles"><a href="https://wordpress.stackexchange.com/questions/175944/<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
        </div>
    </div>

    <?php
    if ( $wp_query->current_post == 3 ){
        echo "</div><div class=row sub_content>";
    }

    if ( $wp_query->current_post == 6){
        echo "</div>";
    }

} ?>

This should be enough to make everything work. Extend and modify as needed

EDIT

From your comments, for a static front page, thing will look a bit different. pre_get_posts will not work on a static front page or a page template, so you can delete that part from functions.php. This is why it is so important to give correct info in your question.

Here you will need to use a custom query. In your template that you use for the static front page, paste the following code (I have made some extra changes here to accommodate the styling issue)

<?php get_header(); ?>

<section class="row main_content"> 

    <div class="small-12 large-4 large-push-8 columns">
        <?php get_sidebar( $name ); ?>
    </div> 

    <div class="hero">  
        <div class="small-12 large-8 large-pull-4 columns">

            <?php 
                //THE LOOOP
                $paged = get_query_var( 'page' ) ? get_query_var( 'page' ) : 1;

                $args = array( 
                    'post_type' => 'blog', 
                    'paged' => $paged,
                    'posts_per_page' => 12
                ); 
                $q = new WP_Query($args);

                if( $q->have_posts() ) {

                    while( $q->have_posts() ) {
                        $q->the_post();

                        get_template_part( 'content', 'home' );

                    }

                    previous_posts_link('Newer');
                    next_posts_link( 'Older', $q->max_num_pages );

                    wp_reset_postdata();

                }else{ ?>

                    <p>
                        <?php _e( 'Sorry, no posts matched your criteria.' ); ?>
                    </p>

                <?php }
            ?>

<?php get_footer(); ?>

Remember, the static front page uses page not paged for the value of the [paged][2] parameter

As for the styling issue, I have copied from your answer, so there might be a problem. Try the following in content-home.php

<?php

if( $q->current_post == 0 ) { ?>

            <!--Start of the FEATURED post image-->
            <div class="hero_img"><a href="https://wordpress.stackexchange.com/questions/175944/<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a></div>
            <!--End of the FEATURED post image-->

            <div class="thumbpost-text">
                <h2 class="thumbpost-titles"><a href="https://wordpress.stackexchange.com/questions/175944/<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
                <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
            </div>

        </div>

    </div>

</section>

<?php  }else{//End of the Main image post


    if( $q->current_post == 1 ){
        echo "<div class=row sub_content>"; 
    }
    ?>  
    <div class="small-12 medium-4 large-4 columns">
        <a href="https://wordpress.stackexchange.com/questions/175944/<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a>
        <div class="thumbpost-text">
            <h2 class="thumbpost-titles"><a href="https://wordpress.stackexchange.com/questions/175944/<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
        </div>
    </div>

    <?php
    if ( $q->current_post == 3 ){
        echo "</div><div class=row sub_content>";
    }

    if ( $q->current_post == 6){
        echo "</div>";
    }

} ?>

Leave a Comment