Wordpress loop counter issue

Question

I have this piece of code thats pulling through a custom post type clients...

<div class="wrap" style="padding-top: 0 !important;">

    <?php
        $args = array( 
          'post_type' => 'short_courses',
          // 'orderby' => 'none',
          'course_type' => 'digital-marketing'
        );
        $the_query = new WP_Query( $args );
    ?>

    <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>


        <div class="one-third course-item">
            <a href="<?php the_permalink(); ?>">

                <p><img src="<?php the_field('listing_thumbnail'); ?>"></p>
                <h4><?php the_title(); ?></h4> 
                <p style="color: #f08464;"><?php the_field('date_for_thumbnail_listing'); ?></p>  
                <p><?php the_field('price'); ?></p>
                <a href="<?php the_permalink(); ?>" class="sc-box-button" style="background-color: #f08464; margin-bottom: 40px;">MORE INFO</a>

            </a>
        </div>

    <?php $products_count = $the_query->current_post + 1; ?>
    <?php if ( $products_count % 4 == 0): ?>

    <?php endif; ?>


    <?php endwhile; wp_reset_postdata(); endif; ?>

</div>

All working great, but with the bit at the bottom:

<?php $products_count = $the_query->current_post + 1; ?>
<?php if ( $products_count % 4 == 0): ?>

I'm trying to get the items to flow onto the next line after 4 items... currently it's doing it after 3 items...

Apologies if it's something simple I'm missing!!!

***** UPDATE FIXED ******

Sorry - I had achieved this effect with CSS, apologies but it was just down to me changing the CSS element to:

@media (min-width: 576px) {
  .card-columns {
    column-count: 4; }
}

remove +1 from this line <?php $products_count = $the_query->current_post + 1; ?> and check — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Jan 10, 2018 at 12:52

Death-is-the-real-truth · Accepted Answer · 2018-01-10 13:17:38Z

3

2 ways to do that:-

1.Either Add counter befor loop and then increment it and check(standered+best way)

$products_count = 0;
<?php if ( have_posts() ) :
  //rest code as it is
<?php $products_count++; ?>
<?php if ( $products_count % 4 == 0): ?> //rest code as it is

2.Or Remove +1 from <?php $products_count = $the_query->current_post; ?>

edited Jan 10, 2018 at 13:17

answered Jan 10, 2018 at 12:57

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

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

1 Comment

Shaun Taylor Over a year ago

Sorry - I had achieved this effect with CSS, apologies but it was just down to me changing the CSS element to: @media (min-width: 576px) { .card-columns { column-count: 4; } }

marcus.kreusch · Accepted Answer · 2018-01-10 12:54:08Z

1

I would recommend doing this before the while:

$products_count = 0;

And this for counting:

$products_count++;
if ( $products_count % 4 == 0): ...

answered Jan 10, 2018 at 12:54

marcus.kreusch

7535 silver badges16 bronze badges

1 Comment

Shaun Taylor Over a year ago

Sorry - I had achieved this effect with CSS, apologies but it was just down to me changing the CSS element to: @media (min-width: 576px) { .card-columns { column-count: 4; } }

baiju jha · Accepted Answer · 2018-01-10 12:54:43Z

1

<?php $products_count = $the_query->current_post; ?>

Remove only +1 from the above code.

answered Jan 10, 2018 at 12:54

baiju jha

4732 silver badges10 bronze badges

1 Comment

Shaun Taylor Over a year ago

Sorry - I had achieved this effect with CSS, apologies but it was just down to me changing the CSS element to: @media (min-width: 576px) { .card-columns { column-count: 4; } }

Collectives™ on Stack Overflow

Wordpress loop counter issue

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related