WP Query outputs three items within a div

Question

At present I have a basic query that outputs 12 custom posts, each in a div.

I need to restructure this to output four divs, each with three of these items inside. So it's sort of like a nested div.

To explain, here is the current HTML output (for 12 items)

<div class="item">the content comes out here</div>
<div class="item">the content comes out here</div>
<div class="item">the content comes out here</div>
<div class="item">the content comes out here</div>
<div class="item">the content comes out here</div>
<div class="item">the content comes out here</div>

What I need is something more like this:

<div class="jobsOne">
  <div class="item">the content comes out here</div>
  <div class="item">the content comes out here</div>
  <div class="item">the content comes out here</div>
</div>
<div class="jobsTwo">
  <div class="item">the content comes out here</div>
  <div class="item">the content comes out here</div>
  <div class="item">the content comes out here</div>
</div>

Here is my current query:

<?php 
    query_posts(array( 
                'post_type' => 'custom_job',
                'showposts' => 12 
            ) );  
        ?>
        <?php while (have_posts()) : the_post(); ?>
            <div class="item job">
                    <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                    <p><?php echo get_the_excerpt(); ?></p>
                </div>
        <?php endwhile;?>

Answer 1

You can use the variable $current_post, something like this.

    <?php 
        $query = new WP_Query(array( 
                    'post_type' => 'custom_job',
                    'showposts' => 12 
                ) );  
            ?>
            <?php while ($query->have_posts()) : $query->the_post(); ?>
               <?php if ($query->current_post % 3 === 0) :?>
                 <?php $numbers = array('One', 'Two'); //add the rest ?>
                 <div class="jobs<?php echo $numbers[floor($query->current_post / 3)];?>">
               <?php endif;?>
               <div class="item">
                        <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                        <p><?php echo get_the_excerpt(); ?></p>
                    </div>

 <?php if ($query->current_post % 3 === 0) :?>
 </div>
<?php endif;?>
            <?php endwhile; wp_reset_postdata();?>

You have to create an array for the CSS classname, I named it numbers. The floor function gets the lowest Integer given a Real.

This code isn't tested, so be careful, don't use it directly in production.

Answer 2

<?php

$counts = array(
    '',
    'One',
    'Two',
    'Three',
    'Four',
);

$query = new WP_Query(
    array( 
        'post_type' => 'custom_job',
        'posts_per_page' => 12, 
    )
);

while ( $query->have_posts() ) :
    $query->the_post();

    if ( $query->current_post + 1 == $query->post_count || ( $query->current_post + 1 ) % 3 === 0 )
        echo '</div>'; // End of the loop, or next post will open a new div.

    if ( $query->current_post % 3 === 0 ) // Current post divisible by 3, start new div.
        echo '<div class="jobs' . next( $counts ) . '">';

    ?>

    <div class="item job">
        <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
        <p><?php echo get_the_excerpt() ?></p>
    </div>

<?php endwhile ?>

Answer 3

Here's an alternative way with array_chunk() if you don't want to mess with modulus:

global $post;
$words  = array( 'One', 'Two', 'Three', 'Four' );
$args   = array( 'posts_per_page' => 12, 'post_type' => 'custom_ob' );
$chunks = array_chunk( get_posts( $args ), $cols = 3 ); // Modify this to your needs. 
foreach( $chunks as $key => $chunk ) {
    printf( '<div class="job%s">', $words[$key] ); 
    foreach( $chunk as $post ) {
        setup_postdata( $post ); ?>
         <div class="item job">
                <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                <p><?php the_excerpt(); ?></p>
            </div>
    <?php }
    echo '</div>'; 
}