Advertisement
Theme Development

Adding a Responsive jQuery Slider to Your WordPress Theme

by

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:

// 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.

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.

// 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.

Related Posts
  • Code
    WordPress
    Mastering WordPress Meta Data: Querying Posts and Users by Meta DataMetadata
    So far in this series you've learned how to access WordPress meta data, and work with the arrays in which they are returned. We don't just add custom fields to WordPress posts so we can display this information, but it also so we can sort by it. Now that you know how to retrieve and display meta data, it's time to learn how to customize the WordPress loop to return only posts with specific meta values.Read More…
  • Code
    WordPress
    Mastering WordPress Meta Data: Working With LoopsMetadata
    In the first two parts of this series, we covered what meta data is in WordPress and how to work with the arrays that are typically returned. Now that you've learned to do the detective work necessary to find the structure of an array, it's time to learn to use loops to automate the process of outputting an array. Once you learn this important skill you will never have to write repetitive HTML markup again.Read More…
  • Code
    WordPress
    Mastering WordPress Meta Data: Understanding and Using ArraysMetadata
    In the first part of this series, we covered what WordPress meta data is, how it can be retrieved, and the various data types (such as objects or arrays) in which it can be returned. Now it's time to learn about the different types of arrays. When you write an array manually you know what its structure is an what the name of each index is. But when you are building arrays by querying a database, you are going to need to do some detective work to determine the structure of the data returned and the names of the indexes.Read More…
  • Code
    PHP
    Creating a Photo Tag Wall With Twilio Picture Messaging & PHPProcedural to oop php retina preview
    Twilio's recently announced Picture Messaging has vastly opened up what we can do with text messaging, now we can attach photos to our text messages and have them get used in different ways. In our case, we are going to build a Photo Tag Wall, which will contain photos linked to tags that will be displayed on a website.Read More…
  • Code
    Plugins
    Creating Client Testimonials With Custom Post TypesCreating client testimonials with custom post types
    If you're running any type of business online, it's a good idea to get your clients' opinions on what they thought about the services you provided. First of all, this can benefit you by giving you feedback on how you can improve aspects of your business, but most of all, it can give you great testimonials, which can help to persuade potential clients to use your services.Read More…
  • Code
    Theme Development
    How to Display Metaboxes According to the Current Post FormatHow to display metaboxes according to the current post format
    Today I'd like to show you how to go further with custom metaboxes and specifically how to use them according to post formats. We won't cover how to build reusable custom metaboxes as it has already been covered in a previous topic, so please refer to this article if you have any trouble with this.Read More…