As has been said you could probably do this through css, but if you want a server side solution try the folllowing:
Two things to note first:
- Consider using
WP_Query
instead ofget_posts()
for this sort of thing, as it's the recommended best practice - You have a check for a featured image twice for some reason.
So, how to attach a class every 4th / 5th item in a loop.
//Step 1: Outside the loop setup a counter
$i = 1;
foreach($posts_array as $post) :
setup_postdata($post);
//Step 2: Once we're in the loop, setup our extra classes
$classes = ' ';
//for multiples of 4
if ( $i % 4 == 0) {
$classes .= ' CLEAR-Tablet';
}
//for multiples of 5
if ( $i % 5 == 0) {
$classes .= ' CLEAR-Screen';
}
if ( has_post_thumbnail() ) {
$title = str_replace(" ", " ", get_the_title());
$thumb = get_the_post_thumbnail($post->ID, 'exhibition-pre');
//Step 3: Include our extra classes
?>
<div class="grid-3 grid-tablet-4 grid-mobile-6 artythumbs <?php echo $classes; ?>">
<a href="<?php echo get_permalink() ?>">
<?php echo get_the_post_thumbnail($page->ID, 'art-thumb', array('class' => 'max-img ')); ?>
<div class="imgcont"><?php echo the_title();?></div>
</a>
</div>
<?php
//Step 4: Increment the counter (you might want to do this outside the if but I think it's better here.
$i++;
}
endforeach; ?>
<?php wp_reset_postdata(); ?>
- Setup a counter outside the loop, I started at 1 because we're counting from 1 for our rows.
- Using the modulus operator we can tell if we're at a multiple of 4 or 5 and setup a classes variable appropriately.
- Print out the classes variable
- Increment the counter