WP_Query & current_post to split posts into separate blocks?

General Discussion 4 posts 2 voices

  1. After reading your article on using wp_query to display posts differently after a certain amount of insert html after 1 post etc i wondered if the following was possible.

    x amount of posts for argument sake 9 posts.

    Each block of 3 posts is in its own div wrapper so can be styled differently from the others.

    SO after every multiple of 3 a div is closed and a new one opened to input the next 3 posts.

    If it wasn’t an even number e.g only 7 posts, it would still close the div after that thus not to break.

    I know this wont work but its my initial start but dont have a clue how to finish it off..

    <?php 
    		
    		$args = array(
    	
    		'post_type' => 'project-work',
    		'orderby' => 'menu_order',
    		'order' => 'ASC',
    		'showposts' => '-1',
    		'meta_key'		=> 'home_area'
    	);
    	
    	
    	$loop = new WP_Query( $args ); ?>
    	
    	<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    	
    	    <?php if ( 3 == $loop->current_post ) : ?>
    	    
    		<div class="group of 3 wrap">
    		
    	        <div class="post">
    	
    	            <h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    	
    	            <?php the_post_thumbnail(); ?>
    	
    	        </div>
    	        
    	      <!--  Two other posts-->
    		
    		</div>
    		
    	     <?php elseif ( 3 == $loop->current_post ) : ?>
    	
    	       <div class="group of 3 wrap">
    	       	
    	               <div class="post">
    	       
    	                   <h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    	       
    	                   <?php the_post_thumbnail(); ?>
    	       
    	               </div>
    	               
    	             <!--  Two other posts-->
    	       	
    	       	</div>
    	               
    	    <?php endif; ?>
    	
    	<?php endwhile; ?>
  2. If you know that you’re going to have 9 posts, something like this might work:

    <?php $args = array(
    	'post_type' => 'project-work',
    	'orderby' => 'menu_order',
    	'order' => 'ASC',
    	'showposts' => '-1',
    	'meta_key'		=> 'home_area'
    );
    
    $loop = new WP_Query( $args ); ?>
    
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    
    	<?php if ( 0 == $loop->current_post ) : ?>
    		<div class="group-1">
    	<?php endif; ?>
    
    	<?php if ( 3 == $loop->current_post ) : ?>
    		</div>
    		<div class="group-2">
    	<?php endif; ?>
    
    	<?php if ( 6 == $loop->current_post ) : ?>
    		</div>
    		<div class="group-3">
    	<?php endif; ?>
    
    	<div class="post">
    		<h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    		<?php the_post_thumbnail(); ?>
    	</div>
    
    <?php endwhile; ?>
    
    <?php if ( 6 <= $loop->current_post ) : ?>
    	</div>
    <?php endif; ?>
  3. Thanks Justin, i assume its not possible to do it for a flexible number of posts.?

    So essentially split every 3 posts and wrap it with its own div for example?

  4. Yeah, you could do it like that. You wouldn’t get a custom group class that way. But, you could change this part:

    <?php if ( 0 == $loop->current_post ) : ?>
    	<div class="group-1">
    <?php endif; ?>
    
    <?php if ( 3 == $loop->current_post ) : ?>
    	</div>
    	<div class="group-2">
    <?php endif; ?>
    
    <?php if ( 6 == $loop->current_post ) : ?>
    	</div>
    	<div class="group-3">
    <?php endif; ?>

    To this:

    <?php if ( 0 == $loop->current_post ) : ?>
    	<div class="group">
    <?php endif; ?>
    
    <?php elseif ( 0 == ( $loop->current_post % 3 ) ) : ?>
    	</div>
    	<div class="group">
    <?php endif; ?>

    Then, change this part:

    <?php if ( 6 <= $loop->current_post ) : ?>
    	</div>
    <?php endif; ?>

    To this (probably could’ve done this in both cases):

    <?php if ( 0 < $loop->current_post ) : ?>
    	</div>
    <?php endif; ?>