Wrap every two posts in div

  • Resolved simenschi

    (@simenschi)


    13 years ago

    I would like to wrap every two blog posts in a div(to make it easier to style in old browsers) like this:

    <div class="wrap">
    <div class="post">post-1…</div>
    <div class="post">post-2…</div>
</div>
<div class="wrap">
    <div class="post">post-3…</div>
    <div class="post">post-4…</div>
</div>

    Any clean PHP snippets or similar that does the job?

    I found this thread on the subject, but since it was tagged as resolved I thought there was a better chance getting an answer writing a new post. [Moderator gives you thumbs up]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael

    (@alchymyth)

    13 years ago

    assuming a default query and a standard loop:

    <?php while( have_posts() ) : the_post(); //start of the loop ?>
<?php if( $wp_query->current_post%2 == 0 ) echo "\n".'<div class="wrap">'."\n"; ?>
    <div class="post">post-<?php echo $wp_query->current_post + 1; ?>&hellip;</div>
<?php if( $wp_query->current_post%2 == 1 || $wp_query->current_post == $wp_query->post_count-1 ) echo '</div> <!--/.wrap-->'."\n"; ?>
<?php endwhile; //end of the loop ?>
    Thread Starter simenschi

    (@simenschi)

    13 years ago

    Thank you! That works perfectly on my archive/paged pages, but on the front page I have the first post with separate layout and styling like this:

    <?php
 //initialize $do_not_duplicate
 $do_not_duplicate=0;
 //is_paged returns true if we are on page 2,3,...
 if(!is_paged()):
      //Get featured content for page 1
      $my_query = new WP_Query('posts_per_page=1');
      while ($my_query->have_posts()) : $my_query->the_post();
           $do_not_duplicate = $post->ID;

// #### The first, main article

      endwhile;
 endif;

 //Display rest of content
 if (have_posts()) :
    while (have_posts()) : the_post();
         if( $post->ID == $do_not_duplicate ) continue;

// the two-column wrapper
if( $wp_query->current_post%2 == 0 ) echo "\n".'<div class="twopostscolumn">'."\n";

// #### The other posts

if( $wp_query->current_post%2 == 1 || $wp_query->current_post == $wp_query->post_count-1 ) echo '</div> <!--/.twopostscolumn-->'."\n";

    endwhile;
  endif;
 ?>

    Is there any way I can do the same thing on my front page? The code above starts by printing the “</div”> which obviously breaks my markup and layout.

    Maybe I can use the is_paged() somehow? Since your code it works like a charm on the paged pages(because there’s no separate loop for the first post i guess).

    Thread Starter simenschi

    (@simenschi)

    13 years ago

    Finally got it to work, here’s my front-page.php code if anyone else need it:

    <?php
 //initialize $do_not_duplicate
 $do_not_duplicate=0;
 //is_paged returns true if we are on page 2,3,...
 if(!is_paged()):
      //Get featured content for page 1
      $my_query = new WP_Query('posts_per_page=1');
      while ($my_query->have_posts()) : $my_query->the_post();
           $do_not_duplicate = $post->ID;

// THE MAIN ARTICLE

      endwhile;
 endif;

 // Display rest of content

 if (have_posts()) :
    while (have_posts()) : the_post();
          // Checks that it's not the first post
         if( $post->ID == $do_not_duplicate ) continue;

           // If its paged we want to wrap the odd posts, else the even
              if(is_paged()) {
                if( $wp_query->current_post%2 == 0) echo "\n".'<div class="wrap">'."\n";
              } else {
                if( $wp_query->current_post%2 !== 0) echo "\n".'<div class="wrap">'."\n";
              } 

// THE REST OF THE ARTICLES 

// CLOSES tag if its odd posts,
  if(is_paged()) {
    if( $wp_query->current_post%2 == 1 || $wp_query->current_post == $wp_query->post_count-1 ) echo '</div> <!--/.wrap-->'."\n";
  } else {
    if( $wp_query->current_post%2 !== 1 || $wp_query->current_post == $wp_query->post_count-1 ) echo '</div> <!--/.wrap-->'."\n";
  }
    endwhile;
  endif;
 ?>

    Thanks again alchymyth!

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

The topic ‘Wrap every two posts in div’ is closed to new replies.