Put posts into divs?

  • 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?

Viewing 7 replies - 1 through 7 (of 7 total)

  • 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;
?>
    Thread Starter imaginocracy

    (@imaginocracy)

    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:
    https://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.

    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.

    Thread Starter imaginocracy

    (@imaginocracy)

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

    Thread Starter imaginocracy

    (@imaginocracy)

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

    I’m trying to wrap 4 post instead of 3.

    Am i right in thinking that this should work:

    <?php if( $wp_query->current_post%4 == 0 ) echo "\n".'<div class="postContainer clearfix">'."\n"; ?>

REST OF MY CODE

<?php if( $wp_query->current_post%4 == 3 || $wp_query->current_post == $wp_query->post_count-1 ) echo '</div>'."\n"; ?>

    @mikelawton86: As per the Forum Welcome, please post your own topic.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Put posts into divs?’ is closed to new replies.

Tags