0

I would need the following in Wordpress:

<div class="posts-wrapped">
    <div id="post-1" class="post">
        <h1>Title 1</h1>
    </div>
    <div id="post-2" class="post">
        <h1>Title 2</h1>
    </div>
</div>
<div class="posts-wrapped">
    <div id="post-3" class="post">
        <h1>Title 3</h1>
    </div>
    <div id="post-4" class="post">
        <h1>Title 4</h1>
    </div>
</div>

I know how to get posts with WP loop, but how can I wrap every two posts in .posts-wrapped div?

I fetch the posts with WP_Query.

Thanks!

EDIT: So I tried few ways to do it. For example with this:

$index=0;
<div class="posts-wrapped">

<?php
while ( have_posts() ) {
    $index++;   
?>
<div class="post">
        <h1><?php the_post(); ?></h1>
    </div> <?php
if(($index % 2) ==0){
echo '</div><div class="posts-wrapped">';
}
} ?>

</div>

But this prints one extra empty posts-wrapped div:

<div class="posts-wrapped">
    Lorem ipsum 1<br>
    Lorem 2 ipsum est<br>
</div>
<div class="posts-wrapped">
    Lorem ipsum 1<br>
    Lorem 2 ipsum est<br>
</div>
<div class="posts-wrapped">
</div>

How can i get rid of this last empty div? It screws my carousel (this content is part of carousel).

1

This is really just a matter of logic. You need to conditionally print the div markup. The counter in $wp_query will let you chose every second post.

if (have_posts()) {
  echo '<div class="posts-wrapped">';
    while (have_posts()) {

      the_post();

      if (0 !== $wp_query->current_post 
        && 0 === $wp_query->current_post%2
      ) {
        echo $wp_query->current_post.'</div><div class="posts-wrapped">';
      }

      the_title(); echo '<br />';
    }
  echo '</div>';
}
| improve this answer | |
  • It prints one empty posts-wrapped div in the end always :/ – wpneebie Sep 4 '13 at 20:04
  • @wpneebie : see the edit – s_ha_dum Sep 5 '13 at 14:04
0

Get the index that counts the loop iteration and check the modulus operation to know that its even or odd

$index=0;
<div class="posts-wrapped">

<?php
while ( have_posts() ) {
    $index++;   
  ?>
<div class="post">
        <h1><?php the_post(); ?></h1>
    </div> 
<?php
if(($index % 2) ==0){
echo '</div><div class="posts-wrapped">';
}


        } ?>

</div>
| improve this answer | |
  • Hmm, it wraps all posts to posts-wrapped div now, so it doesn't quite work as it should. – wpneebie Sep 3 '13 at 18:48
  • Above code will wrap every two posts in posts-wrapped div as you can see the if(($index % 2) ==0) condition is true then will close the previous div and opens the new posts-wrapped div – M Khalid Junaid Sep 3 '13 at 18:55
  • <div class="posts-wrapped"> <div class="post"> <h1>Lorem ipsum 1</h1> </div> </div> <div class="posts-wrapped"> <div class="post"> <h1>Lorem 2 ipsum est</h1> </div> <div class="post"> <h1>Lore 3</h1> </div> </div> <div class="posts-wrapped"> </div> This is what it posts. So it creates empty wrapper and first wrapper has only one. – wpneebie Sep 3 '13 at 19:03
  • See my updated answer put the $index++ in the start of loop – M Khalid Junaid Sep 3 '13 at 19:07
  • Now it posts two posts in to correct wrapper div but it still create one extra and empty <div class="posts-wrapped"></div> in the end. – wpneebie Sep 3 '13 at 19:17
-1

Same problem, I pulled out my hair but i used a small jquery trick and i change the last element class name and it worked...

$('.parentdiv>div:last-child').removeClass( "posts-wrapped noClass" ).addClass( "nothing" );
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.