将DIV中的每1-4个Wordpress帖子换行

Question

I am trying to wrap every row of wordpress posts with a div with a class of row.

Have been trying to follow the answers from another question linked below But seem to be having trouble as my loop is a little different. Also I would like any rows with 1 or more posts to be wrapped in a row also...

I need to wrap every 4 wordpress posts in a div

<?php

    query_posts('cat=2'); 
    $i = 0;
    $wrap_div = "<div class='row'>";

    if ( have_posts() ) : 
        $total_posts = $wp_query->post_count;
        echo $wrap_div;

        while ( have_posts() ) : the_post();
?>

<div class="four columns gameListing" id="" data-count="">       
    <img class="gameLogo" src="" > 
    <div class="gameInfo">
        <h2 class="gameTitle"></h2>
        <div class="gameRating"></div>
    </div>
    <a class="gameCta" rel="" data-post-id="" >
         <span class="title" data-id="">Click to Play</span
    </a>
</div>

<?php 

        if ( $i % 4 == 0 && $i != 0 && ( $i + 1 ) != $total_posts ) {
            echo '</div>' . $wrap_div;
        }

        $i ++;

?>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

Answer 1

Can be a situation when post_count not multiple of 4

<?php
$my_query = new WP_Query( array( 'category__in' => 2 ) );
$wrap_avery = 4;
$index = 0;

$need_end_div = $my_query->post_count % $wrap_avery > 0;

while( $my_query->have_posts() ) {
    $my_query->the_post();
    $index++;

    // open row if index = 1, 5, 9...
    if( ($index - 1) % $wrap_avery == 0 ) {
        echo "<div class='row'>";
    }

    //todo: block HTML here

    // close row if index = 4, 8, 12...
    if( $index % $wrap_avery == 0 ) {
        echo '</div>';
    }

}

// close div if posts count not multiple of 4
if($need_end_div) {
    echo '</div>';
}

BTW you should no use query_posts