Wordpress Loop posts in Bootstrap 3 grid layout

Question

I am using Bootstrap 3 within Wordpess and have an issue getting my archive posts to display across the page in a grid format. My wordpress loop code is...

<?php if ( have_posts() ) : ?>

<?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 '';
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li>
<img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" />
</li>

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

<?php while ( have_posts() ) : the_post(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

This displays a list containing the post's image. Right now, they list one after the other down the page.

How would I get them to use my bootstrap grid showing 4 across the page, then the next 4 in the row beneath, then the next 4 in row beneath that like this...

<div class="row">

<div class="col-md-3">
<li>image 1 goes here</li>
</div>

<div class="col-md-3">
<li>image 2 goes here</li>
</div>

<div class="col-md-3">
<li>image 3 goes here</li>
</div>

<div class="col-md-3">
<li>image 4 goes here</li>
</div>

</div>

etc. Is that possible? Basically i want the Wordpress loop to list ALL of my posts 4 across the page instead of one after the other in a html list down the page.

Answer 1

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

Answer 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.

Answer 3

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

Answer 4

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> 

Answer 5

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; ?>

Answer 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.