Display Wordpress Loop in 4 column layout

Question

I'm creating a 4 column archive page template for a custom post type I created in Wordpress and I can't seem to get the posts to display properly. I'm mirroring Visual Composer's layout to match the rest of my site. After looking at Wordpress Loop posts in Bootstrap 3 grid layout I've been able to get close with the following code:

<div class="wpb_row">
    <div class="col span_12">
<?php
$args=array(
'post_type' => 'product',
'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) { ?> 

<?php
}
?>

    <div  class="vc_span3 wpb_column column_container">
        <div class="wpb_wrapper">
            <a href="<?php the_permalink() ?>"><img src="<?php the_field('catalog_image'); ?>" alt="<?php the_field('product_description'); ?>" /></a>
    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <h3><?php the_title(); ?></h3>
<h3>$<?php the_field('product_price'); ?></h3>

        </div> 
    </div> 
        </div> 

    </div> 

<?php    
if($i % 4 == 0) { ?> 

<?php
}

$i++;
endwhile;
}
wp_reset_query();
?>

</div>
</div>

Both the outer divs wpb_row and col span_12 repeat every 4 columns. Currently it displays the posts in 4 columns but they return more than 4 posts within the row(they overflow to the next row). Ideally the layout would be like this:

<div class="wpb_row">
<div class="col span_12">

<div class="vc_span3 wpb_column column_container">
<!--Post #1 Content-->
</div>

<div class="vc_span3 wpb_column column_container">
<!--Post #2 Content-->
</div>

<div class="vc_span3 wpb_column column_container">
<!--Post #3 Content-->
</div>

<div class="vc_span3 wpb_column column_container">
<!--Post #4 Content-->
</div>

</div>
</div>
<!--Repeat everything in wpd_row on next row starting at Post #5 and so on -->

Could anyone offer advice on how to correct this? Thanks in advance.

score 0 · Accepted Answer · answered Oct 18 '14 at 12:21

0

You have those if($i % 4 == 0) conditions, but nothing is output inside them. You should end one row and start another in one of them:

if($i % 4 == 0) { ?>
         </div>
    </div>
    <div class="wpb_row>
        <div class="col span_12>            
<?php }

Also make sure you take into account the first / last rows.

answered Oct 18 '14 at 12:21

MSTannu

1,033
1
6
14

How would I take into account the first and last rows? The first is showing only 1 column, the next rows show 4 columns, and the last row is empty. – Murada Oct 18 '14 at 16:56
I was able to get it working by replacing `if($i % 4 == 0) { ?>`with `if($i++ % 4 == 3) { ?>` and removing the last `i++` before the `endwhile`. Last issue: How do I make it so that if the last row contains only 1 or 3 posts that a class is added to the last column? Thanks again for the help! – Murada Oct 18 '14 at 17:14

score 0 · Answer 2 · answered Oct 19 '14 at 21:33

I was able to figure it out. For anyone looking for a solution to display a custom post type loop in 4 columns rows while adding a class to the last post if there are an odd number of posts returned here is what worked for me:

<div class="wpb_row">
    <div class="col span_12">
<?php
$args=array(
'post_type' => 'product',
'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) { ?> 

<?php
}
?>

    <div  class="vc_span3 wpb_column column_container <?php echo ($my_query->current_post + 1 === $my_query->post_count) && ($my_query->post_count % 2 != 0) ? ' classtoadd' : '' ?>">
        <div class="wpb_wrapper">
            <a href="<?php the_permalink() ?>"><img src="<?php the_field('catalog_image'); ?>" alt="<?php the_field('product_description'); ?>" /></a>
    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <h3><?php the_title(); ?></h3>
<h3>$<?php the_field('product_price'); ?></h3>

        </div> 
    </div> 
        </div> 

    </div> 

<?php    
if($i++ % 4 == 3) { ?>  
         </div>
    </div>
<div class="wpb_row">
    <div class="col span_12">
<?php
}

endwhile;
}
wp_reset_query();
?>

</div>
</div>

Display Wordpress Loop in 4 column layout

2 Answers2