How to Integrate Liquid Slider with WordPress + Advanced Custom Fields

I’ve written a pretty well-received and highly visited post on incorporating Kevin Batdorf’s Liquid Slider, my go to when people want things sliding around.

That post, however, shows you how to make a custom post type and utilize the slider in that way.

Maybe you want to create a slideshow on a per-page basis though, so any given page can have it’s own slider.

Let’s do it!

You can read the original post (first link above) to get more familiar with how this all works, and this post will keep things much simpler as that one does a fine job at getting into the details. If you’re ready to dive in, keep reading.

Step 1: Download & Install Liquid Slider

  1. Download Liquid Slider here.
  2. Copy the jquery.liquid-slider.min.js file into your WordPress theme. For the rest of this tutorial we’ll assume you’ve got that JS file in a folder like /wp-content/themes/your-theme-name/assets/js/ but if you know what you’re doing, you can put it anywhere in your theme.
  3. Copy liquid-slider.css to your theme as well. Here we’ll assume you put it right in the root of your theme, at /wp-content/themes/your-theme-name/

Next up, we’ll need to enqueue those files using WP’s built in functions. Open up your theme’s functions.php file and paste the following code in there:

function cn_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script(
'jquery_easing',
'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js',
array('jquery'),
null,
true
);
wp_enqueue_script(
'jquery_touch_swipe',
'https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js',
array('jquery'),
null,
true
);
wp_enqueue_script(
'liquid_slider',
get_template_directory_uri() . '/js/jquery.liquid-slider.min.js',
array('jquery'),
null,
true
);
}
add_action('wp_enqueue_scripts', 'cn_scripts');
// register liquid slider style
add_action( 'wp_enqueue_scripts', 'cn_add_liquid_slider_styles' );
function cn_add_liquid_slider_styles() {
wp_register_style( 'liquid_slider_css', get_template_directory_uri() . '/liquid-slider.css');
wp_enqueue_style( 'liquid_slider_css' );
}

Now the JS and CSS files are being called properly.

Step 2: Install the Advanced Custom Fields Plugin

Skip this step if you’ve already got the plugin, otherwise:

  1. In WordPress, go to Plugins > Add New
  2. Using the search box near the top right, search for Advanced Custom Fields
  3. You should see it as the first result, looking something like this:
    panel showing the ACF result
    Click Install Now and finish the plugin installation as WordPress prompts you to do, making sure you also Activate it.

Step 3: Setup our Advanced Custom Fields

In WordPress, go to Custom Fields, which will now be its own menu item (like Posts, Media, Pages, etc.) near the bottom.

Ideally, you’ll want to purchase the Repeater Add on to make this really sparkle, but you can do it without that add on if you’d like.

Let’s setup some fields.

  1. Click Add New near the top of the page to create a new Field Group.
  2. In the Title field, type in something like “Slideshow”.
  3. Click the blue + Add Field button.

If you don’t have the Repeater Add on

Skip to the next section if you’ve got the add on.

  1. Choose Image from that dropdown.
  2. Under Field Label enter Slide Image 1.
  3. Field Name will then read slide_image_1.
  4. Required? should be checked.
  5. Return Value should be set to Image Object.
  6. Everything else can be left as is.
  7. Now click + Add Field again.
  8. In the new custom field entry, under Field Label enter Slide Link 1.
  9. Field Name will then read slide_link_1.
  10. Field Type should be left as Text.
  11. Formatting should be No formatting.
  12. Required? should be checked.

Since you don’t have the repeater, you’ll have to repeat this as many times as you’d like slides. So if you know that sometimes you’ll need 10 slides, you need to create a slide_image_2 field, slide_link_2 field, and then do it again for the 3rd, 4th, 5th, 6th, etc. slides.

You won’t need to use every one, every time, though.

If you DO have the Repeater Add on

  1. Choose Repeater from that dropdown.
  2. Under Field Label enter Slides.
  3. Field Name will then read slides.
  4. In the Repeater Fields section click the + Add Sub Field blue button.
  5. In the new sub field, under Field Label enter Slide Image.
  6. Field Name will then read slide_image.
  7. Required? should be checked.
  8. Return Value should be set to Image Object.
  9. Everything else can be left as is.
  10. Now click + Add Sub Field again.
  11. In the new custom field entry, under Field Label enter Slide Link.
  12. Field Name will then read slide_link.
  13. Field Type should be left as Text.
  14. Formatting should be No formatting.
  15. Required? should be checked.

Basically, it’s the exact same thing as setting up multiple image fields, but Advanced Custom Fields will just allow us to create as many slides as we want (called “Rows” in the plugin’s language), so you could have 1 or 5000 slides.

Once you’ve done all of this, click the big blue Publish button near the top right of the page.

Step 4: Create a Slideshow on a Page

In WordPress, go into the Pages section and edit a page you want to add a slide to, or create a new Page.

Note you’ll now have a new meta box somewhere beneath the content editor with your new custom fields. Go ahead and fill them all out, uploading images and setting valid URLs in the link fields.

Update or publish the Page.

That won’t automatically add it to our page, though. Continue reading…

Step 5: Edit your Theme’s Page.php File

FTP into your site and open up the page.php file in your theme’s folder.

Find the spot you want to add the slide show to on the page. This may be above a call to <?php the_content(); ?> if you want the slider to show up above your copy, or anywhere else on the page, really. Much of this will depend on how other parts of your site are styled or setup.

Once you’ve found the spot, paste in one of the two following codes:

For the Repeater Field case:

<?php if( have_rows('slides') ): ?>
<div class="liquid-slider" id="slider-id">
<?php while( have_rows('slides') ): the_row();
$slide_image = get_sub_field('slide_image');
$slide_link = get_sub_field('slide_link'); ?>
<section>
<?php if( $slide_link ): ?>
<a href="<?php echo $slide_link; ?>">
<?php endif; ?>
<img src="<?php echo $slide_image['url']; ?>" alt="<?php echo $slide_image['alt'] ?>" />
<?php if( $slide_link ): ?>
</a>
<?php endif; ?>
</section>
<?php endwhile; ?>
</div>
<?php endif; ?>

For the Image Field case, we’ve got a bit more code:

<?php $slide_image_1 = get_field('slide_image_1');
$slide_link_1 = get_field('slide_link_1');
$slide_image_2 = get_field('slide_image_2');
$slide_link_2 = get_field('slide_link_2');
$slide_image_3 = get_field('slide_image_3');
$slide_link_3 = get_field('slide_link_3');

/* Repeat the above for as many of the fields as you had created */ ?>

<?php if( !empty('slide_image_1') || !empty('slide_image_2') || !empty('slide_image_3') ): // <- again, add as many of these as you need based on how many slide fields you created ?>
<div class="liquid-slider" id="slider-id">
<?php if( !empty('slide_image_1') : ?>
<section>
<?php if( $slide_link_1 ): ?>
<a href="<?php echo $slide_link_1; ?>">
<?php endif; ?>
<img src="<?php echo $slide_image_1['url']; ?>" alt="<?php echo $slide_image_1['alt'] ?>" />
<?php if( $slide_link_1 ): ?>
</a>
<?php endif; ?>
</section>
<?php endif; ?>
<?php if( !empty('slide_image_2') : ?>
<section>
<?php if( $slide_link_2 ): ?>
<a href="<?php echo $slide_link_2; ?>">
<?php endif; ?>
<img src="<?php echo $slide_image_2['url']; ?>" alt="<?php echo $slide_image_2['alt'] ?>" />
<?php if( $slide_link_2 ): ?>
</a>
<?php endif; ?>
</section>
<?php endif; ?>
<?php if( !empty('slide_image_3') : // if you have more than 3, repeat this line through the commented line below again for each set of fields ?>
<section>
<?php if( $slide_link_3 ): ?>
<a href="<?php echo $slide_link_3; ?>">
<?php endif; ?>
<img src="<?php echo $slide_image_3['url']; ?>" alt="<?php echo $slide_image_3['alt'] ?>" />
<?php if( $slide_link_3 ): ?>
</a>
<?php endif; ?>
</section>
<?php endif; // through to here ?>
</div>
<?php endif; ?>

Step 6: Finish Setting Up Liquid Slider

Finally, we’ll add the last bit of jQuery needed to get the slider fully operational.

The final step is to add the last bit of Javascript / jQuery Liquid Slider needs to operate. Open your site’s footer.php file and, below the call to wp_footer() paste in the following:

<script>
jQuery(document).ready(function($) {
$(function(){
$('#slider-id').liquidSlider();
});
});
</script>

Or refer to the Liquid Slider Documentation for all of the options you can throw in there.

Optional Step 7: The CSS

You’ll probably want to edit the CSS that was provided in that liquid-slider.css file we dropped in the theme’s folder. Go at it to your heart’s content. If you’re looking for a slider that just uses arrows, this CSS typically works really well for me as a starting point (I replace the entire CSS file with this):

.no-js .liquid-slider{height:350px;overflow:scroll}.ls-preloader{opacity:1;width:100%;height:100%;position:absolute;top:0;left:0;z-index:2}.ls-wrapper{clear:both;overflow:auto;position:relative}.liquid-slider{width:100%;margin:0 auto;float:left;overflow:hidden;position:relative}.arrows .liquid-slider{margin:0 10px}.ls-responsive .liquid-slider{width:100%;margin:0}.panel-container{position:relative;-webkit-backface-visibility:hidden;-webkit-perspective:1000}.liquid-slider .panel-container .fade{width:100%;opacity:0;position:absolute;top:0;left:0;display:block}.liquid-slider .ls-panel{width:100%;display:block;float:left}.panel-wrapper{padding:0 40px;position:relative}.ls-nav{overflow:hidden;clear:both}.ls-nav a{background:#d8d8d8;color:#333;margin-right:1px;padding:10px 15px;outline:0}.ls-nav a:hover{color:#333;text-shadow:none}.currentCrossLink{font-weight:700}.ls-nav ul{padding:0;clear:both;display:block;margin:auto;overflow:hidden}.ls-nav ul li{display:inline}.ls-nav ul li a{display:block;float:left;text-decoration:none}.ls-select-box{width:100%;height:35px;overflow:hidden}.ls-select-box select{width:150%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;padding:5px;font-size:110%;border:none;height:35px;cursor:pointer;outline:0}.ls-nav-left,.ls-nav-right{top:0;float:left;clear:both}.ls-nav-left a,.ls-nav-right a{background:#000;color:#fff;padding:5px;width:100px;display:block;text-align:center;text-decoration:none}.ls-responsive .ls-nav-left{position:absolute;left:0;z-index:2}.ls-responsive .ls-nav-left a{background:#9A9A9A;width:80px}.ls-responsive .ls-nav-left a:hover{background:#747474}.ls-responsive .ls-nav-right{position:absolute;right:0;z-index:2}.ls-responsive .ls-nav-right a{background:#9A9A9A;width:80px}.ls-responsive .ls-nav-right a:hover{background:#747474}.ls-nav-left-arrow,.ls-nav-right-arrow{cursor:pointer;float:left;clear:both}.ls-nav-left-arrow a,.ls-nav-right-arrow a{display:block}[class$="-arrow"]{width:25px;height:25px;background-repeat:no-repeat;margin-top:50px;position:relative}.ls-nav-right-arrow{background-position:top right;margin-right:5px}.ls-nav-left-arrow{background-position:top left;margin-left:5px}.ls-nav-left-arrow:hover{background-position:bottom left}.ls-nav-right-arrow:hover{background-position:bottom right}.ls-responsive .ls-nav-left-arrow{position:absolute;left:0;z-index:2}.ls-responsive .ls-nav-right-arrow{position:absolute;right:0;z-index:2}

.ls-responsive .ls-nav-left-arrow, .ls-responsive .ls-nav-right-arrow {
background: white;
width: 2em;
height: 2em;
border-radius: 3em;
top:6em;
}

.ls-nav-left-arrow:before, .ls-nav-right-arrow:before {
content:" "; width: 0; top: .4em;
height: 0; position:absolute; border-bottom: 10px solid transparent; border-top: 10px solid transparent;}

.ls-nav-left-arrow:before {border-right: 10px solid #ef5531; left:.5em;}

.ls-nav-right-arrow:before {border-left: 10px solid #ef5531; right:.5em;}

img.slide-hero-image {
visibility: hidden;
}

Up Next: Better Woocommerce Star Ratings Shortcode Plugin