WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to modify loop to split posts into groups of threes? (12 posts)

  1. _ze
    Member
    Posted 3 years ago #

    I am attempting to build a 'Featured Posts' slideshow at the top of my blog home page. I am using jquery scrollable to display the featured posts, and I have this part working. My problem is that scrollable requires the items (posts), to be displayed in groups separated within divs. I am not sure how to structure the loop, to do this.

    This is the format I need WordPress to display the posts from my 'Featured' category:

    <!-- 1-3 -->
          <div>
             <div class="single_item">
    			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    		 </div>
    		 <div class="single_item">
    			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    		 </div>
    		 <div class="single_item">
    			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    		 </div>
          </div>
    
          <!-- 4-6 -->
          <div>
             <div class="single_item">
    			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    		 </div>
    		 <div class="single_item">
    			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    		 </div>
    		 <div class="single_item">
    			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    		 </div>
          </div>
    
          <!-- 7-9 -->
          <div>
             <div class="single_item">
    			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    		 </div>
    		 <div class="single_item">
    			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    		 </div>
    		 <div class="single_item">
    			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    		 </div>
          </div>

    As you can see, I need to request posts three at a time, incapsulated within a div.

    I imagine this is very simple with some basic php, I just have not been able to figure out how to do it myself.

    Thanks for any assistance you may be able to offer!

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    it is possible with using a counter variable, and checking in the loop if the counter is a multiple of 3 (using the modulus operator x%y), then outputting the enclosing divs:

    <?php if (have_posts()) :
    	$i=0; // counter
    	while(have_posts()) : the_post();
    		if($i%3==0) { // if counter is multiple of 3, put an opening div ?>
    		<!-- <?php echo ($i+1).'-'; echo ($i+3); ?> -->
    		<div>
    		<?php } ?>
    	<div class="single_item">
    	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    	</div>
    		<?php $i++;
    		if($i%3==0) { // if counter is multiple of 3, put an closing div ?>
    		</div>
    		<?php } ?>
    
    	<?php endwhile; ?>
    		<?php
    		if($i%3!=0) { // put closing div here if loop is not exactly a multiple of 3 ?>
    		</div>
    		<?php } ?>
    
    <?php endif; ?>

    http://www.w3schools.com/php/php_if_else.asp
    http://php.net/manual/en/language.operators.arithmetic.php

  3. _ze
    Member
    Posted 3 years ago #

    Thank you so much! I'm going to try this and I will report back.

  4. _ze
    Member
    Posted 3 years ago #

    This worked like a charm. Thank you so much!

  5. tallulas
    Member
    Posted 3 years ago #

    I am using the exact same thing .. i wonder if youy can help .. i am calling 5 items at a time so changing the 3 to a 5 is no problem!

    However what i need to do is change the above algorithm so that if there are say only 7 posts only 2 divs are created.

    If there are 100 posts then 20 divs would be created?

    <div class="items"> 
    
           <?php $my_query = new WP_Query('cat=Lounge&showposts=25query_posts&post_status=future,publish'); ?>
          <?php while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;'&order=ASC&post_status=future,publish' ?>
    	$i=0; // counter
    	while(have_posts()) : the_post();
    		if($i%5==0) { // if counter is multiple of 5, put an opening div ?>
    		<!-- <?php echo ($i+1).'-'; echo ($i+5); ?> -->
             <?php the_post_thumbnail();?>
    		<div>
    		<?php $i++;
    		if($i%5==0) { // if counter is multiple of 5, put an closing div ?>
             <?php the_post_thumbnail();?>
    		</div>
    		<?php } ?>
    		<?php
    		if($i%5!=0) { // put closing div here if loop is not exactly a multiple of 5 ?>
            <?php the_post_thumbnail();?>
    		</div>
    		<?php } ?>
    		<?php endwhile; ?>
       </div>
  6. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    are you building a image grid?

    i assume i created the code to create and close the needed divs automatically; however your adaptation seems to sabotage this.

    (the whole code looks as if someone tried to gather a bunch of flowers with the lawnmower ...)

    first:
    this line:
    <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>

    needs to be inserted instead of

    while(have_posts()) : the_post();

    this bit:
    $do_not_duplicate = $post->ID;'&order=ASC&post_status=future,publish'
    is does not make sense in your code, so i deleted it below.
    there was some odd stuff in WP_query() as well, hope i corrected it to work as intended

    putting your stuff into the original code, (there is only one postition where anything from the loop is outputted) - it should look like:

    <div class="items"> 
    
           <?php $my_query = new WP_Query('cat=Lounge&showposts=25&post_status=future,publish'); 
    
    	$i=0; // counter
    	while ($my_query->have_posts()) : $my_query->the_post(); 
    
    		if($i%5==0) { // if counter is multiple of 5, put an opening div ?>
    		<!-- <?php echo ($i+1).'-'; echo ($i+5); ?> -->
    		<div>
    		<?php } ?>
    	/* HERE IS THE ONLY SPACE TO ENTER ANY OUTPUT FROM THE LOOP */		<?php the_post_thumbnail();?>
             /* END OF SPACE */
                      <?php $i++;
    		if($i%5==0) { // if counter is multiple of 5, put an closing div ?>
    		</div>
    		<?php } ?>
    
    	<?php endwhile; ?>
    		<?php
    		if($i%5!=0) { // put closing div here if loop is not exactly a multiple of 5 ?>
    		</div>
    		<?php } ?>
    
    <?php endif; ?>
    </div>

    http://codex.wordpress.org/Function_Reference/WP_Query
    http://codex.wordpress.org/Function_Reference/query_posts

    hope this helps ;-)

  7. Mark / t31os
    Moderator
    Posted 3 years ago #

    Here's a slightly a less scary looking version for the non-php'ers who may be reading..

    <?php
    $my_query = new WP_Query();
    
    // Query args
    $my_query->query( 'cat=Lounge&showposts=25&post_status=future,publish' ); 
    
    // See links provided by alchymyth for more info on query parameters
    
    // What amount of posts/thumbnails (whatever) to show before closing the element and opening another
    $divider = 5;
    ?>
    
    <?php if( $my_query->have_posts() ) : ?>
    
    	<!-- open starting div before loop -->
    	<div class="items"> 
    
    	<?php while( $my_query->have_posts() ) : $my_query->the_post(); ?>
    
    		<?php the_post_thumbnail(); ?>
    
    		<?php $current_position = $my_query->current_post + 1; // current_post starts at 0 ?>
    
    		<?php if( $current_position < $my_query->found_posts && $current_position % $divider == 0 ) : ?>
    
    		<!-- if position is equal to the divider and not the last result close the currently open div and start another -->
    		</div><div class="items">
    
    		<?php endif; ?>
    
    	<?php endwhile; ?>
    
    	</div>
    	<!-- close whichever div was last open -->
    
    <?php endif; ?>

    alchymyth, hope you don't mind, simply thinking the less code savy users might find the above example easier to follow.

  8. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    @t31os_
    i like this; less code is always better; also showing different approaches that lead to the same goal is great. using the variable $divider makes it very universal.

  9. tallulas
    Member
    Posted 3 years ago #

    Many thanks guys, i loled at this:

    (the whole code looks as if someone tried to gather a bunch of flowers with the lawnmower ...)

    im a complete noob to code of any kind, does it show?

    :D

  10. elba00
    Member
    Posted 3 years ago #

    Hi!

    I'm basically copied Marc's solution to my index.php and it works fine. I'm using a custom meta box that allows me to change a div's background color under featured image but still inside the item. The value simply is a hexa code that is stored in a $css var and the page echoes this value inside a <style> tag. The problem with this styling method, that the code inside the style tags runs only once hence every featured info divs background looks like the first one. If I just print the $css to check the divs all get the right color, the right hexa codes are displayed. Any idea?

    [Code moderated as per the Forum Rules. Please use the pastebin]

  11. elba00
    Member
    Posted 3 years ago #

    Please have a look at the code here:

    Thanks.

  12. extatix
    Member
    Posted 3 years ago #

    @ Mark / t31os

    I used the code you provided to split up a query of 100 into parts of 10 for a sliding widget using the jQuery Cycle plugin. There's just a small problem with it, it serves me an 11th group with no entries.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.