WordPress posts in grid view with Bootstrap 3 columns

3 comments

1. The easiest would be to use one container and put all the contetn items in it, then equal their height via js like that.

   PHP

   <?php query_posts('posts_per_page=9');while (have_posts()) : the_post();?>
       <div class="col-sm-4 blog-post thumb">
           <?php get_template_part('templates/content', get_post_format()); ?>
       </div>
   <?php endwhile?>
   

   JS:

   function equalHeight(group) {    
       tallest = 0;    
       group.each(function() {       
           thisHeight = $(this).height();       
           if(thisHeight > tallest) {          
               tallest = thisHeight;       
           }    
       });    
       group.each(function() { $(this).height(tallest); });
   } 
   
   $(document).ready(function() {   
       equalHeight($(".thumb")); 
   });
   

   If thats no option, you could do sth. like that:

   PHP

   <div class="row">
       <?php 
           $count=0; 
           query_posts('posts_per_page=9'); 
           while (have_posts()) : the_post(); 
       ?>
       <div class="col-sm-4 blog-post thumb">
           <?php get_template_part('templates/content', get_post_format()); ?>
       </div>
       <?php 
           $count++; 
           if($count == 3 || $count == 6 ) echo '</div><div class="row">';
           endwhile;
       ?>
   </div>
   

   Log in to Reply

2. Every three post objects must be contained within a row. So it will be like <div class="row"> <!-- post - post - post -> </div> <div class="row"> <!-- post - post - post -> </div>
   If you would like to do this in php, and still maintain proper ‘rowage’ your code could look something like this:`

       <div class="container">
       <?php 
   $countturtle = 0 ;
   $countbang = 0 ;
   $count_posts = wp_count_posts( 'portobello' )->publish;
   $args = array( 'post_type' => 'portobello', 'posts_per_page' => 32 );
   $loop = new WP_Query( $args );
   while ( $loop->have_posts() ) : $loop->the_post(); ?>
   <?php  $countbang++ ?>
   
   <?php if ( $countbang >= 2 ) {
      $countturtle = $countturtle + 1 ; } ?>
   <?php if ( $countbang == 1 ) {
    echo '<div class="row first-training">'; } elseif ( ( $countturtle % 3 ) == 0 ) {
     echo '<div class="row">'; } ; ?>
   
   <div id="post-<?php the_ID(); ?>" class="training-block <?php echo $countbang; ?>-block-training col-sm-4" >
       <header class="entry-header training-header">       
           <h1 class="entry-title train">
               <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
           </h1>
       </header><!-- .entry-header -->
   
           <div class="entry-imogin">  
   
       <a href="<?php the_permalink(); ?>" rel="bookmark">  ddd</a>
   
           </div><!-- .entry-imogin -->
   
   </div><!-- #post -->
   <?php if ( $countbang % 3 == 0 ) {
    echo '</div>'; } 
               elseif ( $countposts == $countbang ) { echo '</div>';} ; ?>
               <?php endwhile; ?>
   </div>
   

   Log in to Reply

3. Here a solution for 3 columns

   layout :

   1 | 2 | 3
   4 | 5 | 6
   7 | 8 | 9
   …

   <div class="row">
       <div class="col-sm-4">
           <?php $i = 1 ?>
           <?php $posts = get_posts(array(
               'post_type' => 'news',
               'posts_per_page' => -1
           ));
           foreach ($posts as $post) : start_wp(); ?>
           <?php if ($i == 1): ?>
               <h2><?php the_title(); ?></h2>
           <?php endif; ?>
           <?php if($i == 3){$i = 1;} else {$i++;} ?>
           <?php endforeach; ?>
       </div>
   
       <div class="col-sm-4">
           <?php $i = 1 ?>
           <?php $posts = get_posts(array(
               'post_type' => 'news',
               'posts_per_page' => -1
           ));
           foreach ($posts as $post) : start_wp(); ?>
           <?php if ($i == 2): ?>
               <h2><?php the_title(); ?></h2>
           <?php endif; ?>
           <?php if($i == 3){$i = 1;} else {$i++;} ?>
           <?php endforeach; ?>
       </div>
   
       <div class="col-sm-4">
           <?php $i = 1 ?>
           <?php $posts = get_posts(array(
               'post_type' => 'news',
               'posts_per_page' => -1
           ));
           foreach ($posts as $post) : start_wp(); ?>
           <?php if ($i == 3): ?>
               <h2><?php the_title(); ?></h2>
           <?php endif; ?>
           <?php if($i == 3){$i = 1;} else {$i++;} ?>
           <?php endforeach; ?>
       </div>
   </div>
   

   Log in to Reply