Making a Slideshow with Twitter Bootstrap and CMB2

Home / Tutorials / Plugins / Making a Slideshow with Twitter Bootstrap and CMB2

Making a Slideshow with Twitter Bootstrap and CMB2

In this tutorial, we are going to create a slideshow using Twitter Bootstrap and CMB2. Within this tutorial, I will demonstrate how to create a post type for managing slideshow slides, a metabox option for selecting the page for displaying the slideshow and much more.

Setting up Twitter Bootstrap and CMB2

For this tutorial, you will need a starter theme (preferably a bootstrap ready theme) to work with. Once you have a theme installed and activated, it is time to setup include CMB2. If you are new to CMB2, you can read our post Getting Started with CMB2

Integrating CMB2

Follow the following steps to integrate CMB2 into your theme

Step 1. Download CMB2 from WordPress.org

Step 2. Create a folder called includes and copy the CMB2 contents the folder

Step 3. Require the CMB2 files by writing the following to the functions.php

Integrating Twitter Bootstrap into a theme

Twitter Bootstrap is a popular front-end framework that is  used for developing mobile frameworks. For the purpose of this this tutorial, we are going to include the twitter bootstrap javascript files and utilize the carousel plugin. Inside of your functions.php file add the code below to it

In the snippet above we are including the Javascript files bootstrap.min.js and custom-script.js. Next create a file in the folder called custom-script.js, within that file, add the following

 

Creating the Custom Post Type

MPL Slideshow Type

In this section, we are going to create the post type that will manage the slides for the slideshow. Add the following snippet to your functions.php file

The above snippet creates a new post type called Slider, the post type only contains a title. In the next section, we will create metaboxes for the post type.

Add metaboxes with CMB2

Slideshow metabox using CMB2

Slideshow metabox using CMB2

In this section, we will add CMB2 metabox form fields to our mpl_slider post type. The following snippet added to your functions.php file will create a group of metabox fields including a title, image and description for each slide.

Adding slideshow selector for each page.

Next, we will add another metabox that will be displayed on the page post type. The metabox will have a dropdown of all the current slideshows created. This will be very important if you would like several pages to have different slideshows. Let’s update the previous CMB2 Metabox script to the following

The updated script uses the select type and we use the function mpl_get_slider_options(), so let’s define that function by adding it to the functions.php file

The function will loop through the slideshows and return array of the slideshows.

Integrating the slideshow

Now that you have made it this far, it is time to add our slideshow to the page. Open up the header.php file of your theme and add the following

This big ole snippet does one thing; output the slideshow but let’s break this down. First, we check to see if the current screen is a page and if so we check to see if we have a slideshow assigned to this page. Once we have found a selected slideshow for the page, we make the html by Twister Bootstrap Carousel dynamic through creating loops of slides.

With our carousel, we are going to set each slide image as the background and position the title and description above it. Add the following style to your style sheet

Phew! There we have it our slideshow built using Twitter Bootstrap and CMB2. Please leave your comments below, happy coding.

Recommended Posts
Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search