Question 2486 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How to add a class to all elements when displaying a post? – WordPress

Using the get_posts() method, I get and display the last 5 posts. They are displayed as a slider. Each slide is a different color. Only 3 colors: yellow, green and blue. How can I add a class to each of the 5 slides to give a different background? The first 3 slides should be yellow, green and blue, and the rest should be yellow and green. How can i do this? Now I tried to implement this functionality, but the class on each slide is yellow-slide
My Code:

<?php
$last_posts = get_posts(array(
    'numberposts' => 5,
    'orderby'     => 'date',
    'post_type'   => 'post',
));

global $post;

$bgcolor = '';

if ($counter == 0) {
    $bgcolor = 'yellow-slide';
} else if ($counter == 1) {
    $bgcolor = 'green-slide';
} else if ($counter == 2) {
    $bgcolor = 'blue-slide';
} else if ($counter == 3) {
    $bgcolor = 'yellow-slide';
} else {
    $bgcolor = 'green-slide';
}

?>

  <div class="swiper">
    <div class="swiper-wrapper">
      <?php $counter = 0;
                    foreach ($last_posts as $post) :
                        setup_postdata($post); ?>
      <div class="swiper-slide <?php echo $bgcolor ?>"></div>
      <?php $counter++ ?>
      <?php endforeach;
                    wp_reset_postdata(); ?>
    </div>
  </div>
Tags:

2

Answers


  1. 0

    Your PHP code is executed in the order it’s written in, so your if-statements will be executed before you’ve even started the foreach-loop (and before the variable $counter even exist). It should actually throw a bunch of "Undefined variable: $counter"-warnings/notices.

    There is an easier way though.

    • Put the class names in an array
    • Fetch the class from the array on each iteration that matches the array index

    Something like this:

    $bgcolors = [
    'yellow-slide',
    'green-slide',
    'blue-slide',
    'yellow-slide',
    'green-slide',
];

    Then after you’ve defined that array, you can do:

    $counter = 0;
foreach ($last_posts as $post) :
    setup_postdata($post); 
    ?>
    <div class="swiper-slide <?php echo $bgcolors[$counter] ?>"></div>
    <?php $counter++ ?>
<?php endforeach;
    Login or Signup to reply.
  2. 0

    Please try this and check again.

    <?php
$last_posts = get_posts(array(
    'numberposts' => 5,
    'orderby'     => 'date',
    'post_type'   => 'post',
));

?>

  <div class="swiper">
    <div class="swiper-wrapper">
    <?php 
        foreach ($last_posts as $key => $post) :
            setup_postdata($post); 

            $bgcolor = '';
            if ($key == 0) {
                $bgcolor = 'yellow-slide';
            } else if ($key == 1) {
                $bgcolor = 'green-slide';
            } else if ($key == 2) {
                $bgcolor = 'blue-slide';
            } else if ($key == 3) {
                $bgcolor = 'yellow-slide';
            } else {
                $bgcolor = 'green-slide';
            }
                ?>
      <div class="swiper-slide <?php echo $bgcolor ?>"></div>

        <?php endforeach;
            wp_reset_postdata(); 
        ?>
    </div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search