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

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

PHP

1

require_once(get_template_directory().'/includes/cmb2/CMB2.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

JavaScript

1

2

3

4

5

(function($){

$('.carousel').carousel({

interval:5000//changes the speed

})

})(jQuery);

Creating the Custom Post 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

PHP

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

add_action('init','mpl_register_slider');

functionmpl_register_slider(){

$labels=array(

'name'=>_x('Slider','theme-text-domain'),

'singular_name'=>_x('Slider','theme-text-domain'),

'menu_name'=>_x('Slider','theme-text-domain'),

'name_admin_bar'=>_x('Slider','theme-text-domain'),

'add_new'=>_x('Add New','theme-text-domain'),

'add_new_item'=>__('Add New Slider','theme-text-domain'),

'new_item'=>__('New Slider','theme-text-domain'),

'edit_item'=>__('Edit Slider','theme-text-domain'),

'view_item'=>__('View Slider','theme-text-domain'),

'all_items'=>__('All Sliders','theme-text-domain'),

'search_items'=>__('Search Sliders','theme-text-domain'),

'parent_item_colon'=>__('Parent Sliders:','theme-text-domain'),

'not_found'=>__('No slider found.','theme-text-domain'),

'not_found_in_trash'=>__('No sliders found in Trash.','theme-text-domain')

);

$args=array(

'labels'=>$labels,

'public'=>true,

'publicly_queryable'=>true,

'show_ui'=>true,

'show_in_menu'=>true,

'query_var'=>true,

'rewrite'=>array('slug'=>'slider'),

'capability_type'=>'post',

'has_archive'=>true,

'hierarchical'=>false,

'menu_position'=>null,

'supports'=>array('title')

);

register_post_type('mpl_slider',$args);

}

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

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.

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

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

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

header#main {

text-align:center;

color:#fff;

background-attachment:scroll;

background-position:centercenter;

background-repeat:none;

-webkit-background-size:cover;

-moz-background-size:cover;

background-size:cover;

-o-background-size:cover;

}

.fill {

width:100%;

height:100%;

background-position:center;

-webkit-background-size:cover;

-moz-background-size:cover;

background-size:cover;

-o-background-size:cover;

}

.hero {

position:absolute;

top:50%;

left:50%;

z-index:3;

color:#fff;

text-align:center;

text-transform:uppercase;

text-shadow:1px1px0rgba(0,0,0,.75);

-webkit-transform:translate3d(-50%,-50%,0);

-moz-transform:translate3d(-50%,-50%,0);

-ms-transform:translate3d(-50%,-50%,0);

-o-transform:translate3d(-50%,-50%,0);

transform:translate3d(-50%,-50%,0);

}

.hero h1 {

font-size:6em;

font-weight:bold;

margin:0;

padding:0;

}

.fade-carousel .carousel-inner .item .hero {

opacity:0;

-webkit-transition:2sallease-in-out.1s;

-moz-transition:2sallease-in-out.1s;

-ms-transition:2sallease-in-out.1s;

-o-transition:2sallease-in-out.1s;

transition:2sallease-in-out.1s;

}

.fade-carousel .carousel-inner .item.active .hero {

opacity:1;

-webkit-transition:2sallease-in-out.1s;

-moz-transition:2sallease-in-out.1s;

-ms-transition:2sallease-in-out.1s;

-o-transition:2sallease-in-out.1s;

transition:2sallease-in-out.1s;

}

/* Sliders */

.carousel,

.carousel .item,

.carousel .active {

}

.carousel-inner {

height:100%;

}

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