php - Display WordPress posts in alternating sets of 3 then 2 items - Stack Overflow

admin管理员组

文章数量:1122832

I am struggling to get the following function work properly. I am trying to configure a loop inside WordPress with wrapping every first 3 items in a div. After that it should wrap the next 2 items in a div. and so on.

What I want to achieve:

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="row">
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="row">
    <div class="item"></div>
    <div class="item"></div>
</div>

What I tried:

<div class="row">
<?php 
$i = 0;
while ( have_posts() ) : the_post(); $i++; ?>
    <div class="item"></div>
    
    <?php if( $i % 3 == 0 ): ?>
        </div><!-- .row -->
        <div class="row">
    <?php endif; ?>
<?php endwhile; ?>
</div>

Finally this wraps up every third element into a new row. Hopefully somebody can give me the hint to help me with this to get the second repeater (2 items in a row) working.

I am struggling to get the following function work properly. I am trying to configure a loop inside WordPress with wrapping every first 3 items in a div. After that it should wrap the next 2 items in a div. and so on.

What I want to achieve:

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="row">
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="row">
    <div class="item"></div>
    <div class="item"></div>
</div>

What I tried:

<div class="row">
<?php 
$i = 0;
while ( have_posts() ) : the_post(); $i++; ?>
    <div class="item"></div>
    
    <?php if( $i % 3 == 0 ): ?>
        </div><!-- .row -->
        <div class="row">
    <?php endif; ?>
<?php endwhile; ?>
</div>

Finally this wraps up every third element into a new row. Hopefully somebody can give me the hint to help me with this to get the second repeater (2 items in a row) working.

• php
• wordpress
• while-loop
• grouping
• alternating

Share Improve this question Follow edited Nov 22, 2024 at 5:34 mickmackusa 47.7k1313 gold badges9292 silver badges159159 bronze badges Recognized by PHP Collective asked Nov 21, 2024 at 20:51 JustusJustus 12322 silver badges1010 bronze badges 1

• Same task: Split array into chunks of alternating sizes – mickmackusa Commented Nov 22, 2024 at 3:59

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

You don't want to use modulus for this, since the row count is different for each group. Instead, reset your counter, and set a variable for the number of rows that will change every time you change groups:

<div class="row">
    <?php
    $i = 0;
    $row_count = 3;
    while ( have_posts() ) : the_post(); $i++; ?>
    <div class="item"></div>

    <?php if( $i === $row_count ): ?>
</div><!-- .row -->
<div class="row">
    <?php $i = 0; $row_count = $row_count == 3 ? 2 : 3;  ?>
    <?php endif; ?>
    <?php endwhile; ?>
</div>

I endorsed restarting the counter variable every time a new group is created and setting the new row limit to 5 minus the current row limit. This will alternate between 2 and 3 mathematically.

To avoid writing div tags when there are no posts to print, only start printing row tags inside the loop and only print a conditional row ending tag if the loop has done at least one iteration.

Code: Demo

$i = null;
$breakOn = 3;
$rowStart = '<div class="row">' . "\n";
$rowEnd = '</div>' . "\n";
$item = '    <div class="item"></div>' . "\n";
while (have_posts()) {
    the_post();
    if ($i === $breakOn) {
        echo $rowEnd . $rowStart;
        $breakOn = 5 - $breakOn;
        $i = 0;
    } elseif (!$i) {
        echo $rowStart;
    }
    echo $item;
    ++$i;
}
if ($i !== null) {
    echo $rowEnd;
}

Output:

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="row">
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="row">
    <div class="item"></div>
    <div class="item"></div>
</div>

本文标签： phpDisplay WordPress posts in alternating sets of 3 then 2 itemsStack Overflow