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>

Solution 1

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.

Solution 2

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>