CODEWITHSUNDEEP
phpwordpresstwitter-bootstrapcarousel
Luigi Lanza
Luigi Lanza

Reputation: 78

How to add a "active" class to a carousel first element

I'm developing a News website in Wordpress, and I need to show in a bootstrap carousel the first three posts, my problem is that I need to add the "active" class only at the first of the three elements, but really don't know how to. Here's my code:

<?php
$args = array('numberposts' => '3');
$recent_posts = wp_get_recent_posts($args);
foreach ($recent_posts as $recent) {
echo '<div class="item active"><a href="' . get_permalink($recent["ID"]) . '" title=" ' . esc_attr($recent["post_title"]) . '" >' .$recent["post_date"] . ': <strong>' .$recent["post_title"] . '</strong></a></div>';
}
?>

I've already tried a answer found on this site (this one):

$isFirst = true;
foreach ($recent_posts as $recent) {
echo '<div class="item' . $isFirst ? ' active' : '' . '"><a href="' . get_permalink($recent["ID"]) . '" title=" ' . esc_attr($recent["post_title"]) . '" >' .$recent["post_date"] . ": <strong>"  .$recent["post_title"] . '</strong></a></div>';
$isFirst = false;
?>

but it just printed me the "active" words.

Thanks for your help

Upvotes: 3

Views: 5089

Answers (1)

Alex Rindone
Alex Rindone

Reputation: 298

You need to set $i so that you can count how many times you have gone through the loop and do some logic with it, like in my example below. Instead of having two lines of code that are nearly identical like I have done below though, you should be able to do the if conditional right around the class active. I didn't do that so you could clearly see the conditional and the count of the loops through the array. 

<?php
$args = array('numberposts' => '3');
$recent_posts = wp_get_recent_posts($args);
$i = 0;
foreach ($recent_posts as $recent) {

if ($i == 0) {
    echo '<div class="item active"><a href="' . get_permalink($recent["ID"]) . '" title=" ' . esc_attr($recent["post_title"]) . '" >' .$recent["post_date"] . ': <strong>' .$recent["post_title"] . '</strong></a></div>';
} else {
    echo '<div class="item"><a href="' . get_permalink($recent["ID"]) . '" title=" ' . esc_attr($recent["post_title"]) . '" >' .$recent["post_date"] . ': <strong>' .$recent["post_title"] . '</strong></a></div>';
}
$i++;
}
?>

Upvotes: 5

Related Questions