Insert a div every three items in the wordpress loop (php)

Question

I am trying to add an image after every three posts in the wordpress loop. Here's the loop:

<?php if ( have_posts() ) : ?>

  <?php /* The loop */ ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'content', get_post_format() ); ?>
  <?php endwhile; ?>

  <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
  <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

My guess would be to insert a counter, but I'm not sure about the placement. My guess.

<?php if ( have_posts() ) : ?>
  <?php $counter = 0; ?>     
  <?php /* The loop */ ?>
  <?php while ( have_posts() ) : the_post(); ?>
  <?php $counter++; ?>
    <?php get_template_part( 'content', get_post_format() ); ?>
  <?php if ($counter == 3) echo '<img src="url-to-img.jpg" alt="img">'; ?>
  <?php endwhile; ?>

  <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
  <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

But even if this would work (not tested), the counter should reset after the image has been inserted. How should you do that?

Summary: insert an image after every three posts.

Either reset the counter yourself, or make use of the mod operator (%) if (($counter %3) == 0) — Mark Baker
– Mark Baker, Commented Sep 16, 2013 at 13:40

Joel Hinz · Accepted Answer · 2013-09-16 13:41:50Z

3

Sounds like you need the modulo operator. Instead of doing if ($counter == 3), which checks if the counter is three, you should do if ($counter % 3 == 0), which checks whether $counter is evenly divisible by three.

answered Sep 16, 2013 at 13:41

Joel Hinz

25.4k8 gold badges65 silver badges78 bronze badges

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

1 Comment

Kver Over a year ago

Note: If you use modulo (recommended), you never need to reset the counter.

Collectives™ on Stack Overflow

Insert a div every three items in the wordpress loop (php)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related