WordPress.org

Ready to get started?Download WordPress

Forums

[closed] Put posts into divs? (8 posts)

  1. imaginocracy
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year ago #

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

  6. imaginocracy
    Member
    Posted 1 year ago #

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

  7. mikelawton86
    Member
    Posted 10 months ago #

    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"; ?>
  8. esmi
    Forum Moderator
    Posted 10 months ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags