Use Slick Slider in WordPress (No Plugin Required)

Here in this tutorial, we'll share with you how you can use slick slider in WordPress without a plugin.

This will be the output of this tutorial.

Slick slider example #1: Display images with texts in a simple slider.

Here we'll create a shortcode with static HTML to display your images with texts in a simple slider using slick.

Slick slider example #2: Display posts/custom posts in a carousel slider.

Here we'll also create a shortcode that will display WordPress posts/custom posts in a carousel slider using slick.

Notes:

• We're using Twenty Twenty One theme in this tutorial.
• We're using a child theme (we recommend you use a child theme so the changes in your files such's "functions.php" won't be overwritten once you updated your theme).

Step 1: Add/Import Slick Slider in WordPress

1. First, download slick slider zip from slick official website here (click the "Download Now" button).

Extract the zip file (you should see these files below).

2. Next, copy the following files to your /wp-content/themes/<your-theme>/css/ folder.

• "fonts" folder
• ajax-loader.gif
• slick.css
• slick-theme.css

Also copy "slick.min.js" to your /wp-content/themes/<your-theme>/js/ folder.

3. Note that slick requires jQuery. Get jquery-1.11.0.min.js here and place inside your /wp-content/themes/<your-theme>/js/ folder.

4. Create a "custom-js.js" file inside your /wp-content/themes/<your-theme>/js/ folder (we'll initialize slick here later).

Check if slick slider all required files are placed correctly in your WordPress directory.

5. Now load all required CSS and JS files within your WordPress site using wp_enqueue_script (a WordPress function to use to enqueue your styles and scripts).

Open your /wp-content/themes/<your-child-theme>/functions.php and paste the following code:

<?php

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
	// Slick CSS & JS files
	wp_register_style('slick-css', get_template_directory_uri() .'/css/slick.css');
	wp_register_style('slick-theme-css', get_template_directory_uri() .'/css/slick-theme.css');
	wp_enqueue_script('jquery-min-js', get_template_directory_uri().'/js/jquery-1.11.0.min.js', array(), '1.11.0');		
	wp_enqueue_script('slick-min-js', get_template_directory_uri().'/js/slick.min.js');		

	// Our Custom JS (we'll initialize slick here)
	wp_enqueue_script('custom-js', get_template_directory_uri().'/js/custom-js.js', array(), '1.0.0');

	// Enqueue all CSS & JS files
	wp_enqueue_style('slick-css');
	wp_enqueue_style('slick-theme-css');
	wp_enqueue_script('jquery-min-js');
	wp_enqueue_script('slick-min-js');
	wp_enqueue_script('custom-js');
}

Source code explanation

Line 6 - 9: Slick all required CSS and JS files.

Line 12: Our custom JS file - we'll initialize slick here later.

Line 15 - 19: Enqueue all required CSS and JS files.

6. Make sure that all resources are loaded within your WordPress site.

These CSS and JS files should be present within the head tag of your website's HTML.

Step 2: Use Slick in WordPress - Create a Shortcode to Display your Slider

1. Open your /wp-content/themes/<your-child-theme>/functions.php and paste the following code after the "my_theme_enqueue_styles" function.

/**
 * Register all shortcodes here
 */
add_action( 'init', 'register_shortcodes' );
function register_shortcodes() {
	add_shortcode( 'simple_slick_slider', 'sc_simple_slick_slider' );
	add_shortcode( 'post_slick_carousel_slider', 'sc_post_slick_carousel_slider' );
}

/**
 * "simple_slick_slider" shortcode callback function - responsible for outputting the HTML markup of your images w/ text in a simple slider.
 */
function sc_simple_slick_slider ( $atts ) {

	$output = '<div class="simple-slick-slider">';
	$output .= 		'<div>';
	$output .= 			'<div>';
	$output .= 				'<img src="http://localhost/tutorial/wordpress/slick-slider/wp-content/uploads/2021/08/Paseo-Outlets-Nike-Factory_.jpg">';
	$output .= 				'<h2>Lorem ipsum dolor sit amet</h2>';
	$output .= 				'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat ante at ex feugiat tincidunt. Cras sed blandit eros. Aliquam hendrerit cursus odio et lacinia.</p>';
	$output .= 			'</div>';
	$output .= 		'</div>';
	$output .= 		'<div>';
	$output .= 			'<div>';
	$output .= 				'<img src="http://localhost/tutorial/wordpress/slick-slider/wp-content/uploads/2021/08/Paseo-Outlets-Adidas_.jpg">';
	$output .= 				'<h2>Consectetur adipiscing elit</h2>';
	$output .= 				'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat ante at ex feugiat tincidunt. Cras sed blandit eros. Aliquam hendrerit cursus odio et lacinia.</p>';
	$output .= 			'</div>';
	$output .= 		'</div>';
	$output .= 		'<div>';
	$output .= 			'<div>';
	$output .= 				'<img src="http://localhost/tutorial/wordpress/slick-slider/wp-content/uploads/2021/08/Paseo-Outlets-Pottery-Barn-2_.jpg">';
	$output .= 				'<h2>Etiam volutpat ante at ex</h2>';
	$output .= 				'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat ante at ex feugiat tincidunt. Cras sed blandit eros. Aliquam hendrerit cursus odio et lacinia.</p>';
	$output .= 			'</div>';
	$output .= 		'</div>';	
	$output .= '</div>';

	return $output;
}

/**
 * "post_slick_carousel_slider" shortcode callback function - responsible for outputting the HTML markup of your posts/custom posts in a carousel slider.
 */
function sc_post_slick_carousel_slider ( $atts ) {

  global $wp_query, $post;

  $posts = new WP_Query( array(
    'post_type' => 'post', 
    'post_status' => 'publish',  
    'orderby' => 'date', 
    'order' => 'ASC'
	) );

  if( ! $posts->have_posts() ) {
		return false;
  }

  $output = '<div class="post-slick-carousel-slider">';

  while( $posts->have_posts() ) {
		$posts->the_post();
		$post_ID = get_the_ID();
		$post_title = get_the_title();
		$post_exerpt = get_the_excerpt();
		$post_featured_image = wp_get_attachment_image( get_post_thumbnail_id( $post_ID ), 'single-post-thumbnail', $icon, $attr );
		$post_link = get_post_permalink();

		$output .= '<div>';
		$output .= 		'<div>';
		$output .= 			$post_featured_image;
		$output .= 			'<div>';
		$output .= 				'<h3>'.$post_title.'</h3>';
		$output .= 				'<p>'.$post_exerpt.'</p>';
		$output .= 				'<a href="'.$post_link.'">Read More</a>';
		$output .= 			'</div>';
		$output .= 		'</div>';
		$output .= '</div>';		
	}

	$output .= '</div>';

  return $output;
}

Source code explanation

Line 4 to 8 - This's how we declare shortcodes in WordPress. In this example, when the shortcode [simple_slick_slider] is found in your post/page, the "sc_simple_slick_slider" function will be called automatically. This also applies to [post_slick_carousel_slider] shortcode.

Line 13 to 40 - "sc_simple_slick_slider" is a shortcode callback function that is responsible for outputting the HTML markup of your images with text in a simple slider.

Line 66 to 106 - "sc_post_slick_carousel_slider" is also a shortcode callback function that is responsible for outputting the HTML markup of your posts/custom posts in a carousel slider. To display your custom posts (instead of WordPress default posts) in a carousel slider, change the value of the "post_type" parameter in line 71 with your custom post type slug.

Now that we have the HTML markup for our slick slider examples #1 and #2, we can now initialize them using slick.

2. Open your /wp-content/themes/<your-theme>/js/custom-js.js and paste the following code.

jQuery(document).ready(function($) {
	console.log('Document Ready');

	// Initialize simple slick slider
  $('.simple-slick-slider').slick();	

  // Initialize post slick carousel slider
  $('.post-slick-carousel-slider').slick({
  	slidesToShow: 3,
		responsive: [
		  {
		    breakpoint: 768,
		    settings: {
		      slidesToShow: 1
		    }
		  }
		]  	
  });	
});

Source code explanation

Line 1 - We use jQuery(document).ready function to check if the page Document Object Model (DOM) is ready before we execute any JavaScript code.

Line 5 - Initialize your simple image slider using slick.

Line 8 - Initialize your post/custom post carousel slider using slick.

Line 9 - (Optional) add "slidesToShow" parameter to display multiple items in your slider.

Line 10 to 17 - (Optional) add "responsive" parameter to add settings for specific breakpoint (screen size).

For more information about slick settings and options (such's autoplay, lazy loading, etc.), go to slick official website here.

Step 3: Use Slick in WordPress - Add/Insert the Shortcode to your Page/Post.

Note: Steps on adding the shortcode to your page/post may vary depending on the WordPress theme that you're using.

1. Edit one of your pages/posts.

2. Add a shortcode element to your page/post.

3. Paste the [simple_slick_slider] shortcode to display the simple image slider on your page/post.

4. Click the "Update" button to save your changes.

5. Now view your page/post to see the changes.

To display your post/custom post carousel slider on your post/page, just add the [post_slick_carousel_slider] shortcode. 😎

That's all! At the end of this tutorial, you should have your slick slider working on your WordPress site. 🤘

Related: Custom Sliders with Advanced Custom Fields & ACF Photo Gallery