WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Wrap every two posts in div (4 posts)

  1. simenschi
    Member
    Posted 1 year 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]

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year 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 ?>
  3. simenschi
    Member
    Posted 1 year 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).

  4. simenschi
    Member
    Posted 1 year 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!

Topic Closed

This topic has been closed to new replies.

About this Topic