Wordpress Loop posts in Bootstrap 3 grid layout Wordpress Loop posts in Bootstrap 3 grid layout wordpress wordpress

Wordpress Loop posts in Bootstrap 3 grid layout


// Opening container or wrap outside of the loop<div class="container my-container">// start the loop<?php  $args=array(     'post_type' => 'post',     'post_status' => 'publish',     'posts_per_page' => 18    );  $my_query = null;  $my_query = new WP_Query($args);  if( $my_query->have_posts() ) {    $i = 0;    while ($my_query->have_posts()) : $my_query->the_post();  // modified to work with 3 columns  // output an open <div>  if($i % 3 == 0) { ?>   <div class="row">  <?php  }  ?>    <div class="col-md-4">      <div class="my-inner">      // all your content, title, meta fields etc go here.      </div>    </div>  // increment the loop BEFORE we test the variable      <?php $i++;       if($i != 0 && $i % 3 == 0) { ?>        </div><!--/.row-->        <div class="clearfix"></div>      <?php       } ?>      <?php          endwhile;        }        wp_reset_query();        ?></div><!--/.container-->  


I just think all of you have complicated the thing very much.The main problem of all of your solutions is that if you do not have the equal number of elements in the row you do not close the final row, and you get a real mess...

Let me explain my solution with only one IF (similar to yours, but without complicated stuff, and adjustable)

Open rowRun loopIf it is the last element in row close row, and open another oneClose the final row

And here is the example in the loop (I do not get into which WP_Query you display and how did you get your posts)

$columns_num = 4; // The number of columns we want to display our posts$i = 0; //Counter for .row divsecho '<div class="row">';    /* Start the Loop */    while ( have_posts() ) : the_post();        echo '<div class="single-product-archive col-md-' . 12 / $columns_num . '">'            get_template_part( 'template-parts/content', get_post_format() );        echo '</div>';        if($i % $columns_num == $columns_num - 1 ) {              echo '</div> <div class="row">';        }        $i++;    endwhile;echo '</div>';

Note that you can change the value of $columns_num = 4. You can even make a select box from your customizer and to just select how many columns per row you want. Ofcourse, value must divide number 12 (bootstrap columns) without rest. So just 1, 2, 3, 4 and 6 are acceptible.


Yes you can do it.

<?php    $args=array(    'post_type' => 'artist',    'post_status' => 'publish',    'posts_per_page' => -1,    'caller_get_posts'=> 1    );    $my_query = null;    $my_query = new WP_Query($args);if( $my_query->have_posts() ) {    echo '';$i = 0;while ($my_query->have_posts()) : $my_query->the_post();    if($i % 4 == 0) { ?>         <div class="row">    <?php    }    ?>    <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>    <p><a href="<?php the_field('artist_link'); ?>"><?php the_field('artist_name'); ?></a></p>    <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" /></a></p>    <?php        if($i % 4 == 0) { ?>         </div>    <?php    }    $i++;endwhile;}wp_reset_query();?>