0

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(); ?>
3
  • 1
    Hello @James - Welcome to the WordPress Development community! Could you please explain why your current solution "isn't working?" What specifically is it doing that it should not be? Please read the How to Ask section of our help center for more tips on what goes into a good question.
    – bosco
    May 5, 2015 at 19:49
  • Please don´t crosspost here and on "normal" SO. I think it´s not really appreciated.
    – flomei
    May 5, 2015 at 23:02
  • This has been asked so many times … Please use our search before you ask a question.
    – fuxia
    May 5, 2015 at 23:08

1 Answer 1

1

Try this code:

            <?php
              $args = array(
                'post_type' => 'post', 'posts_per_page' => -1, 'orderby' => 'menu_order', 'order' => 'ASC','cat' => '2',
              );
              $loop = new WP_Query( $args );
            ?>
            <?php if( $loop->have_posts() ): ?>


                  <?php $counter = 0; while ( $loop->have_posts() ) : $loop->the_post(); ?>
                    <?php if ($counter % 4 == 0 && $counter != 0): ?>
                      </div>
                      </div>
                    <?php endif; ?>
                    <?php if ($counter % 4 == 0 or $counter == 0): ?>
                      <div>
                      <div>
                    <?php endif; ?>
                      <div>
                      <div>
                      <h3><?php the_title(); ?></h3>
                      </div>                                                
                      </div>
                    <?php $counter++; endwhile; ?>        
                    </div>
                  </div>

            <?php endif; ?>

That's a sample code I use in this kind of situations and works like a charm. Just replace the necessary divs with your custom game divs.

Not the answer you're looking for? Browse other questions tagged or ask your own question.