PHP loop: Add a div around every three items syntax

Question

I'm using a loop in wordpress to output posts. I want to wrap every three posts inside of a div. I want to use a counter to increment on each iteration of the loop but I'm not sure of the syntax that says "if $i is a multiple of 3" or "if $i is a multiple of 3 - 1".

$i = 1;
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post();
     // If is the first post, third post etc.
     if("$i is a multiple of 3-1") {echo '<div>';}

     // post stuff...

     // if is the 3rd post, 6th post etc
     if("$i is a multiple of 3") {echo '</div>';}

$i++; endwhile; endif;

How do I make this happen? thanks!

Solution 1

Why not do the following? This will open it and close it after the third post. Then close the ending div in the event there is not a multiple of 3 to display.

$i = 1;
//added before to ensure it gets opened
echo '<div>';
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post();
     // post stuff...

     // if multiple of 3 close div and open a new div
     if($i % 3 == 0) {echo '</div><div>';}

$i++; endwhile; endif;
//make sure open div is closed
echo '</div>';

In case you didn't know, % is the modus operator will return the remainder after the two numbers are divided.

Solution 2

Use the modulus operator:

if ( $i % 3 == 0 )

In your code you can use:

if($i % 3 == 2) {echo '<div>';}

and

if($i % 3 == 0) {echo '</div>';}

Solution 3

$i = 1;
$post_count=$wp_query->found_posts;
//added before to ensure it gets opened
echo '<div>';
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post();
     // post stuff...

     // if multiple of 3 close div and open a new div
     if($i % 3 == 0 && $i != $post_count) {echo '</div><div>';} elseif($i % 3 == 0 && $i == $post_count){echo '</div>';}

$i++; endwhile; endif;

Comments

[HandiworkNYC.com]

could you please help me put that in the context of the code I pasted in my answer above?

[JF Dion]

@j-man86: you can use it has-is, replace "$i is a multiple of 3-1" with $i % 3 == 0

[HandiworkNYC.com]

that looks good-- is there an advantage to using one or the other in terms of speed or efficiency? I think using the modulus operator makes one less line of code

[HandiworkNYC.com]

i understand now-- using the modulus will create an unclosed div if there is no multiple of 3. Thank you!

[kwelch]

I like this better more so because it make sure to close all of the opening divs. What I would actually do is take the first div and echo it outside the loop. That way even if there is only 1 you have a open/close tag. This will make sure you don't kill the formatting. The actually processing of it should not affect speeds at all since it is a "basic" equation.

[Eli Stone]

Something that might help others remove the empty first tag (or last?) is changing $i % 3 == 0 to $i !== 0 && $i % 3 == 0 this does exactly the same thing but makes sure that we do not check the first id.

[Ayaz Ali Shah]

You save my lot of time, i appreciate you +1

[Solomon Closson]

You should also check the length of $wp_query->post_count because if it equals $i and $i % 3 == 0 than you wouldn't want to output </div><div> since it would be an empty div at the end of your html. Just a FYI.

[Enea Dume]

it would be better if you include some explanation about your code.

[Habib]

The above selected answer was adding an extra div, I gave solution to that, the code I pasted don't add any extra div

[Habib]

I wanted to add this code as comment but my reputation is below 50.

[leymannx]

What Solomon says. The perfect if-construct is if ($i !== 0 && $i % 3 === 0 && $i !== $the_query->post_count).