How to use Slick + Advanced Custom Fields in WordPress

Please be aware that this article was originally written in 2016 and may be out-of-date

Our clients often ask us to include sliders on their site home page for marketing, but it can be hard to find the right one. With WordPress, you’re given multiple options for plugins and pre-built themes that already use a slider. However, a lot of the time the sliders are bloated with unnecessary features, or are built with older technology. So your best bet is to write something custom for your clients – build something customized to their needs.

Issues can arise though with doing something totally custom. Does your client have the budget for this? If your deadline isn’t too far out, then do you even have the time to build something totally custom? As developers, we often need to find the right mixture of cost-effectiveness and efficiency while still meeting the client’s needs.

By standing on the shoulders of giants we can more easily walk that line. Instead of depending on a slider plugin to do our heavy lifting, we can depend on two plugins that allow us to build something dynamic. In this article you’ll learn about two tools we use — Advanced Custom Fields and Slick — and how to implement them into your project to build a custom slider.

What is Slick?

Slick (website/github)  is a fully responsive, flexible, and mobile optimized carousel. It has excellent documentation, and is agreeably “the last carousel you’ll ever need.” You can download it , or pull it down using a CDN. We’ll use the CDN in this project for simplicity’s sake – for production sites, you may choose to download it and include it in your build somewhere instead so you have one less HTTP request to worry about.

The focus of Slick is to create the housing for the slider, but we need to fill up its part with content of some sort. Slick takes images, text, whatever we feed it. We would lean on WordPress to allow us to dynamically add, delete or update the content of the slides. We could create some custom fields manually if we wanted to, but it would be nice to have something get us there quicker. This is where Advanced Custom Fields comes in.

What is ACF?

Advanced Custom Fields (ACF) is a GUI (graphical user interface) for making your WordPress content more flexible. ACF offers dozens of features. In this article, I’ll cover the Repeater Field feature found in the Pro version, which at the time of this writing is $25 for one site license If you’re not familiar with ACF, I would highly recommend downloading the free version and playing with it. You could re-create this project with the free version, but would be a more manual process.

We’ll end up using ACF to build the slides dynamically. We can use those fields to give us a sort of workflow and have a nice GUI that we piece together instead of updating the code each time we want to add something.

Let’s get started

1. Set up

Download and install ACF Pro to your WordPress site if you don’t already have it installed. Open functions.php file location in the theme directory and add the following code:

//* Enqueue Slick's CSS and Javascript
add_action( 'wp_enqueue_scripts', 'sbslick_enqueue_slick' );

function sbslick_enqueue_slick() {
     wp_enqueue_script( 'slick-js', '//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js', 'jquery', '1.4.1' );
     wp_enqueue_script( 'slick-init-js', get_stylesheet_directory() . 'js/slick-init.js', 'jquery', 1.0 );
     wp_enqueue_style( 'slick-css', '//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css', '', '1.4.1' );
}

Add a file named slick-init.js inside a folder named js, or add the file to your javascript folder and make sure to reference the correct folder when enqueueing the script above. For example the file path might look something like /wp-content/themes/YOUR_THEME_NAME/js/slick-init.js.

2. Configuring ACF for Slick

• Create a new Field Group. Name it whatever you’d like!
• Navigate to “Custom Field” > “Add New”
• Enter an appropriate title for Field Label
• Allow ACF to auto-generate your Field Name, or create a custom one
• Under “Field Type” select “Repeater”
• Fill out some instructions
• Create a sub-field for images – you can name it simply “images”

Once you have the repeater field in place, add an image field within it by clicking “+ Add Field”; you’ll need to select “Image” from “Field Type”. Also make sure to select “Image Array” from ”Return Value”. Image Array is the best selection because you’ll be able to grab the title and alt tags dynamically for each image.

The “Location” meta box options will allow you to pick where you want slider options we created in steps 2 & 2.1 to show up. For example if you wanted to display the slider option on the homepage template you would select “Page Template”>”is equal to”>”Homepage”. Then, any page that uses the homepage template would have these custom fields brought in. Feel free to play with what page-template or specific page or post you’d to bring the custom fields into.

3. Hooking in Slick

We have already added Slick’s CSS and JavaScript files from the CDN that Slick is hosting. We are able to move right into the code. Open slick-init.js and add the following code:

jQuery(function($){
     $('.slick-slider').slick({
          autoplay: true,
          fade: true,
          speed: 2000,
          autoplaySpeed: 6000,
      });
});

This section of code initializes Slick when it finds the class slick-slider, and then runs through some settings that we’ve defined (feel free to peruse through additional Slick settings you can control).

4. Slider Markup

Everything is in place for slick to be initialized, and we have our fields created in the admin area. This is where ACF and Slick start working together.

Open the associated PHP template file you chose (for us, it will be the file with the template name “Homepage”) and add the follow code:

if ( have_rows( 'gallery' ) ) {
     echo "<ul class='sb-slider'>";
     while ( have_rows( 'gallery' ) ) { 
           the_row();
           $image = get_sub_field( 'image' ); 
           echo '<li class="slide">' . 
                     '<img src="' . $image['url'] . '" width="' . $image['width'] . '" height="' . $image['height'] . '" alt="' . $image['alt'] . '" title="' . $image['title'] . '">' . 
                '</li>';
     }
     echo "</ul>";
}

Add the follow css to your style.css file located in your theme directory:

.sb-slider img {
     width: 100%;
}

5. Create the page

We now have everything in place to work with the ACF fields building the slide, but we haven’t built the page yet. Let’s do that now:

• In the WordPress admin, create a new page (call it whatever you like – if just testing this out, maybe call it something appropriate like Testing Out the Slick + ACF combo.
• Make sure to save the page with the “Homepage” template (or whatever template you chose).
• When the page refreshes, you should see the custom fields show up! You can now add slides and after saving, you should be able to visit the page and see the slider there.

I added additional styling – here is some of the Sass I wrote if you’re interested in seeing it (I named my page “.demo-slick-slider” and added it as a body class for this post):

.demo-slick-slider {
  .slick-slider {
    max-width: 40em;
    margin: 2.5rem auto 5rem;
    display: flex;
  }
  .slick-list {
    padding: 0 2rem;
  }
  @media screen and (max-width: 768px) {
    .slick-arrow {
      display: none !important;
    }
    .slick-slider img {
      width: 100%;
      max-width: 25em;
      margin: 0 auto;
          }
     }
}

Slick gives us a lot to work with in regards to how to display a slider, and ACF gives us potential in what those slides can be (images? text? video? SVGs?). Together we can use them both to provide a custom solution without rediscovering the wheel.