Alternate loop output every 2nd post

Hi,

Can someone help me about this? I need to alternate every 2nd-row tax in WP, here’s what I wanted to achieve.

<div class="row">
  <div class="col-lg-8"></div> (1st tax post)
  <div class="col-lg-4"></div> (2nd tax post)
</div>

<div class="row">
  <div class="col-lg-4"></div> (3rd tax post)
  <div class="col-lg-8"></div> (4th tax post)
</div>

and here’s my code

$i = 0;
foreach( $location as $term ) : 
$class = ( ++$i % 2 == 0 ) ? 'col-lg-4' : 'col-lg-8';
<div class="<?php echo esc_attr( $class ); ?>">
</div>
endforeach;

I tried following these codes (below)


But I am confuse. Thanks in advance.

Hi Codeex,

This one works great, I have tested it locally, are you confused how it works or what?

The short statement is a simple check if the number is divided by number 2 and there is no remainder the boolean is true so the class is col-lg-4 otherwise if the statement is false the class is col-lg-8.

Kind Regards

1 Like

Also, forget to mention the iteration increases for a number each time.

0 % 2 -> ( 0 == 0 ) - true – { col-lg-4 }
1 % 2 -> ( 1 == 0 ) - false – { col-lg-8 }
2 % 2 -> ( 0 == 0 ) - true – { col-lg-4 }

I hope this makes sense :slight_smile:

Thanks. Yes, I am confused on the numbering. I tried this code here -> https://wordpress.stackexchange.com/questions/84852/alternate-loop-output-every-three-posts-within-the-same-original-loop#answer-84892 but his changing every third post.

Try this one, it’s more clearer and it works as a charm.

<?php $i = 0; ?>
<?php foreach ($location as $term) : ?>
    <div class="<?php echo esc_attr($i % 2 == 0  ? 'col-lg-4' : 'col-lg-8') ?>"></div>
<?php $i++; endforeach; ?>

Kind Regards

1 Like

Thanks for the help man but this is for alternating only. I think the title of my thread does not suit on what I need. I will again attach the HTML code I want to achieve (below)

<div class="row">
  <div class="col-lg-8"></div> (1st tax post)
  <div class="col-lg-4"></div> (2nd tax post)
</div>

<div class="row">
  <div class="col-lg-4"></div> (3rd tax post)
  <div class="col-lg-8"></div> (4th tax post)
</div>
1 Like

Here’s a quick solution on that, we’re using flex to reverse the row direction.

/* Custom CSS */
.flex-reverse-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
}

<?php $i = 0; ?>
<?php foreach ($location as $term) : ?>
    <div class="<?php echo esc_attr($i % 2 == 0 ? 'row' : 'row flex-row-reverse') ?>">
        <div class="col-lg-8">1# </div>
        <div class="col-lg-4">2#</div>
    </div>
<?php $i++; endforeach; ?>

Thanks man. I will give this a try.

You can do that using CSS without the need for nested loop, Maybe it will be helpful to check out the CSS grid property https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Also the nth-child css function can be helpful https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child