WordPress.org

1. imaginocracy
   Member
   Posted 4 months ago #
   

   Hi, I have a need to put each post into a div (which I have done) but my issue is that I also need every 3 divs to be wrapped in another div.

   So:

   [wrapper [post 1] [post 2] [post 3] wrapper]
   [wrapper [post 4] [post 5] [post 6] wrapper]
   [wrapper [post 7] [post 8] [post 9] wrapper]

   etc...

   I have been able to put the posts into their own divs, however I am having trouble creating that wrapper every 3 posts.

   Here is my code:

   <?php $count = 0;
   		query_posts('cat=21');
   		if(have_posts()) : while(have_posts()) : the_post();
      		$open = !($count%1) ? '<div class="span4 portfolio-item">' : '';
       	$close = !($count%1) && $count ? '</div>' : '';
       	echo $close.$open;
   ?>

   Any ideas how I would create the wrapper as indicated above?

2. alchymyth
   The Sweeper & Moderator
   Posted 4 months ago #
   

   example using the loop counter $wp_query->current_post:

   <?php
   query_posts('cat=21');
   if(have_posts()) : while(have_posts()) : the_post();
   if( $wp_query->current_post%3 == 0 ) echo "\n".'<div class="span4 portfolio-item">';
   //the other output here//
   if( $wp_query->current_post%3 == 2 || $wp_query->current_post == $wp_query->post_count-1 ) echo "\n".'</div><!-- .span4 portfolio-item -->';
   endwhile; endif;
   ?>

   or using a counter variable:

   <?php $count  = 0;
   query_posts('cat=21');
   if(have_posts()) : while(have_posts()) : the_post();
   //open the wrapper div for three posts//
   if( $count%3 == 0 ) echo "\n".'<div class="span4 portfolio-item">';
   
   //the other output here// 
   
   //close the wrapper div for three posts//
   if( $count%3 == 2 ) echo "\n".'</div><!-- .span4 portfolio-item -->';
   $count++;
   endwhile;
   //close the wrapper div if less than three posts//
   if( $count%3 != 0 ) echo "\n".'</div><!-- .span4 portfolio-item -->';
   endif;
   ?>

3. imaginocracy
   Member
   Posted 4 months ago #
   

   Hey, this is pretty close, or perhaps I did something wrong. Here is the code in entirety:w

   <?php $count  = 0;
   query_posts('cat=21');
   if(have_posts()) : while(have_posts()) : the_post();
   //open the wrapper div for three posts//
   if( $count%3 == 0 ) echo "\n".'<div class="row">';
   
   $open = !($count%1) ? '<div class="span4 portfolio-item">' : '';
       	$close = !($count%1) && $count ? '</div>' : '';
       	echo $close.$open;
   ?>
   
   <div class="loopcontent">
           <a>">
   			<?php
   				if ( has_post_thumbnail() ) {
   					the_post_thumbnail('full');
   				} else {
   					// the current post lacks a thumbnail
   				}
   ?></a>
                   <h2><a>"><?php the_title(); ?></a></h2>
   				<?php the_excerpt(); ?>
           </div>
   
   <?php
   //close the wrapper div for three posts//
   if( $count%3 == 2 ) echo "\n".'</div><!-- .row -->';
   $count++;
   endwhile;
   //close the wrapper div if less than three posts//
   if( $count%3 != 0 ) echo "\n".'</div><!-- .row -->';
   endif;
   ?>

   This produces the following markup:
   http://imgur.com/t8uZBGa

   You can see the first 3 items fall in line perfectly, wrapped in row-fluid as should be.

   Then row-fluid opens again and closes and then the 4th item is placed outside the wrapper div.

   I'm stuck as to why it's doing that.

4. alchymyth
   The Sweeper & Moderator
   Posted 4 months ago #
   

   well done so far.

   your logic for adding the .portfolio-item div is not needed with my suggestion; the div can be added normally into the loop;

   example:

   <?php $count  = 0;
   query_posts('cat=1');
   if(have_posts()) : while(have_posts()) : the_post();
   //open the wrapper div for three posts//
   if( $count%3 == 0 ) echo "\n".'<div class="row">'; ?>
   
   <div class="span4 portfolio-item">
   <div class="loopcontent">
           <a>">
   			<?php
   				if ( has_post_thumbnail() ) {
   					the_post_thumbnail('full');
   				} else {
   					// the current post lacks a thumbnail
   				}
   ?></a>
                   <h2><a>"><?php the_title(); ?></a></h2>
   				<?php the_excerpt(); ?>
           </div>
   </div><!--/ .span4 portfolio-item -->
   <?php
   //close the wrapper div for three posts//
   if( $count%3 == 2 ) echo "\n".'</div><!-- .row -->';
   $count++;
   endwhile;
   //close the wrapper div if less than three posts//
   if( $count%3 != 0 ) echo "\n".'</div><!-- .row -->';
   endif;
   ?>

   caveat:
   your posted code is partialy broken - particular the '<a href=' parts - and what I posted is broken as well; so do not use it for copy/paste, but just take the structure from it.

5. imaginocracy
   Member
   Posted 4 months ago #
   

   Ok thanks, yeah it stripped my a content off. I'll try this.

6. imaginocracy
   Member
   Posted 4 months ago #
   

   Alright, yeah worked like a charm, thanks for the assist!

Reply

You must log in to post.