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…



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…