PHP Loop: Add a Div Around Every Three Items Syntax

PHP loop: Add a div around every three items syntax

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.

PHP loop: Add a div with different class around every three items syntax

I have modified the reference answer you linked to fit according to your requirement.

Original answer: PHP loop: Add a div around every three items syntax

<?php
$i = 1;
$j = 0;
$target_class = array( 'right', 'left', 'middle' );

//added before to ensure it gets opened
echo '<div class="'.$target_class[$j].'">';
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post();

// Do whatever you want here.

// if multiple of 3 close div and open a new div
if($i % 3 == 0) {
// echo inner div if target class is not right
echo ( $j != 0 ? '<div class="inner-div"></div>' : '' );
// send back to first position if it goes above the third position
$k = ( ++$j == 3 ? 0 : $j );
echo '</div><div class="'.$target_class[$k].'">';}

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

This should work. Did not test it though.

Edit: Tested and fixed. Code is working

Edit: 2 Update code to entertain request from comment.

Edit: 3 Update code to entertain request from comment.

PHP Loop - Add a Div around every three Items

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>

Wrapping a div around every third item in a foreach loop PHP

You need to have a separate counter variable:

$i = 0;
foreach($info as $key => $val){
if($i%3 == 0) {
echo $i > 0 ? "</div>" : ""; // close div if it's not the first
echo "<div class='container'>";
}
?>
<div class="holder">
<div class="name">
<?php echo $Name ?>
</div>
<div class="colour">
<?php echo $colour ?>
</div>
</div>
<?php
$i++;
}
?>
</div> <!-- close last container div -->

Add div after every three items in a loop?

Your feelings are right.

You can use the $current_post property of the WP_Query class to get the index of the post currently displayed in the loop, and then use the modulus operator to make sure you are targeting multiples of three.

So your loop could look like this:

 <div class="row container">
<!-- row -->
<div class="twelve columns">
<div class="four columns">
<?php while ( have_posts() ) : the_post(); ?>

<!-- item -->
<div class="four columns">IMAGE HERE</div>

<?php if( $wp_query->current_post % 3 == 0 ) : ?>
</div>
</div>
<!-- row -->
<div class="twelve columns">
<div class="four columns">
<?php endif; ?>
<?php endwhile; ?>
</div>

You might need to improve this implementation. Specifically, make sure that, whatever happens, your HTML closes correctly.

PHP loop add div around items between a count

Add special cases for the first two DIVs, and adjust the modulus for the ones after that.

$count = 1

foreach( $names as $name ):
if ($count == 1 || $count == 4 || ($count > 5 && $count % 3 == 2)) {
echo '<div class="wrap">';
}
echo $name;
if ($count == 3 || $count == 7 || ($count > 7 && $count % 3 == 1)) {
echo '</div>';
}
$count++;
endforeach;
// Finish the last block -- lots of different cases
if ($count < 4 || ($count > 4 && $count < 8) || ($count > 8 && $count % 3 != 2)) {
echo '</div>';
}

Insert a div every three items in the wordpress loop (php)

Sounds like you need the modulo operator. Instead of doing if ($counter == 3), which checks if the counter is three, you should do if ($counter % 3 == 0), which checks whether $counter is evenly divisible by three.

PHP Add every 2 items inside DIV in WordPress loop

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.

php loop wrapping every 4 results with div and custom classes

This is probably most easily done by splitting the array into chunks and processing each chunk individually in a loop, using the count of the chunk to decide which class to add to the spans:

$array = range(1, 11);
$chunks = array_chunk($array, 4);

$span_classes = ['', 'one-half', 'one-third', 'one-fourth'];

foreach ($chunks as $chunk) {
echo "<div class=\"item\">\n";
$count = count($chunk);
$span_class = $span_classes[$count-1];
for ($i = 0; $i < $count; $i++) {
$last = $i == $count - 1 ? ' last' : '';
$val = $chunk[$i];
echo "<span class=\"$span_class$last\">$val</span>\n";
}
echo "</div>\n";
}

Output:

<div class="item">
<span class="one-fourth">1</span>
<span class="one-fourth">2</span>
<span class="one-fourth">3</span>
<span class="one-fourth last">4</span>
</div>
<div class="item">
<span class="one-fourth">5</span>
<span class="one-fourth">6</span>
<span class="one-fourth">7</span>
<span class="one-fourth last">8</span>
</div>
<div class="item">
<span class="one-third">9</span>
<span class="one-third">10</span>
<span class="one-third last">11</span>
</div>

Demo on 3v4l.org



Related Topics



Leave a reply



Submit