Adding a Responsive jQuery Slider to Your WordPress Theme

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.

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:

// Create Slider Post Type
require( get_template_directory() . '/inc/slider/slider_post_type.php' );
// Create Slider
require( get_template_directory() . '/inc/slider/slider.php' );

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:

<?php

// Create Custom Post Type
	
	function register_slides_posttype() {
		$labels = array(
			'name' 				=> _x( 'Slides', 'post type general name' ),
			'singular_name'		=> _x( 'Slide', 'post type singular name' ),
			'add_new' 			=> __( 'Add New Slide' ),
			'add_new_item' 		=> __( 'Add New Slide' ),
			'edit_item' 		=> __( 'Edit Slide' ),
			'new_item' 			=> __( 'New Slide' ),
			'view_item' 		=> __( 'View Slide' ),
			'search_items' 		=> __( 'Search Slides' ),
			'not_found' 		=> __( 'Slide' ),
			'not_found_in_trash'=> __( 'Slide' ),
			'parent_item_colon' => __( 'Slide' ),
			'menu_name'			=> __( 'Slides' )
		);

		$taxonomies = array();

		$supports = array('title','thumbnail');

		$post_type_args = array(
			'labels' 			=> $labels,
			'singular_label' 	=> __('Slide'),
			'public' 			=> true,
			'show_ui' 			=> true,
			'publicly_queryable'=> true,
			'query_var'			=> true,
			'capability_type' 	=> 'post',
			'has_archive' 		=> false,
			'hierarchical' 		=> false,
			'rewrite' 			=> array( 'slug' => 'slides', 'with_front' => false ),
			'supports' 			=> $supports,
			'menu_position' 	=> 27, // Where it is in the menu. Change to 6 and it's below posts. 11 and it's below media, etc.
			'menu_icon' 		=> get_template_directory_uri() . '/inc/slider/images/icon.png',
			'taxonomies'		=> $taxonomies
		);
		register_post_type('slides',$post_type_args);
	}
	add_action('init', 'register_slides_posttype');

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:

// Meta Box for Slider URL
	
	$slidelink_2_metabox = array( 
		'id' => 'slidelink',
		'title' => 'Slide Link',
		'page' => array('slides'),
		'context' => 'normal',
		'priority' => 'default',
		'fields' => array(
	
					
					array(
						'name' 			=> 'Slide URL',
						'desc' 			=> '',
						'id' 				=> 'wptuts_slideurl',
						'class' 			=> 'wptuts_slideurl',
						'type' 			=> 'text',
						'rich_editor' 	=> 0,			
						'max' 			=> 0				
					),
					)
	);			
				
	add_action('admin_menu', 'wptuts_add_slidelink_2_meta_box');
	function wptuts_add_slidelink_2_meta_box() {
	
		global $slidelink_2_metabox;		
	
		foreach($slidelink_2_metabox['page'] as $page) {
			add_meta_box($slidelink_2_metabox['id'], $slidelink_2_metabox['title'], 'wptuts_show_slidelink_2_box', $page, 'normal', 'default', $slidelink_2_metabox);
		}
	}
	
	// function to show meta boxes
	function wptuts_show_slidelink_2_box()	{
		global $post;
		global $slidelink_2_metabox;
		global $wptuts_prefix;
		global $wp_version;
		
		// Use nonce for verification
		echo '<input type="hidden" name="wptuts_slidelink_2_meta_box_nonce" value="', wp_create_nonce(basename(__FILE__)), '" />';
		
		echo '<table class="form-table">';
	
		foreach ($slidelink_2_metabox['fields'] as $field) {
			// get current post meta data
	
			$meta = get_post_meta($post->ID, $field['id'], true);
			
			echo '<tr>',
					'<th style="width:20%"><label for="', $field['id'], '">', stripslashes($field['name']), '</label></th>',
					'<td class="wptuts_field_type_' . str_replace(' ', '_', $field['type']) . '">';
			switch ($field['type']) {
				case 'text':
					echo '<input type="text" name="', $field['id'], '" id="', $field['id'], '" value="', $meta ? $meta : $field['std'], '" size="30" style="width:97%" /><br/>', '', stripslashes($field['desc']);
					break;
			}
			echo    '<td>',
				'</tr>';
		}
		
		echo '</table>';
	}	
	
	// Save data from meta box
	add_action('save_post', 'wptuts_slidelink_2_save');
	function wptuts_slidelink_2_save($post_id) {
		global $post;
		global $slidelink_2_metabox;
		
		// verify nonce
		if (!wp_verify_nonce($_POST['wptuts_slidelink_2_meta_box_nonce'], basename(__FILE__))) {
			return $post_id;
		}
	
		// check autosave
		if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
			return $post_id;
		}
	
		// check permissions
		if ('page' == $_POST['post_type']) {
			if (!current_user_can('edit_page', $post_id)) {
				return $post_id;
			}
		} elseif (!current_user_can('edit_post', $post_id)) {
			return $post_id;
		}
		
		foreach ($slidelink_2_metabox['fields'] as $field) {
		
			$old = get_post_meta($post_id, $field['id'], true);
			$new = $_POST[$field['id']];
			
			if ($new && $new != $old) {
				if($field['type'] == 'date') {
					$new = wptuts_format_date($new);
					update_post_meta($post_id, $field['id'], $new);
				} else {
					if(is_string($new)) {
						$new = $new;
					} 
					update_post_meta($post_id, $field['id'], $new);
					
					
				}
			} elseif ('' == $new && $old) {
				delete_post_meta($post_id, $field['id'], $old);
			}
		}
	}

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.

<?php

// Enqueue Flexslider Files

	function wptuts_slider_scripts() {
		wp_enqueue_script( 'jquery' );

		wp_enqueue_style( 'flex-style', get_template_directory_uri() . '/inc/slider/css/flexslider.css' );

		wp_enqueue_script( 'flex-script', get_template_directory_uri() .  '/inc/slider/js/jquery.flexslider-min.js', array( 'jquery' ), false, true );
	}
	add_action( 'wp_enqueue_scripts', 'wptuts_slider_scripts' );

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!

// Initialize Slider

	function wptuts_slider_initialize() { ?>
		<script type="text/javascript" charset="utf-8">
			jQuery(window).load(function() {
				jQuery('.flexslider').flexslider({
					animation: "fade",
					direction: "horizontal",
					slideshowSpeed: 7000,
					animationSpeed: 600
				});
			});
		</script>
	<?php }
	add_action( 'wp_head', 'wptuts_slider_initialize' );

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.

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.

// Create Slider

	function wptuts_slider_template() {

		// Query Arguments
		$args = array(
			'post_type' => 'slides',
			'posts_per_page' => 5
		);	

		// The Query
		$the_query = new WP_Query( $args );

		// Check if the Query returns any posts
		if ( $the_query->have_posts() ) {

			// Start the Slider ?>
			<div class="flexslider">
				<ul class="slides">

					<?php
					// The Loop
					while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
						<li>

						<?php // Check if there's a Slide URL given and if so let's a link to it
						if ( get_post_meta( get_the_id(), 'wptuts_slideurl', true) != '' ) { ?>
							<a href="<?php echo esc_url( get_post_meta( get_the_id(), 'wptuts_slideurl', true) ); ?>">
						<?php }

						// The Slide's Image
						echo the_post_thumbnail();

						// Close off the Slide's Link if there is one
						if ( get_post_meta( get_the_id(), 'wptuts_slideurl', true) != '' ) { ?>
							</a>
						<?php } ?>

					    </li>
					<?php endwhile; ?>

				</ul><!-- .slides -->
			</div><!-- .flexslider -->

		<?php }

		// Reset Post Data
		wp_reset_postdata();
	}

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:

<?php echo wptuts_slider_template(); ?>

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:

// Slider Shortcode

	function wptuts_slider_shortcode() {
		ob_start();
		wptuts_slider_template();
		$slider = ob_get_clean();
		return $slider;
	}
	add_shortcode( 'slider', 'wptuts_slider_shortcode' );

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

Download

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:

// Create Slider Post Type
require( get_template_directory() . '/inc/slider/slider_post_type.php' );
// Create Slider
require( get_template_directory() . '/inc/slider/slider.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.