Wordpress posts in grid view with Bootstrap 3 colu

Question

I'm trying to achieve a 3x3 grid view of all the WordPress posts on the "blog" page (index.php). I'm building the site based on Bootstrap 3. Therefore the loop has to create the columns and rows with PHP.

I'd like to have it set up in rows, so that potential height differences are being reset every row. The bootstrap grid would look like this:

<div class="row">
  <div class="col-sm-4">content</div>
  <div class="col-sm-4">content</div>
  <div class="col-sm-4">content</div>
</div>

<div class="row">
  <div class="col-sm-4">content</div>
  <div class="col-sm-4">content</div>
  <div class="col-sm-4">content</div>
</div>

<div class="row">
  <div class="col-sm-4">content</div>
  <div class="col-sm-4">content</div>
  <div class="col-sm-4">content</div>
</div>

Lacking the PHP skills for setting up the loop properly, I tried hacking my way around, coming up with 3 times this (modifying the offsets):

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

<?php query_posts('posts_per_page=1&offset=1'); 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; ?>

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

It has obvious disadvantages:

• a lot of unnecessary PHP requests/loops
• filtering by categories, tags, etc doesn't work

Could you help me out with creating the PHP loop?

The most related question I found is this, but the column layout is somehow skewed!

Thanks a lot! Philipp

Answer 1

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">  ffffd</a>

        </div><!-- .entry-imogin -->

</div><!-- #post -->
<?php if ( $countbang % 3 == 0 ) {
 echo '</div>'; } 
            elseif ( $countposts == $countbang ) { echo '</div>';} ; ?>
            <?php endwhile; ?>
</div>

Answer 2

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>

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