If you’re a beginner how to create a slider in WordPress tutorial absolutely is for you. You’ll learn to create a slider in simple steps.

In this tutorial I’ll show you how to create a slider using OWL Carousel. This is a free and useful slider to you can use in many occasions. Also it consists of much more features to use. Along with those it has details documentation to refer.

Let’s see how we can digging into this:

1. Download the owl carousel.
2. Place owl.carousel.min.css and owl.theme.default.min.css in your CSS folder.
3. Place owl.carousel.min.js in you JS folder.
4. Enqueue files via functions.php file.
5. Prepare HTML for the slider
6. Initialize Owl Carousel
7. You’re done.

Enqueue required files via functions.php

First you need to enqueue required stylesheets and JS files via functions file. Some are not enqueuing via functions.php, website works but that is not a good practice to do. Best method is enqueue files.

If you’re not familiar with enqueuing CSS/JS files via function file please follow our tutorial on enqueue stylesheets and JavaScript files via functions.php file.

Your enqueuing codes should like this.

// CSS Enqueue
wp_enqueue_style( 'owl', get_template_directory_uri() . '/path/to/css/owl.carousel.min.css' );
wp_enqueue_style( 'owl-theme', get_template_directory_uri() . '/path/to/css/owl.theme.default.min.css' );

// JS Enqueue
wp_enqueue_script( 'owl', get_template_directory_uri() . '/path/to/js/owl.carousel.min.js' );

HTML Preparation for Owl Carousel

Your HTML block should like this. owl-carousel class should be must. You can’t remove that one. But you can add new classes and a ID. And also you can add any number of slides as well. For this example I have used three ite

<div class="owl-carousel owl-theme">
    <div class="item">
    	<img src="/path/to/slide_01.jpg" alt="" />
    </div>
    <div class="item">
    	<img src="/path/to/slide_02.jpg" alt="" />
    </div>
    <div class="item">
    	<img src="/path/to/slide_03.jpg" alt="" />
    </div>
</div>

Initialize Owl Carousel

jQuery is essential to use Owl Carousel. Before adding the code you must have enqueued jQuery as well. I hope that you’ve already enqueued jQuery. To initialize the Owl Carousel you need to use below script. To add such kind of a script better to have separate JS file to add custom JavaScript/jQuery codes. If you don’t have a separate file yet, please create and enqueue first. Like below. Will name the file as main.js. You can use any name for this. But this file should enqueue in the bottom of the scripts.

wp_enqueue_script( 'main', get_template_directory_uri() . '/path/to/js/main.js' );

Now open up the file and add the initialized code to it. See below:

$(document).ready(function(){
	$('.owl-carousel').owlCarousel({
	    loop: true,
	    items:1,
	    margin:0,
	    autoplay:true,
	    autoplayTimeout:2500,
	    autoplayHoverPause:true,
	    smartSpeed:450,
	    dots: false,
	    nav:true
	});
});

Hope you’ll enjoyed this tutorial regarding create a simple slider in WordPress using Owl Carousel. Happy learning ahead. Thanks for reading.

Recommended: Please follow our step by step guide how to create a WordPress Theme from scratch. You’ll be able to create your own theme at the end of these lessons.