WordPress target last Item in Posts foreach loop

Question

I would like to target the last Item on a foreach loop and add there some class's. Is that possible?

This is my code:

<?php
$args = array(
    'posts_per_page'  => -1,
    'post_type'       => 'art',
    'cat'             =>  '6',
    'orderby'         => 'name',
    'order'           => 'ASC',
    'post_status'     => 'publish'
);
$posts_array = get_posts( $args );

foreach($posts_array as $post) : setup_postdata($post);
if ( has_post_thumbnail() ) {
    $title = str_replace(" ", "&nbsp;", get_the_title());
    $thumb = get_the_post_thumbnail($post->ID, 'exhibition-pre');
    if (has_post_thumbnail()) { ?>
        <div class="grid-3 grid-tablet-4 grid-mobile-6 artythumbs">
                <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
    }
}
endforeach; ?>
<?php wp_reset_postdata(); ?>

I would like to have in the end:

<div class="grid-3 grid-tablet-4 grid-mobile-6 artythumbs>...</div>
<div class="grid-3 grid-tablet-4 grid-mobile-6 artythumbs>...</div>
<div class="grid-3 grid-tablet-4 grid-mobile-6 artythumbs>...</div>
<div class="grid-3 grid-tablet-4 grid-mobile-6 artythumbs CLEAR-Tablet>...</div>
<div class="grid-3 grid-tablet-4 grid-mobile-6 artythumbs CLEAR-Screen>...</div>
<div class="grid-3 grid-tablet-4 grid-mobile-6 artythumbs>...</div>
<div class="grid-3 grid-tablet-4 grid-mobile-6 artythumbs>...</div>
<div class="grid-3 grid-tablet-4 grid-mobile-6 artythumbs>...</div>
<div class="grid-3 grid-tablet-4 grid-mobile-6 artythumbs CLEAR-Tablet>...</div>
<div class="grid-3 grid-tablet-4 grid-mobile-6 artythumbs CLEAR-Screen>...</div>

and so on.

Can you achieve what you're after with `nth-child`? Either via CSS or [jQuery](http://stackoverflow.com/questions/8733475/alternative-for-nth-child-for-older-ie-browsers)? — Hobo, May 09 '14 at 10:27

score 1 · Accepted Answer · answered May 09 '14 at 10:50

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 of get_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(" ", "&nbsp;", 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

WordPress target last Item in Posts foreach loop

1 Answers1