WordPress Loop posts in Bootstrap 3 grid layout

6 comments

1. // 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-->  
   

   Log in to Reply

2. 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 row
   Run loop
   If it is the last element in row close row, and open another one
   Close 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 divs
   
   echo '<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.

   Log in to Reply

3. 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();
   ?>
   

   Log in to Reply

4. I dont think any of these options fully work. They are assuming that the number of elements/posts is exactly divisible by the column number. For example:

   10 posts diveded by 2 = 5 nice closed rows

   but

   10 posts divided by 3 = 3 nice rows and one row not closed by a final div.

   My solution was to check the counter after the loop, if it was divisible ignore, else add the closing div.

   <?php $i = 0; //keep track of the row div ?>
   
   <?php foreach ($array_object as $key => $value ) :  ?>
   
       <?php if($i % 2 == 0) : ?>
            <div class="row">
       <?php endif; ?>
   
            <div class="col-md-6">
   
                 Some content in the div
   
           </div>
   
           <?php $i++; ?>
   
           <?php if($i != 0 && $i % 2 == 0) : ?>
               </div><!--/.row-->
           <?php endif; ?>
   
       <?php endforeach; ?>
   
       <?php if($i != 0 && $i % 2 != 0) : // close the row if it did not get closed in the loop ?>
           </div><!--/.row-->
       <?php endif; ?>
   

   Log in to Reply

5. THANKS TO GERMAIN THIS COMPLETE CODE ANSWERS MY QUESTION….

   <?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
   }
   ?>
   <div class="col-md-4">
   <div class="artist-thumbnail">
   <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_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" /></a></p>
   </div>
   </div>
   <?php    
   if($i % 4 == 0) { ?> 
   
   <?php
   }
   
   $i++;
   endwhile;
   }
   wp_reset_query();
   ?>
   </div> 
   

   Log in to Reply

6. These solutions work well, but they aren’t responsive, as in, without adding media calls to override bootstrap’s columns, they will always output the same number of posts per row, regardles of the screen size.

   I wanted a 3 column grid display that utilizes bootstrap column widths, floats and clearfixes, which meant that in order to avoid the non-uniform staggering that happens when floated post heights are different, all posts must be the same height.

   I was originally trying to do this with bootstrap’s .row-eq-height, but it uses flexbox, which displays all columns on the same row, regardless of the column sizes.

   This person’s jQuery solution solved my issue…
   Same height column bootstrap 3 row responsive

   // Add this javascript to header.php(or equivalent file)...
   
   jQuery( document ).ready(function() {
       var heights = jQuery(".col-eq-height").map(function() {
           return jQuery(this).height();
       }).get(),
   
       maxHeight = Math.max.apply(null, heights);    
       jQuery(".col-eq-height").height(maxHeight);
   });
   

   … and then add the .col-eq-height class to your defined bootstrap column…

     <?php 
       $args = array();
       $query = new WP_Query($args);
   
       while($query->have_posts()) : $query->the_post(); ?>
   
         <div class="col-eq-height col-md-4">                    
           <?php // Content goes here... ?>
         </div><!-- /.col-md-4 -->
   
       <?php endwhile;
       wp_reset_postdata();
     ?>
   

   Which results in a responsive, 3 column, stackable bootstrap grid of you posts.
   Hope that was on topic and helps someone out.

   Log in to Reply