Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
  1. Code
  2. Theme Development

Adding a Responsive jQuery Slider to Your WordPress Theme

Read Time:9 minsLanguages:

Today I'm going to take you through integrating a responsive jQuery slider into your WordPress theme or site. It's not a groundbreaking tutorial but it's one that's rarely done right, so I'd like to try and fix that. In this tutorial we're going to cover every step from creating a custom post type to hold our slides, to actually using the slider within our site.

We're going to be using the lovely FlexSlider 2 by WooThemes as it's a very well-coded responsive slider that's licensed under the GPLv2 License. If you're interested, you can take a look at the code for FlexSlider in its GitHub Repository.

Before we do anything, we're going to take a step back and think about:

  • What files the slider requires
  • What files we require

The first thing we're going to do is download FlexSlider.

After you've done that, go ahead an unzip it.

There are a few files there we're interested in, mainly:

  • flexslider.css
  • images/bg_direction_nav.png
  • jquery.flexslider-min.js

They're all we really need from the FlexSlider download.

Step 1 Setting Up the Files

Let's move those 3 files from the above into our theme's directory now. Depending on your theme or set-up you can place the files wherever you'd like, just take note of where those files are sourced/referenced and adjust the code to fit their new location.

For the sake of this tutorial, we'll be using the default Twenty Eleven theme. In the inc/ directory, create a new folder called slider. In there, let's create a few folders:

  • css
  • images
  • js

Let's put flexslider.css in the css folder, bg_direction_nav.png in the images folder and jquery.flexslider-min.js in the, you guessed it, js folder.

Note: Normally I would place these in css/images/js folders throughout the theme's directory with other files but in order to make this tutorial 'universal', we're organising our files this way. If you're experienced with WordPress theme development you may want to manually organise your files.

Now we're going to create 2 more files in the slider folder:

  • slider.php - creates the slider's template & loads the slider's files
  • slider_post_type.php - creates the slider post type

You should now have a slider folder that looks something like this:

Before we go ahead, open up your functions.php file and add in the following two lines, which will load the two .php files we just created:

Now... let's start coding!

Step 2 Slider Post Type

First thing we're going to do is create a custom post type that will hold all our slides. Custom Post Types were introduced in WordPress 3.0 and are probably the coolest thing to ever happen to the world (too far? I just love them).

Open up slider_post_type.php and add the following code to create the slide custom post type:

Custom Post Type added! Below that we'll add the metabox where there's a field for the URL that the slide should link to. We're now going to copy the following big wall of code:

Phew. That's over. Go to your Dashboard and you'll see a new shiny 'Slides' Custom Post Type.

Step 3 Load Slider Files

Open up slider.php. Now we're going to enqueue jQuery, the FlexSlider jQuery script and the FlexSlider stylesheet. Alternatively you could copy the code from flexslider.css to your style.css file if desired.

While we're doing this, there's something you need to do. Due to our file structure, the flexslider.css needs some editing so it knows where to find the arrow image. Open it up and do a search and replace for:

  • images with ../images

Step 4 Initialize Slider

Now we need to add some jQuery to our <head> in order to initialize the slider. Let's add in the following lines to slider.php below the code we just added!

One of the reasons I chose to use FlexSlider is because of its flexability. There are quite a few parameters you can tinker with, but I just included four important ones above. Try changing slide to fade, or horizontal to vertical. You can take a look at all of the paremeters over here.

Note: Keep in mind that another way to do the above is using the wp_localize_script function (see in Codex) but this is a little bit advanced for this tutorial. However, Pippin Williamson (another Wptuts+ author) has just written an excellent tutorial on the subject if you're interested.

Step 5 Create Slider

Now we're going to actually create the template for the slider. First, we'll do a WP_Query to pull 'posts' from the Slides Custom Post Type. Next, we'll check for slides and if so start the slider. We'll then start the loop. Each 'slide' will then check if a slide URL has been set and if so, create a link for it. The slide's image will then be displayed and the loop will be closed up.

Step 6 Using the Slider

Well, we've finally made the slider! Now it's time to actually use it. You can open up any template file, such as index.php, and echo the wptuts_slider_template function to display the slider.

So if we wanted to show the slider in Twenty Eleven right after the header on the home page, we would open up index.php and just beneath get_header(); ?>, add the following:

But what if you're making this for a client or someone who just doesn't want to touch template files and PHP? We should probably create a shortcode for them, so they can just use the slider with a [slider] shortcode.

Add this at the bottom of slider.php:

The slider can now be used within posts, pages or anywhere else that accepts a shortcode!


If you'd like, you can download the slider folder, which contains everything we went through in this tutorial. You just need to drop it in your theme's inc folder (or somewhere else is fine, but be sure to adjust the code below) and add the following to your functions.php:

Note: For the sake of this tutorial, the namespace/text domain wptuts has been used. You should do a search and replace on all code if you're just copying/pasting it and replace:

  • wptuts_ with yourname_
  • 'wptuts' with 'yourname'

If you liked this tutorial, let me know and I'll continue with a tutorial on customising our slider! We'll then take a look at using thumbnails for navigation, integrating video slides and adding in captions.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.