20

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!

Improve this question
2
  • What happens if I would like to added only if it is more than 3 items? and when it equals to 3 items leave it without changes? Commented Sep 8, 2013 at 15:14
  • This was the easiest way I could find: stackoverflow.com/questions/28247770/… Commented Feb 2, 2015 at 5:12

4 Answers 4

Reset to default
57

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.

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

7 Comments

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
i understand now-- using the modulus will create an unclosed div if there is no multiple of 3. Thank you!
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.
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.
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.
|
10

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>';}
Improve this answer

2 Comments

could you please help me put that in the context of the code I pasted in my answer above?
@j-man86: you can use it has-is, replace "$i is a multiple of 3-1" with $i % 3 == 0
1

if you dont need extra div you can use this :

 $i = 0;

 $post_count = $wp_query->found_posts;

 if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) :$wp_query->the_post();

 // If is the first post, third post etc.
 ( ($i%3) == 0 ) ? echo '<div>' : echo '';

 // post stuff...

 // if is the 3rd post, 6th post etc or after the last element

( $i == ($post_count - 1) || (++$i%3) == 0 )  ? echo '</div>' : 
echo '';

endwhile; endif;
Improve this answer

Comments

1 
$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;
Improve this answer

3 Comments

it would be better if you include some explanation about your code.
The above selected answer was adding an extra div, I gave solution to that, the code I pasted don't add any extra div
I wanted to add this code as comment but my reputation is below 50.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.