After the last tutorial on how to Add Bootstrap to a WordPress theme it’s now time to do something useful with Bootstrap. Let’s make a slideshow that uses the featured images of the posts in a “Slideshow category”.
If you are using Bootstrap the good news is that it already has a carousel component by default which we can use and adapt for WordPress use. Let’s just copy the example code from the Bootstrap site and replace the img src with some pictures already uploaded in wordpress. Open the page template where you want to display the carousel (for example index.php) and paste the code below under the get_template_part( ‘header’ ); line. Make sure you replace the images with your own images:
The result show look something like this:
Let’s now change the code and have the slidehow content created dynamically from posts in a specific category. Create a category, let’s say “Slideshow” from the dashboard, then click on edit category and check the id of the new category in the URL, for example: https://www.wp-starter.com/demo/wp-admin/term.php?taxonomy=category&tag_ID=16
Now, add some posts to the category, making sure they have text and a featured image. The portion of the text will be used as caption, and the featured image as the slideshow image.
Good, now we need to change the slideshow code and add the wordpress loop. First, there are 3 slides in the example, and as we need to cycle using the WordPress loop we only need one. So we only need one recurrence of the carousel-inner div.
Let’s prepare the WordPress loop and make it read the “Slideshow” category. To read the posts of the slideshow category you need to send the category id to the loop by setting loop arguments.
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="https://www.wp-starter.com/demo/wp-content/uploads/2021/05/hybrid-6274156_1280.jpg" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
Some representative placeholder content for the first slide.
</div>
</div>
If you are running this code you will see that it’s not working. Here is the hint from the bootstrap site: The .active class needs to be added to one of the slides otherwise the carousel will not be visible. This means we need to add the active class to only one slide. But the loop repeats the same code 3 times. We need a counter – it’s easier than you might think:
<?php
$count=0; // here we add a variable
$args = array(
'posts_per_page'=>'3',
'cat'=>'16'
);
$wp_query = new WP_Query( $args );
if ( $wp_query->have_posts()) : while ( $wp_query->have_posts()) : $wp_query->the_post();
$count ++; // here we implement the increment
?>
<div class="carousel-item <?php if($count=="1") {echo 'active'; // here we set the active class if it's the first occurence} ?>">
<img src="https://www.wp-starter.com/demo/wp-content/uploads/2021/05/hybrid-6274156_1280.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<?php endwhile; endif; ?>
We are all good now, just need to replace the hardcoded content with content from the loop. For this we will use the usual the_content(),the_title(). For the thumbnail, if you look at the html title we should also add a class: d-block w-100. For this we will use the_post_thumbnail with a class array like this:
Here is the final code: