PHP Loop - Add a Div around every three Items

Question

Here is the Code that works for 3 items, and if there is exact multiples of 3 items (ie, if we have 9 items) then it will add an extra blank div at the end.

if there is items that is not multiples of 3 (ie, if we have 8 items) then it works fine. I am not a programmer,

so any help will be appreciated:

Bellow are the code sample:

<div class="row">
    <?php 
       $i = 1;
       $wp_query = new WP_Query( array( 'posts_per_page' => -1, 
                  'post_type' => 'projects' ) );
      echo '<div class="panel">';
      if ( $wp_query->have_posts() ) : 
         while ( $wp_query->have_posts() ) : $wp_query->the_post();
         the_title();         
       if($i % 3 == 0) { echo '</div><div class="panel">'; }
     $i++; 
      endwhile; endif;
     echo '</div>';    
  ?>

</div>

Check for the value of $i. If the value of '$i%9' is 0. Then add an extra div at the end of while loop. — chaitanya
– chaitanya, Commented Jun 23, 2016 at 9:26

Nergal · Accepted Answer · 2016-06-23 11:56:03Z

3

If I understand your question correctly you don't want to ad an empty div if your query returns exact multiples of 3 items.

So instead this:

if($i % 3 == 0)

Use this:

if($i % 3 == 0 && $wp_query->post_count != $i)

My suggestion was to edit your code to this:

<div class="row">
    <?php 
    $i = 1;
    $wp_query = new WP_Query(array('posts_per_page' => -1, 'post_type' => 'projects'));
    echo '<div class="panel">';
    if($wp_query->have_posts()) : while ($wp_query->have_posts()) :
         $wp_query->the_post();

         the_title();         
         if($i % 3 == 0 && $wp_query->post_count != $i){
             echo '</div><div class="panel">';
         }
         $i++; 
     endwhile; endif;
     echo '</div>';    
  ?>

</div>

But since then Max P. made a better answere using my suggestion. The difference between the two code is when no item is given this code gonna create an empty div, but his not.

edited Jun 23, 2016 at 11:56

answered Jun 23, 2016 at 9:31

Nergal

1,0151 gold badge15 silver badges30 bronze badges

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

3 Comments

Salih K Over a year ago

now if there is multiple of 3 items then it will give an extra div, otherwise not!!!! ???

Nergal Over a year ago

@SalihK As you can see the operator I use (!=) means "is not equal" which means this gonna return false if your $i variable is equal with the number of your items

Salih K Over a year ago

can you please show how to use your logic with the entire code as above, because it's not working for me. It is more readable and feels a wp way

Max P. · Accepted Answer · 2016-06-23 10:16:28Z

1

Try this code

<div class="row">
    <?php 
      $i = 1;
      $wp_query = new WP_Query( array( 'posts_per_page' => -1, 
                  'post_type' => 'projects' ) );

      if ( $wp_query->have_posts() ) : 
         while ( $wp_query->have_posts() ) :
            if($i % 3 == 1) { echo '<div class="panel">'; }
            $wp_query->the_post();
            the_title();         
            if($i % 3 == 0 || $i == $wp_query->post_count) { echo '</div>'; }
            $i++; 
         endwhile;
      endif; 
  ?>

</div>

edited Jun 23, 2016 at 10:16

answered Jun 23, 2016 at 9:31

Max P.

5,6892 gold badges17 silver badges35 bronze badges

2 Comments

Nergal Over a year ago

@SalihK If the item number not divisible by 3 this not gonna add a close div.

Nergal Over a year ago

@MaxP. You can use or operator $i % 3 == 0 || $i == $wp_query->post_count you gonna get the same result, but I think this would make the code readable.

Samir Selia · Accepted Answer · 2016-06-23 09:28:20Z

0

You can add a div after your loop ends if its not a multiple of 3.

<div class="row">
<?php 
    $i = 1;
    $wp_query = new WP_Query( array( 'posts_per_page' => -1, 
        'post_type' => 'projects' ) );
    echo '<div class="panel">';

    if ( $wp_query->have_posts() ) : 
        while ( $wp_query->have_posts() ) :
            $wp_query->the_post();
            the_title();         
            if($i % 3 == 0) { echo '</div><div class="panel">'; }
            $i++; 
        endwhile;
    endif;
    if($i % 3 != 0) { echo '</div><div class="panel">'; }
    echo '</div>';
?>
</div>

answered Jun 23, 2016 at 9:28

Samir Selia

7,1502 gold badges14 silver badges33 bronze badges

Comments

KIKO Software · Accepted Answer · 2016-06-23 09:30:19Z

0

There are many ways to solve this problem, here is one:

<div class="row">
<?php 

  echo '<div class="panel">';
  $i = 0;
  $wp_query = new WP_Query(array('posts_per_page' => -1, 
                                 'post_type'      => 'projects'));
  if ($wp_query->have_posts()) { 
    while ($wp_query->have_posts()) {
      if($i % 3 == 0)
      {
        if ($i > 0) echo '</div>';
        echo '<div class="panel">';
      }
      $wp_query->the_post();
      the_title();         
      $i++; 
    }
    echo '</div>';    
  } 

?>
</div>

I also cleaned up the code and got rid of the bug that occurs when there are no posts.

answered Jun 23, 2016 at 9:30

KIKO Software

17.5k3 gold badges33 silver badges53 bronze badges

Comments

Mofeng · Accepted Answer · 2016-06-23 09:34:38Z

0

You can add a variable called $j and $j = floor($i/3).

And then if($i % 3 == 0 && $i != 3 * $j) { echo '</div><div class="panel">'; };

answered Jun 23, 2016 at 9:34

Mofeng

351 silver badge8 bronze badges

Collectives™ on Stack Overflow

PHP Loop - Add a Div around every three Items

5 Answers 5

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related