Adding a class to first div in (foreach) loop

Question

I'm using the carousel that comes with bootstrap. This I'll be using in WordPress. I'm querying two recent posts with a foreach loop but for the carousel to work correctly I need the newest post to have an extra 'active' class. I found some solutions here on stackoverflow but it were all whileloops, I really need it for this foreach loop. This is my code:

    <div id="NewsCarousel" class="carousel slide">
          <div class="carousel-inner">
            <?php
            $args = array( 'numberposts' => '2', 'category' => 5 );
            $recent_posts = wp_get_recent_posts( $args );
            foreach( $recent_posts as $recent ){
                echo '<div class="item"><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' . get_the_post_thumbnail($recent["ID"], array(200,200)) .$recent["post_title"].'</a> </div> ';
           }
          ?>
          </div>
       </div>

loop type shouldn't matter , add a counter, first iteration add the class — user557846
– user557846, Commented Jan 5, 2014 at 22:31
... or use the $recent_posts array keys, if they are guranteed to be zero based — zerkms
– zerkms, Commented Jan 5, 2014 at 22:32

Jason Bassett · Accepted Answer · 2015-01-12 15:57:46Z

You can add a counter like so $count = 0; outside of the foreach loop. And then inside the foreach loop you tell it to increment like so $count++;

You then check if the count is equal to 1 like this: if($count == 1){//do this}

So in your case lets do it like this:

<div id="NewsCarousel" class="carousel slide">
<div class="carousel-inner">
<?php
$args = array( 'numberposts' => '2', 'category' => 5 );
$recent_posts = wp_get_recent_posts( $args );
$count = 0;
foreach( $recent_posts as $recent ){
$count++;
    echo '<div class="item'; if($count == 1){echo ' active';}"><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' . get_the_post_thumbnail($recent["ID"], array(200,200)) .$recent["post_title"].'</a> </div> ';
}
?>
</div>
</div>

Try that, it should do the trick. I just used this method on a project of which I'm dealing with currently.

Mike Vranckx · Accepted Answer · 2014-01-05 22:33:35Z

5

You can use a boolean variable to determine if it is a first loop or not. Initial value is true, once it loops, the value is set to false.

<div id="NewsCarousel" class="carousel slide">
  <div class="carousel-inner">
    <?php
    $args = array( 'numberposts' => '2', 'category' => 5 );
    $recent_posts = wp_get_recent_posts( $args );
    $isFirst = true;
    foreach( $recent_posts as $recent ){
        echo '<div class="item' . $isFirst ? ' active' : '' . '"><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' . get_the_post_thumbnail($recent["ID"], array(200,200)) .$recent["post_title"].'</a> </div> ';
        $isFirst = false;
   }
  ?>
  </div>
</div>

answered Jan 5, 2014 at 22:33

Mike Vranckx

5,5973 gold badges27 silver badges28 bronze badges

2 Comments

user1381553 Over a year ago

doesn't work, I get x times the word active echoed, no classes, nothing.

strix25 Over a year ago

It is not bad idea to move condition above echo, asign result from condition to variable and then use that variable in echo

Collectives™ on Stack Overflow

Adding a class to first div in (foreach) loop

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related