Combining php loop and count - Wordpress ACF

Question

I wondered if anyone could help me combine two blocks of code I have. I have one block looping though items and the start of another block showing a count and hopefully enabling me to display the items looping through in rows by adding a div around them every two items... Heres the first bit of code, the loop:

<?php if(get_field('areas')): ?>



                <?php while(has_sub_field('areas')): ?>


                    <div class="single-area-item six columns">
                        <p> <img src="<?php the_sub_field('area_icon'); ?>" style="width:100%;"> <p>
                        <h4> <?php the_sub_field('area_title'); ?> </h4> 
                        <p> <?php the_sub_field('area_info'); ?> <p>
                    </div>

                <?php endwhile; ?>



        <?php endif; ?>

I'm using Advance Custom Fields for Wordpress and this is pulling through repeater fields... this displays them just one after the other.

Here's the code I have found to hopefully display them in rows.

<?php

$num = 1;
foreach ( $terms as $term ) { 
 if($num%2) {
  echo '<div class="area-row">';
 }

 // Other Code 

 if($num %2) {
  echo '</div>';
 }
 $num++
}

?>

I would like to display them in rows of two...

ONE TWO THREE FOUR FIVE SIX

Etc...

So, Im guessing I need to combine the code somehow... I currently have this: but it doesn't seem to work:

<?php

$num = 1;
foreach ( $terms as $term ) { 
 if($num%2) {
  echo '<div class="area-row">';
 }

if(get_field('areas')): ?>



                <?php while(has_sub_field('areas')): ?>


                    <div class="single-area-item six columns">
                        <p> <img src="<?php the_sub_field('area_icon'); ?>" style="width:100%;"> <p>
                        <h4> <?php the_sub_field('area_title'); ?> </h4> 
                        <p> <?php the_sub_field('area_info'); ?> <p>
                    </div>

                <?php endwhile; ?>



        <?php endif; ?>

 if($num %2) {
  echo '</div>';
 }
 $num++
}

?>

What do you mean when you say it doesn't seem to work? What is the output that you are actually getting? — Ben Lonsdale
– Ben Lonsdale, Commented May 3, 2017 at 9:17
Hi @ben Im not getting any output I'm afraid, when I try that code the site just doesn't load and shows a white, blank page. — Shaun Taylor
– Shaun Taylor, Commented May 3, 2017 at 9:19
No, it's not the whole template file it's just the code Im having issues with... — Shaun Taylor
– Shaun Taylor, Commented May 3, 2017 at 9:23
ideedev.co.uk/newseed/brand Heres the page with just the first block of code... my issue is that the third item that drops down has padding on the left, pushing other items down a row.... — Shaun Taylor
– Shaun Taylor, Commented May 3, 2017 at 9:24

Ben Lonsdale · Accepted Answer · 2017-05-03 09:45:09Z

1

Okay so it looks like there was a couple of simple issues with this, you had closed the php tag after your if statment and then continued to write php without reopening the php tags. Also there is a slight logic error with the if($num%2) statements as one of these needs to be if, the other needs to be if not, so that the alternate.

Give this code a try and let me know how you get on:

<?php
if(get_field('areas')): 
    $num = 1;    
?>
        <?php while(has_sub_field('areas')): 
        if($num%2) {
          echo '<div class="area-row">';
        }  ?>

            <div class="single-area-item six columns">
                <p> <img src="<?php the_sub_field('area_icon'); ?>" style="width:100%;"> <p>
                <h4> <?php the_sub_field('area_title'); ?> </h4>
                <p> <?php the_sub_field('area_info'); ?> <p>
            </div>
            <?php 
             if(!$num%2) {
               echo '</div>';
             }
             $num++
         endwhile; ?>
     <?php endif; ?>

edited May 3, 2017 at 9:45

answered May 3, 2017 at 9:29

Ben Lonsdale

7255 silver badges11 bronze badges

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

6 Comments

Shaun Taylor Over a year ago

Thanks a lot for this @Ben, But it also doesn't seem to work - Again Im getting a blank white page when loading... Does this mean there is a missing closing tag somewhere or something?

Shaun Taylor Over a year ago

Im not sure if its the best way but I have actually managed to make it work using the

Shaun Taylor Over a year ago

nth-child element! ..... single-area-item:nth-child(3n+3) { margin-left: 0; }

Ben Lonsdale Over a year ago

If all it is is to remove that padding that is a nice solution. Just frustrating that we couldn't solve the underlying issue

Shaun Taylor Over a year ago

Yeah - It's the Repeater field Im having issues with, I can make it work with a normal Custom Post Type... I'll add the nth-child as an answer. Thanks so much for taking the time to have a look

|

Shaun Taylor · Accepted Answer · 2017-05-03 09:42:48Z

0

The main reason behind this question was for me to be able to target the third item of the looped through items, as it had padding on it that was breaking the rows that I needed to remove.

I have since found another solution that seems to be working.

By using the nth-child element, I have been able to target and remove the padding on every third item that's looped through - fixing the issue.

.single-area-item:nth-child(3n+3) {  
  margin-left: 0;
}

This is for rows or 2 items, if it were rows of 3 or 4 then it would need to target every 4th or 5th item respectively.

answered May 3, 2017 at 9:42

Shaun Taylor

9922 gold badges17 silver badges47 bronze badges

Collectives™ on Stack Overflow

Combining php loop and count - Wordpress ACF

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related