Coding a Slider with Slick and ACF Pro in WordPress

Slick is a nifty jquery plugin that makes spiffy (yes I said spiffy) sliders, combined with Advanced Custom Fields Pro gallery field you can make an easy to use client interface to allow them to add images to a slider on a post/page or custom post type.

The example slider in this tutorial will use the Slider Syncing Layout. – I have another tutorial that covers the Multiple Layout.

slick-slider-layout

Getting Slick in order

Download the latest Slick version.

Move into your CSS directory – slick.css, slick-theme.css, fonts, ajax-loader.gif

Move into your JS directory – slick.min.js

Create a slick-init.js file and also file in JS directory and add in…

jQuery(document).ready(function($){
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true,
arrows: true,
autoplay: false
});
});
view raw slick-init.js hosted with ❤ by GitHub

Enqueue the Styles and Scripts in WordPress

In your functions.php file add in…

<?php //<~ don't add me in
add_action( 'wp_enqueue_scripts', 'themeprefix_slick_enqueue_scripts_styles' );
// Enqueue Slick scripts and styles
function themeprefix_slick_enqueue_scripts_styles() {
wp_enqueue_script( 'slickjs', get_stylesheet_directory_uri() . '/js/slick.min.js', array( 'jquery' ), '1.6.0' true );
wp_enqueue_script( 'slickjs-init', get_stylesheet_directory_uri(). '/js/slick-init.js', array( 'slickjs' ), '1.6.0', true );
wp_enqueue_style( 'slickcss', get_stylesheet_directory_uri() . '/css/slick.css', '1.6.0', 'all');
wp_enqueue_style( 'slickcsstheme', get_stylesheet_directory_uri(). '/css/slick-theme.css', '1.6.0', 'all');
}
view raw slick.php hosted with ❤ by GitHub

Creating the Gallery Field in ACF

gallery-acf-field

In ACF Pro’s custom fields, create a field label and name and set the type to Gallery as a minimum, there are some other fields you can set.

gallery-acf-field-location

Then set the location where the fields should show up, above I am setting it to a custom post type.

Adding the Images

acf-add-images

Now in your custom post type, post or page add in your images.

Output the Slider Code

ACF has the code on the website to output the gallery images in a couple of formats and Slick has the HTML mark up and jquery code you need to output, you just need to merge them together.

So for any WordPress theme add to your template…

<?php //add me in
//Fields
//slider_portfolio = Gallery Field
$images = get_field('slider_portfolio');
if( $images ): ?>
<div class="slider-for">
<?php foreach( $images as $image ): ?>
<div class="slick-container">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php endforeach; ?>
</div>
<div class="slider-nav">
<?php foreach( $images as $image ): ?>
<div>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php endforeach; ?>
</div>
<?php endif;

or to hook into a Genesis theme by adding in functions.php

<?php //<~ don't add me in
//Fields
//slider_portfolio = Gallery Field
function themeprefix_portfolio_slider() {
$images = get_field('slider_portfolio');
if( $images ): ?>
<div class="slider-for">
<?php foreach( $images as $image ): ?>
<div class="slick-container">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php endforeach; ?>
</div>
<div class="slider-nav">
<?php foreach( $images as $image ): ?>
<div>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php endforeach; ?>
</div>
<?php endif;
}
add_action('genesis_entry_content','themeprefix_portfolio_slider' );

Doing it with a Repeater Field (just for kicks)

You could also do the same thing using the ACF repeater field, set up a field make it a repeater and set the sub-field to an image and you the code to below to output it.

<?php
//Image Slider
//slider_image = field
//portfolio_slider = subfield
function agero_slider() {
if( have_rows('slider_image') ):
echo '<div class="slider-for">';
// loop through the rows of data
while ( have_rows('slider_image') ) : the_row();
// display a sub field value
//vars
$image = get_sub_field('portfolio_slider');
?>
<div><img src="<?php echo $image['url']; ?>"/></div>
<?php
endwhile;
echo '</div>
<div class="slider-nav">';
// loop through the rows of data
while ( have_rows('slider_image') ) : the_row();
// display a sub field value
//vars
$image = get_sub_field('portfolio_slider');
?>
<div><img src="<?php echo $image['url']; ?>"/></div>
<?php
endwhile;
echo '</div>';
else :
// no rows found
endif;
}
view raw slick-repeater.php hosted with ❤ by GitHub

That’s it – to change the slider behaviour there are many layout and setting options that you can alter in the slick-init.js file – documentation on the Slick site.

Example below.

4 Comments

  1. yvonne on April 1, 2016 at 2:40 pm

    I’m hoping you can help troubleshoot an issue I’m having after following this tutorial. I am using the Genesis Child theme on a local install.

    I created a CPT named “quotes” as I am trying to create a text-only slider, no images. I also created custom fields using ACF and populated them in the “quotes” CPT. So now I have a bunch of CPTs populated with text-only custom fields.

    After following the rest of the tutorial, when I search for those CPTs, the posts and custom fields all show up no problem using the native search. However, I do get an error printed to the page: “:Inavlid argument supplied foreach() in on line “. That’s it, no line # given. Also, the source code shows the slider is being created but instead of my custom fields showing, it’s displaying the error in their place, specifically within the “slick-list” div but outside of the div containing the slides.

    But, even though the CPTs are displaying when searched, the slider does not display on my home page, where I am trying to have it show up. Instead it’s being generated in the CPTs. I have put the “foreach()” function into the functions.php file and hooked it into “genesis_entry_content”. I have also tried hooking it in several other places on the page with no luck. The home page source code shows no sign of the slider and I don’t get any errors printed to the page nor in the console.

    Can anyone help troubleshoot this issue? I’ve obviously missed some step but I just can’t see it.

    This is the code in my functions.php: (it’s currently set to show on all pages, not just home page)


    // Set up function for quotes slider on home page
    function lol_quotes_slider() {

    //this tests for static text and displays fine where the slider is supposed to show
    echo 'this isnt working at all';

    // this is testing the fields to see if they print out properly
    if (get_field('quote')) {
    echo '' . get_field('quote') . '';
    echo '' . get_field('attribution') . '';
    }

    $quotes = get_field('quote');

    if( $quotes ): ?>

    <?php endif;

    }
    // Display the quotes slider on home page
    add_action('genesis_entry_content', 'lol_quotes_slider' );

  2. nturner on March 4, 2016 at 9:47 pm

    I am trying to set up an image slider on a custom post type template that would scroll through custom fields “single-page-project-images”.

  3. asim khan on February 27, 2016 at 5:54 pm

    nice

  4. John on November 6, 2015 at 8:20 am

    Hi there can anyone help…

    Hope you don’t mind this comment, spotted your tut when I was looking for a solution to the way my developer implemented acf and slick and why it was not working so well.

    Have taken out the background images and implemented them in the content and still get the same slow load result. Lazy load has no effect.

    basically the slides all load one on top of the other at first before the slick.js kicks in an all falls into place. I think this must be some sort of conflict as even if I remove the call to the images the blank slides still load one on top of the other.

    I’ve also gone through the plugins and turned them off with no change.

    The images are loaded as inline background image and then CSS and media queries control the style.

    This is a dev site:

    If you or any of your readers have any ideas why it’s happening it would be much appreciated

    Thanks
    John

Leave a Comment





%d bloggers like this: