PHP Add every 2 items inside DIV in WordPress loop

Question

I need PHP code to add every 2 items inside DIV in WordPress loop.

For example, I need like this:

<div class="wrap">
    post
    post
 </div>

<div class="wrap">
    post
    post
 </div>

<div class="wrap">
    post
    post
 </div>

This is my wordpress loop, but not working, I need every 2 posts inside DIV:

<?php if ( have_posts() ) : // If have post start. ?>


    <?php $i = 0; ?>


    <?php while ( have_posts() ) : the_post(); // Start Loop: ?>


        <?php if ( $i % 2 ==  0) : ?>
            <div class="wrap">
        <?php endif; ?>


        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <?php the_content(); ?>
        </article>


        <?php if ( $i % 2 == 0 ) : ?>
            </div>
        <?php endif; ?>


    <?php $i++; endwhile; // End Loop. ?>


<?php endif; // If have post end. ?>

Thanks.

If you're in the main loop then you can check with something like: if( $wp_query->current_post % 2 == 0 ){...} Or you can set the counter $i=0; outside the loop (if ( have_posts() ) : while ( have_posts() ) : the_post();) and then check if it's modulo 2 is 0: $if( i % 2 == 0) and increment on each iteration ($i++;), before endwhile. — dingo_d
– dingo_d, Commented Mar 31, 2016 at 10:45

Gerald Schneider · Accepted Answer · 2016-03-31 12:33:43Z

2

The problem is that you print both <div> and </div> on even values of $i. That's why they always wrap only one and the second post stands aside.

You have to echo the <div> on even numbers and </div> on odd:

<?php if ( have_posts() ) : // If have post start. ?>

    <?php $i = 0; ?>

    <?php while ( have_posts() ) : the_post(); // Start Loop: ?>

        <?php if ( $i % 2 ==  0) : ?>
            <div class="wrap">
        <?php endif; ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <?php the_content(); ?>
        </article>

        <!-- changed == 0 to != 0  -->
        <?php if ( $i % 2 != 0 ) : ?>
            </div>
        <?php endif; ?>

    <?php $i++; endwhile; // End Loop. ?>

        <!-- added closing </div> for odd number of posts -->
        <?php if ( $i % 2 != 0 ) : ?>
            </div>
        <?php endif; ?>

<?php endif; // If have post end. ?>

I added a second </div> after the loop, because without it you wouldn't get the closing tag at all if you have an odd number of posts.

answered Mar 31, 2016 at 12:33

Gerald Schneider

17.8k10 gold badges64 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dingo_d Over a year ago

Similar to what I placed above :D

n00dl3 · Accepted Answer · 2016-03-31 12:37:01Z

2

I think this should do the job:

<div class="wrap">
<?php
$query = new WP_Query();
if ( $query->have_posts() ):
  $i=0;
  while ( $query->have_posts() ) :
    $query->the_post();
    if($i%2==0 && $i<$query->post_count-1 && $i>0):
      echo '</div><div class="wrap">' 
    endif;
?>
    <!--html here-->
<?php
    $i++;
  endwhile;
endif;
?>
</div>

edited Mar 31, 2016 at 12:37

answered Mar 31, 2016 at 10:31

n00dl3

21.6k8 gold badges70 silver badges77 bronze badges

1 Comment

user2719452 Over a year ago

I need default loop, not custom loop wp_query

Pranav Bhatt · Accepted Answer · 2016-03-31 12:18:29Z

0

You should do something like this:

    <?php 
    if ( have_posts() ) {
        $i=0;
        while ( have_posts() ) {
           if($i%2==0):?>
         <div class="wrap">
   <?php     
    else : ?>
</div>
<?php 
  endif;       
  $i++;
}
}    
?>

answered Mar 31, 2016 at 12:18

Pranav Bhatt

7454 silver badges8 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:07:52Z

0

Ok, based on the answer by Aviram here I created this:

$i = 1;
$out = '';
$endingNeeded = false;

if ( have_posts() ) {
    while ( have_posts() ) {

        if ( $i % 2 == 1) {
            $out .= '<div class="wrap">';
            $endingNeeded = true;
        }

        the_post(); // Start Loop:

        $out .= '<article id="post-'. get_the_ID().'" class="'.implode(get_post_class(), ', ').'">
                '.get_the_content().'
            </article>';

        if ( $i % 2 == 0 ) {
            $out .= '</div>';
            $endingNeeded = false;
        }

        $i++;
    }
}

if($endingNeeded) {
    $out .= '</div>';
}

echo $out;

Should be working fine.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Mar 31, 2016 at 12:31

dingo_d

11.9k12 gold badges83 silver badges137 bronze badges

Comments

Raf · Accepted Answer · 2016-03-31 15:32:25Z

0

Correct loop should look like this:

 <?php if(have_posts()) : ?>
 <?php $no_of_posts = wp_count_posts()->publish; ?>
 <div class="wrap">
     <?php $i=1; while(have_posts()) : the_post(); ?>
     <div class="post">
         post text
     </div>
     <?php if($i%2==0 && $i!=$no_of_posts) : ?>
     </div>
     <div class="wrap">
     <?php endif; ?>
     <?php $i++; endwhile; ?>
 </div>
 <?php endif; ?>

answered Mar 31, 2016 at 15:32

Raf

3522 silver badges11 bronze badges

Comments

dev_jonas · Accepted Answer · 2016-03-31 10:53:49Z

-1

You meaning this like?

<?php 
if ( have_posts() ) {
    while ( have_posts() ) {
        for ($i=0; $i<2; $i++) {
            // what do you like to do
            ?>
            <!-- HTML CODE -->
            <?php
        }
    } 
}else{
    // ...
}
?>

Why do you not add a simple for loop in the WordPress loop?

edited Mar 31, 2016 at 10:53

answered Mar 31, 2016 at 10:32

dev_jonas

12 bronze badges

Collectives™ on Stack Overflow

PHP Add every 2 items inside DIV in WordPress loop

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related