How to Integrate LiquidSlider with WordPress

Updated May 12, 2014: Additional jQuery plugins which are required to make some of these features work are no longer bundled with Liquid Slider itself, the code below has been updated to reflect that. Nothing else you need to do but follow the instructions.

Updated Aug 20, 2015: I’ve written another tutorial on how to do this with custom fields (so you can have a different slider on any Page you want) instead of the following, which uses custom post types.

Kevin Batdorf’s Liquid Slider plugin for jQuery is my go to slider. It’s easy to setup, has all of the features I ever need, and is responsive. Today I’ll show you how we can fully integrate Liquid Slider with WordPress. Via this tutorial, we’ll cover the following:

  1. Installing Liquid Slider in your Theme
  2. Creating a Custom Post Type to Allow WordPress Authors to Create New Slides

Step 1: Download & Install Liquid Slider

You can download Liquid Slider directly from Github here.

Once you’ve done that, copy the jquery.liquid-slider.min.js file into your WordPress theme. I typically place mine in a folder called /js/, along with all of my other Javascript files, and will assume you’ve done that as well for the remainder of this article. Adjust as necessary if you’re keeping the files somewhere else.

Finally, we need to make certain we’re calling that and a few other required files properly, we’ll use wp_enqueue_script for that. Open your functions.php file and paste the following code.

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() . '/style-liquid-slider.css');
wp_enqueue_style( 'liquid_slider_css' );
}

Here we’ve told WordPress to add a call to load up the built in jQuery that comes with WP, our local copy of the Liquid Slider Javascript, and between those two, CDN-hosted versions of some optional jQuery Easing and TouchSwipe plugins. We’ve also queued up the Liquid Slider CSS, which I have placed into a file called style-liquid-slider.css and placed in my theme’s root directory. These will all be automatically added to our WP theme via wp_footer() so make certain that your theme has that call included. All themes should (typically in the footer.php file).

Step 2: Create a Custom Post Type for Our Slider

Now that we’ve got the basics setup, let’s create a Custom Post Type we can use to allow new slides to be created directly via WordPress. Paste the following into your theme’s functions.php file.

// Register Slideshow post type
function cn_register_slideshow() {
$labels = array(
'name' => 'Slides',
'singular_name' => 'Slide',
'add_new' => 'Add New',
'add_new_item' => 'Add New Slide',
'edit_item' => 'Edit Slide',
'new_item' => 'New Slide',
'all_items' => 'All Slides',
'view_item' => 'View Slide',
'search_items' => 'Search Slides',
'not_found' => 'No Slides found',
'not_found_in_trash' => 'No Slides found in Trash',
'parent_item_colon' => '',
'menu_name' => 'Slideshow'
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'slide' ),
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => 50,
'supports' => array( 'title', 'editor', 'thumbnail' )
);
register_post_type( 'slide', $args );
}
add_action( 'init', 'cn_register_slideshow' );

We’ll now have a new section in WordPress called Slideshow where we can create new slides. This new area will look very similar to the default Post and Page Editors. With our code we’ve included some familiar elements, such as the Title field, the Post Editor and the Post Thumbnail / Featured Image functionality.

A Note about Post Thumbnails

Note that your theme must support Post Thumbnails for that particular functionality to work. If it doesn’t, you can add the following to your theme’s functions.php to enable Post Thumbnail support.

add_theme_support( 'post-thumbnails' );

Additionally, your theme may already support Post Thumbnails, but only for specific Post Types. In that case, search your functions.php file for the call above. It will probably look something like this:

add_theme_support( 'post-thumbnails', array( 'post' ) );

Where array( 'post' ) is saying “Only allow post thumbnails on Posts (ie, not Pages or Custom Post Types). Edit that to look something like this instead:

add_theme_support( 'post-thumbnails', array( 'post', 'slide' ) );

Which tells the theme to also allow featured images on the Slide Custom Post Type.

Create Some Slides

Before we continue, you’ll want to create some slides. Click Add New under the new Slideshow panel and give your slide a title, some text, and a featured image. You’ll want to create at least two slides to see everything working.

Step 3: Integrate the Slideshow into Your Theme

This is where your mileage will vary heavily, as I have no way of knowing what theme you’re using, what CSS it already has in place, or where the right place to put the slideshow in your theme might be. I’ll assume you have a decent understanding of your theme and where you want to place the slideshow from here on out.

Our next step is to simply write a WP_Query to get our Slide posts and display them where we want to in our theme. Again, where you want to put the slideshow depends on you…but as an example, I often include a slider only on my homepage, so you could open up your site’s page.php template file (if your site uses a static page as its homepage), and do a conditional statement such as <?php if (is_front_page()) { ?>paste in my code below<?php } ?>.

<div class="liquid-slider" id="slider-id">
<?php $my_query = new WP_Query('post_type=slide');
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<section>
<h1 class="title"><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php if (has_post_thumbnail()) { the_post_thumbnail(); } ?>
</section>
<?php endwhile; ?>
</div>

Of course, you can swap out the HTML and calls to the_title();, the_post_thumbnail(); and the_content(); with whatever you’d specifically like to display.

Step 4: Finish Setting Up Liquid Slider

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>

That code is a little different than what Kevin provides, simply because WordPress uses a special version of jQuery and we need to wrap our jQuery calls with the extra line(s) of code. You can also, of course, use all of the fancy options that come with LiquidSlider…this is just the basic implementation.

Step 5: Edit the CSS

At this point you’re all set up, but you’ll probably need to make some tweaks to the Liquid Slider CSS in order to get things looking like they should. Thankfully, Kevin has commented the CSS code very well.

Enjoy!

Up Next: How to Include a Specific Page's Content in a WordPress Theme without a Plugin