Apply different class to first two rows and last two rows

• jeffelizaga

• April 24, 2016 at 5:58 pm

I have a layout where the first two rows need to be wrapped in a div with a class of left-side and and other 2 rows wrapped in a div with a class of right-side. I have tried using a counter but only managed to get the first two rows and get stucked.

Here’s my code:

<div class="row process-content">
    <?php
        if( have_rows('processes') ) :
        $i = 0;
    ?>
    <div class="left-side">
        <?php while( have_rows('processes') ) : the_row(); ?>
        <?php $i++ ?>
        <?php if( $i > 2 ) : break; ?>
        <?php endif; ?>
        <div class="item" data-item="<?php the_sub_field('step_number'); ?>">
            <h5><?php the_sub_field('step_title'); ?></h5>
            <p><?php the_sub_field('step_description'); ?></p>
        </div> <!-- END .item -->
        <?php endwhile; ?>
    </div> <!-- END .left-side -->
    <?php else : ?>

        <div class="right-side">
        </div> <!-- END .right-side -->

    <?php endif; ?>

    <div class="image-part"></div>
    
</div> <!-- END .process-content -->

• John Huebner

• April 25, 2016 at 8:12 am

This code <?php if( $i > 2 ) : break; ?> causes the wile loop to end execution which means that no other rows will be displayed. All of your display will need to be inside the loop.

$i = 0;
$count = count(get_field('processes')); // has total count of rows
while (have_rows('processes')) {
  the_row();
  if ($i<=2) {
    $i++;
    echo 'first 2 rows<br />';
  } else {
    echo 'after first 2 rows<br />';
  }
}

• jeffelizaga

• April 25, 2016 at 10:11 pm

Doesn’t seem to work. I apologize about this as i’m not really familiar with PHP yet.
This is how I used your code:

<div class="row process-content">
    <?php
    $i = 0;
    $count = count(get_field('processes')); // has total count of rows
        while (have_rows('processes')) {
          the_row();
          if ($i<=2) { $i++; ?>
              <div class="left-side">
                  <div class="item" data-item="<?php the_sub_field('step_number'); ?>">
                      <h5><?php the_sub_field('step_title'); ?></h5>
                      <p><?php the_sub_field('step_description'); ?></p>
                  </div> <!-- END .item -->
              </div> <!-- END .left-side -->
             <?php } else { ?>
             <div class="right-side">
                 <div class="item" data-item="<?php the_sub_field('step_number'); ?>">
                     <h5><?php the_sub_field('step_title'); ?></h5>
                     <p><?php the_sub_field('step_description'); ?></p>
                 </div> <!-- END .item -->
             </div> <!-- END .right-side -->
           <?php } ?>
        <?php } ?>
    <div class="image-part"></div>
</div> <!-- END .process-content -->

• John Huebner

• April 27, 2016 at 11:30 am

Well, that’s because I put an error in there that I’m just now seeing, which will make it never work, sorry, and sorry for taking so long to get back to this. The $i++ is in the wrong place.

<div class="row process-content">
    <?php
    $i = 0;
    $count = count(get_field('processes')); // has total count of rows
        while (have_rows('processes')) {
          $i++;
          the_row();
          if ($i<=2) { ?>
              <div class="left-side">
                  <div class="item" data-item="<?php the_sub_field('step_number'); ?>">
                      <h5><?php the_sub_field('step_title'); ?></h5>
                      <p><?php the_sub_field('step_description'); ?></p>
                  </div> <!-- END .item -->
              </div> <!-- END .left-side -->
             <?php } else { ?>
             <div class="right-side">
                 <div class="item" data-item="<?php the_sub_field('step_number'); ?>">
                     <h5><?php the_sub_field('step_title'); ?></h5>
                     <p><?php the_sub_field('step_description'); ?></p>
                 </div> <!-- END .item -->
             </div> <!-- END .right-side -->
           <?php } ?>
        <?php } ?>
    <div class="image-part"></div>
</div> <!-- END .process-content -->

Is anything being displayed at all?