How to add Bootstrap Carousel in WordPress without Plugin
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. ;).
Love it or Hate it, Bootstrap is Winning the Web.... Click To TweetWhy 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.
- Responsive
- Reliable
- Supports heavy websites too.
- Customizable
- No conflicts
- Wide Support
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.cs file inside the CSS Directory and bootstrap.min.js inside the JS Folder.
After download, upload the CSS and JS file in your current theme’s directory. Then place the following code in your theme’s functions.php.
function pp_scripts() {
// Registering Bootstrap style
wp_enqueue_style( 'bootstrap_min', get_stylesheet_directory_uri().'/css/bootstrap.min.css' );
wp_enqueue_script('jquery');
//Registering Bootstrap Script
wp_enqueue_script( 'bootstrap_min', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '', true );
}
add_action( 'wp_enqueue_scripts', 'pp_scripts' );
Note: you need to maintain a dependency for bootstrap javascript. Otherwise, the slider doesn’t work because of conflict.
Step 2: Register Custom Post type for Slider
After finally registering Bootstrap scripts, w are going to register our very own Custom Post Type. We’ll name it as Bootstrap Slider. Insert the below code in functions.php file.
add_action( 'init', 'custom_bootstrap_slider' );
/**
* Register a Custom post type for.
*/
function custom_bootstrap_slider() {
$labels = array(
'name' => _x( 'Slider', 'post type general name'),
'singular_name' => _x( 'Slide', 'post type singular name'),
'menu_name' => _x( 'Bootstrap Slider', 'admin menu'),
'name_admin_bar' => _x( 'Slide', 'add new on admin bar'),
'add_new' => _x( 'Add New', 'Slide'),
'add_new_item' => __( 'Name'),
'new_item' => __( 'New Slide'),
'edit_item' => __( 'Edit Slide'),
'view_item' => __( 'View Slide'),
'all_items' => __( 'All Slide'),
'featured_image' => __( 'Featured Image', 'text_domain' ),
'search_items' => __( 'Search Slide'),
'parent_item_colon' => __( 'Parent Slide:'),
'not_found' => __( 'No Slide found.'),
'not_found_in_trash' => __( 'No Slide found in Trash.'),
);
$args = array(
'labels' => $labels,
'menu_icon' => 'dashicons-star-half',
'description' => __( 'Description.'),
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => true,
'menu_position' => null,
'supports' => array('title','editor','thumbnail')
);
register_post_type( 'slider', $args );
}
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.
The Display Code
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php $slider = get_posts(array('post_type' => 'slider', 'posts_per_page' => 5)); ?>
<?php $count = 0; ?>
<?php foreach($slider as $slide): ?>
<div class="item <?php echo ($count == 0) ? 'active' : ''; ?>">
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" class="img-responsive"/>
</div>
<?php $count++; ?>
<?php endforeach; ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
In the above code,
<?php $slider = get_posts(array('post_type' => 'slider', 'posts_per_page' => 5)); ?>
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.
If you have any feedback or comments, feel free to leave a message in a comment below.
