Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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).

share|improve this question
    
What have you tried? –  s_ha_dum Sep 3 '13 at 19:55
    
What do you mean? I have @dianuj solution but it quite not work. –  wpneebie Sep 4 '13 at 17:14
    
    
Yes, I researched and like I said I have tried it solving but with no luck. So why that attack? –  wpneebie Sep 4 '13 at 17:39
    
Attack? You've got to be joking? It was a question and a link to part of the site FAQ, and you still have not posted the relevant PHP showing what you've tried. –  s_ha_dum Sep 4 '13 at 18:06

2 Answers 2

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>';
}
share|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

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>
share|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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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