How to make Bootstrap Carousel display WordPress Dynamic Content

When code from Twitter’s Bootstrap is not working, one of the main culprits is in linking the files up correctly. It seems to be especially common when adding Bootstrap javascript plugins to a WordPress theme. The Bootstrap files and your jquery library must be called in the proper sequence, along with loads of other scripts being called by other plugins you may be running. I’ve found the popular “WordPress Twitter Bootstrap CSS” plugin to be the best option so far, as it is quite painless and transparent. So Let’s begin.

1) Install ‘WordPress Twitter Bootstrap CSS’ Plugin

Of course you can do it manually, but this method takes 5 seconds, and you can be sure it loads the stylesheets and scripts in their proper places. Btw, it’s best to keep the default option of loading scripts in the footer. If you haven’t already, be sure to add the template tag <?php wp_footer();?> just before the </body> tag in the footer of your theme. The Bootstrap plugin will use this to load it’s necessary javascript.

2) Include the latest jquery library

I’ve added mine just above the wp_footer tag, like so…

</div><!-- .wrapper -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<?php wp_footer();?>
</body>
</html>

Now you can see that the jquery library is called first, and then the bootstrap stuff, as it should be.

3) Grab the Bootstrap Carousel source code

The demo lives here. And here is their source code…

<div id="myCarousel" class="carousel slide">
 <div class="carousel-inner">
  <div class="item active">
   <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="" height="300'/>
   <div class="carousel-caption">
    <h4>First Thumbnail label</h4>
    <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>
   </div>
  </div>
  <div class="item">
   <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="" height="300">
   <div class="carousel-caption">
    <h4>Second Thumbnail label</h4>
    <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>
   </div>
  </div>
  <div class="item">
   <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="" height="300">
   <div class="carousel-caption">
    <h4>Third Thumbnail label</h4>
    <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>
   </div>
  </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>

4) Verify your work so far

Before we start modifying this code, we’ll want to verify that the jquery library, the Bootstrap plugin files, and wordpress are all playing together nicely. Cut & Paste the above code into your own PHP template file, and do what you gotta do to view your carousel in a browser. I’ve saved mine as sidebar-carousel.php in my theme directory, so I can call it with <?php get_sidebar(‘carousel’);?> from inside my index.php template.
Just to save some time, I admit I already changed one thing in this code from the original- I added a height dimension to the images. Obviously the specific JPGs won’t show up, but the added height should allow you to see that the carousel is scrolling when right/left buttons are clicked.
Hint: If clicking a right/left button does nothing but add “#myCarousel” to your url, jquery is not linked up properly.

5) Prepare your Content

We’re keeping it as simple as posible here by creating a category named Home Slider and publishing 3 sample posts under that category. If you’ve already got plenty of content to play with, you can skip this step and insert your category of choice as category_name in the next step… you’ll see.

6) Add your first loop using WP_Query

Now that you’ve seen it work out of the box, it’s time to add the tricky part.
You’ll notice the source code provided 3 carousel items, i.e. <div class=”item”>. Our purposes only require 2: the 1st item with the added class “active”; and the 2nd item, which will self-replicate in the query loop we’re about to create. But first we’ll focus on the active carousel item.
We need to surround the <div class=”item active”> with its own WP_Query loop. So just above it, we ask for the latest post from the category Home Slider. Then we end that loop after the active item div with endwhile and the very important wp_reset_postdata fucntion.

<div id="myCarousel" class="carousel slide">
 <div class="carousel-inner">
  <?php 
   $the_query = new WP_Query(array(
    'category_name' => 'Home Slider', 
    'posts_per_page' => 1 
    )); 
   while ( $the_query->have_posts() ) : 
   $the_query->the_post();
  ?>
   <div class="item active">
    <?php the_post_thumbnail('large');?>
    <div class="carousel-caption">
     <h4><?php the_title();?></h4>
     <p><?php the_excerpt();?></p>
    </div>
   </div><!-- item active -->
  <?php 
   endwhile; 
   wp_reset_postdata();
  ?>

7) Add the 2nd WP_Query Loop

Now we surround the 2nd carousel item with a slightly different loop. We want to include, say, 5 more posts from the same category, but we don’t want to repeat the post we just called in the active item above, so we offset this loop by 1 post. Which translates to…

<?php 
 $the_query = new WP_Query(array(
  'category_name' => 'Home Slider', 
  'posts_per_page' => 5, 
  'offset' => 1 
  )); 
 while ( $the_query->have_posts() ) : 
 $the_query->the_post();
?>
<div class="item">
 <?php the_post_thumbnail('large');?>
 <div class="carousel-caption">
  <h4><?php the_title();?></h4>
  <p><?php the_excerpt();?></p>
 </div>
</div><!-- item -->
<?php 
 endwhile; 
 wp_reset_postdata();
?>

The entire code should look something like this…

<div id="myCarousel" class="carousel slide">
 <div class="carousel-inner">
  <?php 
   $the_query = new WP_Query(array(
    'category_name' => 'Home Slider', 
    'posts_per_page' => 1 
    )); 
   while ( $the_query->have_posts() ) : 
   $the_query->the_post();
  ?>
   <div class="item active">
    <?php the_post_thumbnail('large');?>
    <div class="carousel-caption">
     <h4><?php the_title();?></h4>
     <p><?php the_excerpt();?></p>
    </div>
   </div><!-- item active -->
  <?php 
   endwhile; 
   wp_reset_postdata();
  ?>
  <?php 
   $the_query = new WP_Query(array(
    'category_name' => 'Home Slider', 
    'posts_per_page' => 5, 
    'offset' => 1 
    )); 
   while ( $the_query->have_posts() ) : 
   $the_query->the_post();
  ?>
   <div class="item">
    <?php the_post_thumbnail('large');?>
    <div class="carousel-caption">
     <h4><?php the_title();?></h4>
     <p><?php the_excerpt();?></p>
    </div>
   </div><!-- item -->
  <?php 
   endwhile; 
   wp_reset_postdata();
  ?>
 </div><!-- carousel-inner -->
 <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- #myCarousel -->

Add your own CSS on top of Twitter’s and dig deeper into the WP_Query parameters to fully customize your own powerful, yet light-weight, Bootstrap Carousel!

Update: September 19, 2012

People have had trouble implementing autostart/autoplay (including me). You need to call this bit of js after the Bootstrap js (which should be called after your jQuery version):

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.carousel').carousel({
  		interval: 1000	
  	})
});
</script>

I added the interval option so you will see if it works right away.
All my scripts are in my footer, so I appended this to the very end and it works great now.
Cheers!

 

70 Responses to “How to make Bootstrap Carousel display WordPress Dynamic Content”

  • Amin Ferasat says: Feb 5, 2016 at 9:41 pm

    hi Tnx سلام عالی بود و ممنون مشکل من را حل کردید .

  • Un carousel Bootstrap dans Wordpress - TechNTIC says: Mar 16, 2016 at 2:50 am

    […] http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/   […]

  • Prabin Parajuli says: Nov 25, 2016 at 1:48 am

    Hi, Instead of Category, I used Custom Post Type to display Bootstrap Carousel in WordPress dynamically</strong. Here's the link . :) This is just an alternative. http://prabinparajuli.com.np/add-bootstrap-carousel-in-wordpress/

  • Prabin Parajuli says: Nov 25, 2016 at 1:50 am

    Hi, Instead of Category, I used Custom Post Type to display Bootstrap Carousel in WordPress dynamically. Here's the link . :) This is just an alternative. http://prabinparajuli.com.np/add-bootstrap-carousel-in-wordpress

 
Leave a Comment
User

Mail

Globe

Comment