How to implement BootStrap Carousel in WordPress theme


Though there are a lots of image slider programs are already there but if my favorite Framework has a built in Image slider then why to use another image slider that not only add some extra byte in my WordPress theme but also add some extra CSS code  and slow down my website?

You all are aware about the fact that I am in this business for more than 4 years and developing Adsense optimized WordPress theme that is also superfast but when I decided to switch over to responsive themes then it was bootstrap that is one of the most used framework and it coupled with a lots of jQuery plugins, carousel is one of them.

The Whole Tutorial is divided into four parts-

1: HTML Coding   2. jQuery implementation 3. CSS implementation  4. WordPress implementation

The tutorials available on the internet contains only its implementation is HTML and none of them dare to show us how to properly do the same in WordPress, so we will start out discussion from HTML

1. HTML  Coding for BootStrap Carousel

<pre>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class=""></li>
        <li class="active" data-target="#myCarousel" data-slide-to="1"></li>
        <li class="" data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
<div class="carousel-inner">
        <div class="item">
          <img src="http://binarynote.com/1stimage.jpg” alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
            </div>
          </div>
        </div>
        <div class="item active">
          <img src="http://binarynote.com/Second slide" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src=http://binarynote.com/3rdimage.jpg alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->

</pre>

Step:2  jQuery Implementation of BootStrap carousel in HTML

now jquery functions to implement this carousel code is

<pre>

<script type=”text/javascript”>
$(document).ready (function($) {
$(‘.carousel’).carousel({
interval: 1000
})
});
</script>

</pre>

CSS is already available in your bootstrap.css file so there is no need to figure out how to do this or that.   Now the real problem begins, How to implement this whole code inside a WordPress theme?

If you are able to dissect the above HTML code then you can see the whole code is divided into three major parts

BootStrap Carousel Anatomy

1.   Carousel Indicators: small circles at the bottom of each image that also controls the navigation

<!—Indicators –>

<ol class=”carousel-indicators“>

<li data-target=”#myCarousel” data-slide-to=”0” class=””></li>

<li class=”active” data-target=”#myCarousel” data-slide-to=”1“></li>

<li class=”” data-target=”#myCarousel” data-slide-to=”2“></li>

</ol>

2.  Carousel-inner : This part basically controls the image, header,paragraph and appearance of buttons on images. Carousel Inner is further divided into two divs  Item and item active. For your ready reference just once more check out its working

<div class=”item“>

<img src=http://binarynote.com/abc.jpg”  alt=”First slide“>

<div class=”container“> <div class=”carousel-caption“>

<h1>Example headline.</h1>

<p>Note: If you’re viewing this page via a <code>file://</code> URL, the “next” and “previous” Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>

<p><a class=”btn btn-lg btn-primary” href=”#” role=”button“>Sign up today</a></p>

</div></div></div>

3.  carousel Control : These are the left and right navigation on your website’s carousel and this is implemented using the below code

<a class=”left carousel-control” href=”#myCarousel” data-slide=”prev“><span class=”glyphicon glyphicon-chevron-left“></span></a>

<a class=”right carousel-control” href=”#myCarousel” data-slide=”next“><span class=”glyphicon glyphicon-chevron-right“></span></a>

 

Problem in Implementing BootStrap Carousel in WordPressa

There are several problem in implementing any carousel in WordPress few of them are as follows

1.  WordPress display any single page or post from different files these files may be coming from Database Attribute, WordPress theme Template or A plugins, and also these image are mostly , either available through post image or featured images.

2. Bootstrap Carousel need one active image and remaining as inactive image to start its functiong

3.  WordPress support a lots of javascript library, so it is important to load jQuery in no-conflict mode and also execute this query in the same way so that in near future our slider does not create any conflict with our plugins

Solutions

1. For the sake of this tutorial we are taking a custom loop to find out three recent post from a dummy post category ‘Cars’ and using a php variable we will set first featured image of our post as active and another two post as its item. So out  solution will look like this . For this I have defined a new file carousel.php file

<div id=”myCarousel” class=”carousel slide visible-lg”>
<ol class=”carousel-indicators”>
<li data-target=”#myCarousel” data-slide-to=”0″ class=””></li>
<li class=”active” data-target=”#myCarousel” data-slide-to=”1″></li>
<li class=”” data-target=”#myCarousel” data-slide-to=”2″></li>
</ol>

<div class=”carousel-inner”>
<?php
$i=1;
$the_query = new WP_Query(array(
‘category_name’ => ‘Cars’,
‘posts_per_page’ => 3
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
if($i == 1){  ?>
<div class=”item active”>
<?php the_post_thumbnail(‘full’);?>
<div class=”carousel-caption”>
<h2><?php the_title();?></h2>
<p><?php the_content();?></p>
<a class=”btn btn-success big” href=”http://www.binarynote.com”>Getting Started with Binarynote</a>
+–</div>
</div><!– item active –>
<?php }
else { ?>
<div class=”item”>
<?php the_post_thumbnail(‘full’);?>
<div class=”carousel-caption”>
<h2><?php the_title();?></h2>
<p><?php the_content();?></p>
<a class=”btn btn-success btn-lg” href=”http://www.binarynote.com”>Getting Started with Binarynote</a>
</div>
</div><!– item –>
<?php }
$i++; endwhile;
wp_reset_postdata();
?>
</div><!– carousel-inner –>
<a class=”left carousel-control” href=”#myCarousel” data-slide=”prev”>
<i class=”fa fa-angle-left fa-2x”></i></a>
<a class=”right carousel-control” href=”#myCarousel” data-slide=”next”>
<i class=”fa fa-angle-right fa-2x”></i></a>
</div><!– #myCarousel –>

Now its time to implement jQuery functionality to slide our images. To do this you are requested to open your functions.php file and paste the following code into it.

if ( ! function_exists( ‘bookreview_carousel_exists’ )) :
function bookreview_carousel_exists() { ?>
<script type=”text/javascript”>
jQuery(function($) {
jQuery(‘.carousel’).carousel({
interval: 7000
})
});
</script>
<?php }
add_action( ‘wp_footer’, ‘bookreview_carousel_exists’ );
endif;

Now your carousel is ready to rock but it is not visible in your file so its time to activate this. I used to add carousel.php file in my index.php file, you are free to use it any where using

<?php get_template_part(‘carousal’); ?>

That’s’ all my dear friends, Enjoy your Responsive Bootstrap carousel.




9 Brilliant Comments - Join Discussion Now!

  1. Monika Sharma says:

    Great this is amazing & wonderful article ! I love this helpful article ! I think there is nothing hard to do, there is just need to copy & paste this cording in word press right…. ?

  2. Hi,

    This is really something different from others Rakesh… Like your style of explain through the words. Thanks for sharing this information here. :)

    Regards!!!
    Bhavesh

    • rakesh says:

      Happy to know that you like this post to imlpemenet bootstrap carousel in WordPress. Keep in touch Bhavesh for such wonderful tricks and tips.

  3. Rabin Awal says:

    Whats about a bootstrap carousel with thumbnails sliders as well here is html version. http://codepen.io/RetinaInc/pen/rxksh . How can we make it work in WordPress ? The thumbnail part is very complex to make it work. Ain’t it? I hope you can find a solution and share with us. Thank you in advance.

    • rakesh says:

      This is simple slider but instead of using this, I would love to use bxslider. Its easy to implement and have a lots of other premium features, responsive as well as lightweight. Thus one of my favorite slider plugin on internet. But if you need the working of this slider only then drop an email at rakesh@binarynote.com with details. Keep in touch rabin :)

  4. Matt says:

    Fantastic post. Was key in retro-fitting a pager into my site. Thanks for sharing!

  5. RaShaun says:

    Hi! Great post!

    I only have one question: what is ‘bookreview_carousel_exists’? Is that the name of the carousel or function? Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>