Skip to content

How to add Slick Slider to b4st

Jump to bottom Edit New page
Simon Padbury edited this page Dec 27, 2017 · 1 revision

Sometimes the Bootstrap Carousel is not enough.

If you wish to incorporate Kevin Wheeler's Slick Slider into your WordPress website, you can do is via a plugin such as Phillip Bamme's Slick Slider WordPress Plugin.

But if you want to "get your hands dirty" in the code and add Slick Slider to b4st, this is the minimum that you need to do:

1. Get Slick

Go to Slick Slider, download the latest version, and unzip it.

Inside the extracted folder you will find (beside the other stuff) the slick/ folder. Copy this folder, in its entirety, into the b4st/ root folder.

2. Enqueue Slick

In the b4st enqueue's file functions/enqueues.php you will need to register and enqueue Slick CSS and JS:

  1. slick.css – If you enqueue the Slick CSS before b4st.css, then you can put further (override) styling for Slick in b4st.css (see tutorial point 4, below).

  2. slick-theme.css – optional – but do begin with it until you have developed your own styles.

    wp_register_style('slick-css', get_template_directory_uri() . '/slick/slick.css', false, null);
wp_enqueue_style('slick-css');
	
wp_register_style('slick-theme-css', get_template_directory_uri() . '/slick/slick-theme.css', false, null);
wp_enqueue_style('slick-theme-css');

  3. slick.js – b4st already has jQuery, so you don't need to get it again for Slick. Slick JS must be enqueued after the jQuery enqueue.

    wp_register_script('slick-js', get_template_directory_uri() . '/slick/slick.js', false, null, true);
wp_enqueue_script('slick-js');

4. Further (override) styling for Slick

There is another small CSS that you will find in the <head> of the Slick demo, index.html (titled "Slick Playground"). This styling is only used for the demo. However, to get yourself started, you can simply copy this into your b4st theme CSS, theme/css/b4st.css.

You will want to edit this CSS later, to suit your design.

5. Initialize and configure Slick

There is another small JS that you will find just above the closing </body> tag of Slick demo index.html. This Slick initialization/configuration script is only used for the Slick demo. However, to get yourself started, you can simply copy this into your b4st theme JS, theme/css/b4st.js.

You will want to edit this JS later, to suit your design.

6. Use Slick

Set up your Slick slider HTML. Copy the Slick demo of your choice from the demos in Slick index.html into wherever you want to display it in b4st. For example:

  1. You can paste it into header.php or near the top of index.php (before the loop).
  2. You can start a new blog post and paste it in (using the editor in 'Text' mode, not 'Visual').

Note: The slick demo HTML contains links to placehold.it placeholder images. Currently (Dec 2017) these are old – but still working – links to the placeholder service placeholder.com. You can continue to use this service during your project development.

You will want to edit the width and height of the placeholder images to suit your design.

It should all be working now! In your web browser, navigate to (or refresh) the page into which you added Slick. Test the slider (click the prev and next indicator chevrons) to prove that the JS is working.

7. And away you go

I have already given you a few "you will want to edit..." pointers for what to do next.

There are lots of configuration settings for slick that you will want to play with.

Add a custom footer
Add a custom sidebar
Clone this wiki locally