Are you another frustrated Web Developer who is tired of using a plethora of Slider Plugins? Or are you in search of simple, easy, and reliable Slider Plugin? Well, don’t worry, in this tutorial, we are going to use our very own free, dynamic Bootstrap Carousel in WordPress step wise. And of course, we are NOT going to use plugins. Most of the plugins we find in WordPress repository are either broken or premium. Hence, they let you use the very limited feature and eventually, you got locked in and you have no option but purchase the plugin. Well, I don’t blame the Plugin Authors. They should be getting some credits for their zealous effort and hard work no ? After all, nobody’s here for social services, yo. 🙄
My point is, if you can develop by yourself, what’s the point of using others’. Before we begin, I expect you have a basic concept of Twitter Bootstrap. Don’t panic !! Just a basic abstract idea will work, no more than that. ;).
Why Bootstrap Slider and not other available jQuery sliders ?
Ok, you may be wondering there are other numberless jQuery Plugins available (which are free too), why not use them ? If you are comfortable using other slider plugins, you can implement them on your website. But I personally recommend Bootstrap because it has so countless features and obviously it is easy to use. Furthermore, it is way ahead amongst other frameworks when it comes to developing websites. There are few reasons why you should pick Bootstrap for slider instead of other available plugins.
Bootstrap is completely free and easy to use.
Ease of development.
Supports heavy websites too.
Dynamic Bootstrap Carousel in WordPress
Step 1: Download Bootstrap and register Styles and Scripts
The very first step is you need to Download Bootstrap Framework and enqueue its style and script inside theme folder’s functions.php file. For instance, place your bootstrap.min.csfile inside the CSS Directory and bootstrap.min.js inside the JS Folder.
After successfully registering the custom post type, you’ll see the Custom Post appearing in your Dashboard Menu as Bootstrap Slider. Insert your Slider images, desired title, and Content (which is not necessary unless you want to display text on slider ) as Screenshot below:
Publish 3-4 Slider Images to be displayed on the front end.
Step 3: Insert code in your template to display Slider images
Now, this is our final step. So far as we’ve successfully managed to register bootstrap scripts, registered the custom post type, and inserted the slider images in Bootstrap Slider Post. Now what left to do is Display the Slider Images in WordPress template. Open your template file for e.g. front-page.php and insert the following code where you wish to display.
we have post_type registered as slider and currently, we have posts_per_page defined to 5. You can assign how many sliders you want to display.
Screenshot of dynamic bootstrap slider (TESTED)
If you have followed all the steps thoroughly, you’ll see the slider similar to the screenshot above. The plugin can be comprehended individually using carousel.js. And the bootstrap carousel supports almost all the browsers and it’s responsive too. That means you will have no any issue showing on smaller devices like mobile, tablets, iPads, etc.
If you have any feedback or comments, feel free to leave a message in a comment below.