Add bootstrap carousel in WordPress Without Plugin
The integration of bootstrap carousel in WordPress can be achieved without a plugin.
For someone who knows the bootstrap slider scheme will add the carousel to WordPress in less than 5 minutes.
The home page of this blog displays the slider of bootstrap.
Although, the StackOverflow answers regarding this matter have shown various ways to include a bootstrap slider in WordPress.
But the method in this post is simple that is easy to understand.
Let’s get started now.
Bootstrap Slider Shortcode
This code sets a slider with next and previous that one can use to control the slider.
And the additional feature of this carousel is the indicators that show the current image position.
1.<!--sr=tarting carousel-->
2.<div id="webappscarousel" class="carousel slide" data-ride="carousel">
3.<ol class="carousel-indicators">
4.<?php for($i=0;$i<=4;$++):?>
5.<li data-target="#webappscarousel" data-slide-to="<?php echo $i;?>" class="active"></li>
6.<?php endfor;?>
7.</ol>
8.<div class="carousel-inner">
9.<?php $post_counter=0; if(have_posts()):?>
10.<?php while(have_posts() && $post_counter<=4): the_post(); ?>
11.<!--here post thumbnail-->
12.<?php if(has_post_thumbnail()):?>
13.<?php if($post_counter>0):?>
14.<div class="carousel-item">
15.<?php the_post_thumbnail();?>
16.<div class="carousel-caption d-none d-md-block">
17.<h3> <a href="<?php the_permalink();?>"><?php the_title();?></a></h3>
18.</div><!--carousel caption-->
17.</div>
18.<?php else:?>
19.<div class="carousel-item active">
20.<?php the_post_thumbnail();?>
21.<div class="carousel-caption d-none d-md-block">
22.<h3> <a href="<?php the_permalink();?>"><?php the_title();?></a></h3>
23.</div><!--carousel caption-->
24.</div><!--carousel item-->
25.<?php endif;?>
26.<?php else:?>
27.<?php if($post_counter>0):?>
28.<div class="carousel-item">
29.<img class="d-block w-100" src="<?php echo get_template_directory_uri();?>/images/web_app_icon.png">
30.<div class="carousel-caption d-none d-md-block">
31.<h3> <a href="<?php the_permalink();?>"><?php the_title();?></a></h3>
32.</div><!--carousel caption-->
33.</div>
34.<?php else:?>
35.<div class="carousel-item active">
36.<img class="d-block w-100" src="<?php echo get_template_directory_uri();?>/images/web_app_icon.png">
37.<div class="carousel-caption d-none d-md-block">
38.<h3> <a href="<?php the_permalink();?>"><?php the_title();?></a></h3>
39.</div><!--carousel caption-->
40.</div><!--carousel item-->
41.<?php endif;?>
42.<?php endif;?>
43.<?php $post_counter++;?>
44.<?php endwhile;?>
45.<?php endif;?>
46.<?php wp_reset_postdata();?>
47.<a class="carousel-control-prev" href="#webappscarousel" role="button" data-slide="prev">
48. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
49. <span class="sr-only">Previous</span>
50. </a>
51. <a class="carousel-control-next" href="#webappscarousel" role="button" data-slide="next">
52. <span class="carousel-control-next-icon" aria-hidden="true"></span>
53. <span class="sr-only">Next</span>
54. </a>
55.</div><!--carousel inner-->
56.</div><!--carousel-->
Design five carousel indicators.
A slider should indicate which image is currently displaying in the carousel.
The indicators can be small rounded or something else.
Line-5 for instance creates five indicators.
It uses for loop that counts from zero to 4.
The loop counts the list item tag five times.
Each list item <li> draws a circular indicator or horizontal rectangular.
Since the carousel uses Bootstrap CSS Framework, the <li> must include some attributes and bootstrap classes.
add data-target attribute and set it to the id name of the carousel container mine is #webappscarousel
Also, set the class to carousel and slide and data-ride attribute to the carousel.
This enables the indicator to slide the image when clicked or touched.
From the above code, this has been set in Line-5.
Display sliding images and posts title
The bootstrap carousel class that shows a specific image is a carousel-item.
The class is specified in the div container (<div class=”carousel-item”>).
Each <div class=”carousel-item”> holds one image.
Line-10 implements the while loop to retrieve the latest five post thumbnail images.
The previous line (Line-8) has the div tag with class carousel-inner.
carousel-inner sets the width of the item and hides the item when the item is overflow.
Line-15 calls the_post_thumbnail() function to retrieve the featured image of the post.
The post images thumbnail display together with its post title.
The post title acts like an image caption.
To set the image caption, line-16 sets div classes to carousel-caption, d-none, and d-md-block.
This container holds all five post titles.
Line-17 retrieves most recently five posts using the_title function.
The posts titles can be fetched using get_the_title too.
Create slider controls
An interactive slider enables a visitor to slide the images left or right.
Meaning, a carousel should have a left button to slide the image before the current image.
And the right button to view the image next to the current image.
Lines47-50 creates a previous button (right-angled quotation).
Lines51-54 creates the next button (left-angled quotation).
For further learning, you can visit a bootstrap page on the slider section
Add the control codes outside the while loop otherwise, they will appear multiple times.
The role wp_reset_postdata function
According to WordPress, wp_reset_postdata restores the $post global variable to the current main query.
The carousel in this post is placed in index.php
The index.php has a second section that shows all the blog posts while the carousel shows only the last five posts.
Therefore, each section(main and carousel) uses a while loop to display post contents.
If the wp_reset_postdata is not called in the slider widget, the last five posts of the carousel will not be available in the main section.
The main post area will show the sixth post as a first post.
To fix this, wp_reset_postdata must be used if there is more than one while loop.
Conclusion
Bootstrap carousel is a convenient way to add a slider in wordpress since there are many ready-made classes for sliders.
A theme can include a carousel without implementing javascript.
Bootstrap uses JQuery.
But you may find it harder to remember all bootstrap classes.
You can add a slider to WordPress from scratch without bootstrap and it is simple.
For page speed optimization I avoid BootStrap in some occasional like building slider.
