job.answiz.com
  • 4
Votes
name

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!

I'm currently working on a project where I display a number of objects per row. My solution is pretty simple:

$post_counter = 0;
$per_row = 4;
echo '<div class="row">';
while( $my_query->have_posts() ) : $my_query->the_post();
    if ( $post_counter % $per_row == 0 && $post_counter !== 0 ) // 0 % 4 = 0
        echo '</div><div class="row">';
    // .. rest of code here ..
    $post_counter++;
endwhile;
echo '</div>';
  • 1
Reply Report

It’s quite easy to do if you have a dedicated plugin that excels at post grid features. Thankfully, I have just the solution for you. You should try the GS Posts Grid Plugin [WordPress Posts Grid | GS Posts Grid Plugin - GS Plugins]. With this you can display your media in neatly categorized and customizable ways- which can help you reflect your personality through your website. Display in up to any number of columns that you wish. You also get 30+ design templates with this product.

Plugin Features

  • Responsive latest posts plugin.
  • Different Column options.
  • Works with any standard WordPress Theme.
  • Support unlimited posts.
  • Developer friendly & easy to customize.
  • All modern browsers supported.
  • W3C valid markup.
  • Display posts anywhere with shortcode like [gs_wpposts theme="gs_wppost_grid_1"].
  • Custom CSS.
  • Easy to setup.

It is a light but powerful plugin. If you buy it, you also get one year of free updates. Please contact the support team if you are interested. I hope this was helpful to you. Thanks for letting me answer your question.

Hope you will get more grid featured post WordPress plugin from WordPress Plugins & Best WordPress Plugins for Business | GS Plugins

  • 1
Reply Report

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>
  • 4
Reply Report