0

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;?>
5
  • 1
    what is the question? right now it sounds like a php question and not really a wordpress one. Sep 2, 2014 at 15:28
  • I'm asking how I can adjust the WP query so that it lets me wrap a div around each set of three posts.
    – Francesca
    Sep 2, 2014 at 15:28
  • 1
    I would agree with @MarkKaplun Use the build in loop counter and don"t use query_posts. Use WP_Query to construct your query Sep 2, 2014 at 15:32
  • @PieterGoosen what is the reason for this? (sorry I am learning). And still how would I make it output every three in it's own wrapper?
    – Francesca
    Sep 2, 2014 at 15:33
  • 1
    @Francesca, reading this is recommended. At least the first paragraph
    – Tomás Cot
    Sep 2, 2014 at 15:45

3 Answers 3

3

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.

5
  • 3
    Don't use query_posts please. Sep 2, 2014 at 15:30
  • 1
    @PieterGoosen, yes, you are right, I was just reusing her code.
    – Tomás Cot
    Sep 2, 2014 at 15:32
  • Parse error: syntax error, unexpected '=' in [my path] - this is what I get when I use this code.
    – Francesca
    Sep 2, 2014 at 15:33
  • It is always much more useful to make the OP attend on such type of errors. I know it is going out of scope for the specific of the question, but try to help the OP in the correct direction :-) Sep 2, 2014 at 15:35
  • 1
    I've fixed the syntax error in this answer - the variable $numbers did not have the $ in its definition or usage. Sep 2, 2014 at 15:40
0
<?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 ?>
0

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>'; 
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.