CODEWITHSUNDEEP
wordpressloops
user7778807
user7778807

Reputation:

Splitting WordPress Loops

I want to display a grid of thumbnails & post titles which are custom post types. I am also using fullpage.js which displays content full width & height of the browser window. Within each fullpage 'section', I want to show 6x thumbnails/titles.

How can I split the loop in order to achieve this effect? Here is my code so far:

<?php   
        $work_args = array(
            'post_type'      => 'bp_work_post_type',
            'post_status'    => 'publish',
            'posts_per_page' => 6,
            'offset'         => 6
        );
        $work_query = new WP_Query( $work_args );
    ?>

<?php if ( $work_query->have_posts() ) : ?>
 <div class="section">
  <?php while ( $work_query->have_posts() ) : $work_query->the_post(); ?>
   <div class="post-grid">
    //Grid Content in here
   </div>
  <?php endwhile;?>
</div>
<?php endif; ?>

Upvotes: 1

Views: 58

Answers (2)

ZecKa
ZecKa

Reputation: 2934

Use the modulus symbol (%)

<?php   
$work_args = array(
    'post_type'      => 'bp_work_post_type',
    'post_status'    => 'publish',
    'posts_per_page' => -1,
);
$work_query = new WP_Query( $work_args );
$nb_posts = $work_query->post_count; 
$post_per_section = 6;
?>

<?php if ( $work_query->have_posts() ) : ?>
    <div class="section">
      <?php $count=0; ?>
      <?php while ( $work_query->have_posts() ) : $work_query->the_post(); $count++; ?>
        <div class="post-grid"></div>
        <?php if($count % $post_per_section == 0 && $nb_posts !== $post_per_section ):  ?>
          </div><div class="section">
        <?php endif;?>
      <?php endwhile;?>
    </div>
<?php endif; ?>

Upvotes: 0

Bragadeeswaran
Bragadeeswaran

Reputation: 278

you can use boostrap css to split the div's.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<?php   
        $work_args = array(
            'post_type'      => 'bp_work_post_type',
            'post_status'    => 'publish',
            'posts_per_page' => 6,
            'offset'         => 6
        );
        $work_query = new WP_Query( $work_args );
    ?>

<?php if ( $work_query->have_posts() ) : ?>
 <div class="section row">
  <?php while ( $work_query->have_posts() ) : $work_query->the_post(); ?>
   <div class="post-grid col-md-2">
    //Grid Content in here
   </div>
  <?php endwhile;?>
</div>
<?php endif; ?>

Upvotes: 3

Related Questions