Steps to add Slick Carousel | Slick Slider to your Custom Post Type?

Step 1:

Register your Custom post type from your back-end. The best way to do it would be to register it in your includes file. You can also add it to your functions. php file. But i would recommend to create another file. It’s the easiest and the best way. It makes life simpler. So incase if you have to Debug or make any changes in future you wont have to go through all 1000s of codes.

In you assets file you need to create a file named includes and register all you Custom post types.

The Custom post types registered are mentioned above. You can add features according to you requirement.

Step 5:

Make sure to include the Post type path in you functions.php file.

Because till now we have done it created the post type but we need to let the functions.php file know where exactly is the file and make sure you add thee correct path.

Step 3:

There are couple of ways you can add a slick carousel in WordPress:

  1. Download required slick files or
  2. Using slick-carousel npm package

we will be following the second way

The next thing we need to do is download the slick files from

Copy the below mentioned files

  • slick.min.js inside the js folder.
  • slick.css and slick-theme.css inside the css folder.
  • Create another directory called carousel and create a file called index.js inside of carousel directory.

Step 4:

Now enqueue the files in your functions.php file in your theme.

Make sure to check that all the files are included via page source. If any of the file is not included

function oleez_add_theme_scripts() {
	wp_enqueue_style( 'slick-css', untrailingslashit( get_template_directory_uri() ) . '/assets/library/slick/slick.css', [], false, 'all' );
	wp_enqueue_style( 'slick-theme-css', untrailingslashit( get_template_directory_uri() ) . '/assets/library/slick/slick-theme.css', ['slick-css'], false, 'all' );
	wp_enqueue_script( 'slick-js', untrailingslashit( get_template_directory_uri() ) . '/assets/library/slick/slick.min.js', ['jquery'], filemtime( untrailingslashit( get_template_directory() ) . '/assets/library/slick/slick.min.js' ), true );

Step 5:

Add HTML markup in you template file.

It can be you index.php file or any other template file. We are going to loop a default custom post type file.

Step 6:

Initiate the Carousel.

Let’s initialise the carousel by calling the .slick() and passing the parent class name of our carousel container as a selector. Notice that the carousel container name is hero-section , hence the selector will be hero-carousel and the function will be called like so : $('.hero-section').slick()

We are also passing the settings for the carousel inside the slick() in your index.js file.

Now in the above mentioned image the autoplay is false. Thats because we can choose to play it or stop it according to our convenience. If u want the carousel to start all you have to do is change it to TRUE

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: