Responsive Custom Post Type Slider

I created a single page portfolio theme recently with a responsive slider at the top of the page this is the slider we’ll be creating here.

* A Recent update to this series is a responsive, full width, continuous carousel style post navigation with added parallax. Inspired by the BBC’s current site which pulls the current, previous and next post featured image Click Here

So let’s get started…

SEE THE DEMO
I’ll be adding this again soon ^

This is the final CPT ^{Custom Post Type} admin section.

The Slider CPT will include:

• Title
• Text area
• Featured image
• Positioning options for the text.

We will also include some helpful instructions and an options page.

That’s right, an options page. If we’re adding a fixed slider to a theme then we’re going to want to give the owner some control. Not everyone wants to fade an image…

These are the user defined options we’re going to add:

• Slide Effects
• Pause between slides
• Easing Animation
• Slide Speed

The options page will look like this:

Before we begin

The Theme folder structure will end up looking like this, you can see that we’re using a lot of files (but only actually creating three new documents) so as you walk through this tutorial, if you wonder where a file goes or which file to edit? Use this as a reference.
Don’t be afraid, it looks a lot worse than it actually is.

Estimated completion time: 35min.

Lets start by creating the CPT Slider.

Open up your text editor and add the following code to create the menu items.

<?php
/* The template for displaying the WPtricks featured Slider.
 *
 *
 * @author Aaron Summers
 * @author_url http://wptricks.co.uk
 */

Register the CPT:

/* Register a Custom Post Type (Slide) */
add_action('init', 'wpt_slider_init');
function wpt_slider_init() {
	$labels = array(
		'name' => _x('Slides', 'post type general name'),
		'singular_name' => _x('Slide', 'post type singular name'),
		'add_new' => _x('Add New', 'wpt_slider'), //This is our post_type, we'll display the metaboxes only on this post_type!
		'add_new_item' => __('Add New Slide'),
		'edit_item' => __('Edit Slide'),
		'new_item' => __('New Slide'),
		'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' => 'Featured Slider'
	);
	$args = array(
		'labels' => $labels,
		'public' => true,
		'publicly_queryable' => true,
		'show_ui' => true,
		'show_in_menu' => true,
		'menu_icon' => get_bloginfo('template_directory'). '/images/slide.gif',
		'menu_position' => 5,
		'query_var' => true,
		'rewrite' => true,
		'capability_type' => 'post',
		'has_archive' => true,
		'hierarchical' => false,
		'supports' => array('title', 'thumbnail')
	);
	register_post_type('wpt_slider', $args);
}

Below that add the confirmation messages.

These appear once you publish a slide, a yellow block confirming your actionion used whilst creating the slide.

/* Update Slide Admin Messages */
add_filter('post_updated_messages', 'wpt_slider_updated_messages');
function wpt_slider_updated_messages($messages) {
	global $post, $post_ID;
	$messages['wpt_slider'] = array(
		0 => '',
		1 => sprintf(__('Slide updated.'), esc_url(get_permalink($post_ID))),
		2 => __('Custom field updated.'),
		3 => __('Custom field deleted.'),
		4 => __('Slide updated.'),
		5 => isset($_GET['revision']) ? sprintf(__('Slide restored to revision from %s'), wp_post_revision_title((int) $_GET['revision'], false)) : false,
		6 => sprintf(__('Slide published.'), esc_url(get_permalink($post_ID))),
		7 => __('Slide saved.'),
		8 => sprintf(__('Slide submitted.'), esc_url(add_query_arg('preview', 'true', get_permalink($post_ID)))),
		9 => sprintf(__('Slide scheduled for: <strong>%1$s</strong>. '), date_i18n(__('M j, Y @ G:i'), strtotime($post->post_date)), esc_url(get_permalink($post_ID))),
		10 => sprintf(__('Slide draft updated.'), esc_url(add_query_arg('preview', 'true', get_permalink($post_ID)))),
	);
	return $messages;
}

Include a Help Menu

Lastly for this section we’ll add a custom help menu which will appear under the help tab.
(The help tab is found above the publish module when you’re editing a slide.)

/* Update Slide Help */
add_action('contextual_help', 'wpt_slider_help_text', 10, 3);
function wpt_slider_help_text($contextual_help, $screen_id, $screen) {
	if ('wpt_slider' == $screen->id) {
		$contextual_help =
		'<p>' . __('Things to remember when adding a slide:') . '</p>' .
		'<ul>' .
		'<li>' . __('Give the slide a title. The title will be used as the slide\'s headline.') . '</li>' .
		'<li>' . __('Attach a Featured Image to give the slide its background.') . '</li>' .
		'<li>' . __('Enter text into the Visual or HTML area. The text will appear within each slide during transitions.') . '</li>' .
		'</ul>';
	}
	elseif ('edit-wpt_slider' == $screen->id) {
		$contextual_help = '<p>' . __('A list of all slides appears below. To edit a slide, click on the slide\'s title.') . '</p>';
	}
	return $contextual_help;
}

Save this page as wpt-slider.php. Make sure it’s in your main theme folder.

Now that’s been created we should call the file in our theme functions.php so that WordPress can use it.
Open your themes functions.php and at the bottom add the following code:
(which checks to see if the _setup() function exists and to include it if it doesn’t.)

THEME/functions.php

// WPT Slider Set-up
if ( ! function_exists( 'wpt_setup' ) ) {
	function wpt_setup() {
		//include the wpt-slider.php
		get_template_part( 'wpt-slider');

	}
}
add_action( 'after_setup_theme', 'wpt_setup' );

Great, let’s check this is all working correctly

In your WordPress dashboard, in the left menu, below posts, you’ll see ‘Featured Slider‘ hover over this and select the Add New button; You should see this.

Pretty boring so far but If you think about it, this is all a user would need to create a slide!

• The ability to add an image
• And enter a title

But we’re not going to stop there, I’d like to have a few more options, let’s add some cool features that’ll improve the look and also work really well. To do this we’re going to use custom fields and thanks to Andrew Norcross, Jared Atchison, Bill Erickson & Justin Sternberg there is an easy way for us to create and add custom fields… Awesome!

Add custom meta boxes.

Download this developer plugin Custom Meta Boxes & Fields For WordPress.

Simply create a folder inside your theme folder called “inc” (short for includes) then add the contents of the zip to the “inc” folder, now change the name of the new plugin from “Custom-Metaboxes-and-Fields-for-WordPress-master” to just “metaboxes”.

THEME/INC/METABOXES/…

With this all present and correct lets initialize the metaboxes.

THEME/functions.php

//Initialize the meta boxes
add_action( 'init', 'wpt_initialize_cmb_meta_boxes', 9999 );	
function wpt_initialize_cmb_meta_boxes() {

	if ( ! class_exists( 'cmb_Meta_Box' ) )
		require_once dirname( __FILE__ ) . '/inc/metaboxes/init.php';
}

This basically loads the required init.php file from the metabox plugin so we can use it for our featured slider.
Below the initialize function we created above; Add the custom fields with the following snippet:

//add custom fields
add_filter( 'cmb_meta_boxes' , 'wpt_create_metaboxes' );
function wpt_create_metaboxes( $meta_boxes ) {
	//PROMOTION SLIDER
  $meta_boxes[] = array(
	'id' => 'wpt_slider_contents',
	'title' => 'Featured Slider',
	'pages' => array('wpt_slider'),//Add our post_type() we created earlier.
	'context' => 'normal',
	'priority' => 'low',
	'show_names' => true,
	'fields' => array(
	array(
	'name' => 'Instructions',
	'desc' => "<ol><li>Enter your title above.</li><li>In the right column upload a featured image (Make sure this image is at least <b>1200x400px</b>).</li><li>Then if you'd like to add a few words about your feature do so below. (I would suggest no more than 100 words!).</li><li>Finaly position the body text; Then publish the slide.</li></ol>",
	'type' => 'title',
  ),
  array(	//Add a text area
	'name' => 'Featured Text',
	'desc' => 'Enter a few words about your feature. If you don't want to display a text box select do not display from the positioning section below.',
	'std' => '',
	'id' =>  $prefix . 'top_textarea',
	'type' => 'textarea'
  ),
  array(	//where to display the slide text, using inline radio buttons
	'name' => 'Positioning',
	'desc' => 'Choose where to display your text or hide it completely.',
	'id' => $prefix . 'position_radio',
	'type' => 'radio_inline',
	'options' => array(
		array('name' => ' ', 'value' => 'left'), //Value 'left' = class will be added to each slide
		array('name' => ' ', 'value' => 'bottom'),
		array('name' => ' ', 'value' => 'right'),
		array('name' => ' ', 'value' => 'hidden')			
	)
  ),
),
);
return $meta_boxes;
}

Save your document.

Add some styles

Open up the metaboxes folder, select the style.css and open it in your text editor.
At the very top of this document add the following CSS.

• This is going to position our radio buttons
• Include and position the background image

THEME/INC/METABOX/style.css

table.cmb_metabox input[type="radio"] { margin: 0 5px 0 0; padding: 0;}

table.cmb_metabox input[value="left"] { margin: 0 5px 0 0; padding:0;} 

[for="position_radio1"],[for="position_radio2"],
[for="position_radio3"],[for="position_radio4"] {
	background-image: url(images/promotion-position.png);
	background-repeat: no-repeat;
	padding: 19px 102px 0 0;
}
[for="position_radio1"] {
	background-position:  -105px 0;
	
}
[for="position_radio2"] {
	background-position: -210px 0;
	
}
[for="position_radio3"] {
	background-position: left 0;
	
}
[for="position_radio4"] {
	background-position: right 0;	
}

Great, save this file.

Now open up the main theme folder and select your themes css file, also called styles.css

Scroll to the bottom of the stylesheet, add this CSS:

• As we’re creating a responsive slider we want to use max-width: & width: to our images.
• Also we need to add the positioning classes, depending on what thumbnail the user clicks when they add the slide.

THEME/styles.css

/* WPtricks featured slider styles
* http://wptricks.co.uk/blog/creating-a-featured-slider-for-wordpress-using-custom-post-types
----------------------------------------------------------------*/ 
.relative-container {
	position: relative;
}

.relative-container.top-slider {
	min-height: 400px;
} 

a.slide-nav {
	position: absolute;
	z-index: 99999;
	top: 50%;
	background: rgba(255,255,255,0.9);
	opacity: 0;
	font-size: 1.1em;
    	padding: 0 0.4em;
	border-radius: 50%;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 0 9px -2px #000;
	transition: all linear 0.2s;
}
.slide-nav#prev {
	left: -10px;
}
.slide-nav#next {
	right: -10px;
}
ul#cycle:hover #prev {
	left: 50px;
	opacity: 0.8;
}
ul#cycle:hover #next {
	right: 50px;
	opacity: 0.8;
}
ul#cycle {
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:0;
}

#cycle li {
	position: relative;	
	width: 100%;
	left: 0;
	list-style: none;
	text-align: justify;
}
#cycle li img,
#cycle li,
#cycle {
	max-width: 1200px;
	max-height: 400px;
	width: 100% !important;
	height: auto;
}
#cycle li > div {
	position: absolute;
	bottom: 0;
	padding: 1em 2.7em;
	background: rgba(255,255,255,0.7);
}
/* positioning */
#cycle .right {
	right: 0;
	top: 0;
	width: 40%;
}
#cycle .left {
	left: 0;
	top: 0;
	width: 40%;}
#cycle .bottom {
	width: 100%;
	text-align: center;
}
#cycle .hidden{
	display: none;
}

Save your documents!

You’ll notice in the first css block we’re including a .png image.

Just right click the image below and select “save image as.”
Add this to THEME/INC/METABOXES/IMAGES/promotion-position.png

Return to the admin area of WordPress and select your new Featured Slider/Add Slide page, this is what you should see below. A big improvement on the first version of this page and now we have all the functions that a slider needs.

Beautiful right??.

Display the CPT

Next we’ll create a function to display the CPT and include the Javascript that’s going to provide the animation to our slider.

Open the wpt-slider.php file and at the bottom add this:

THEME/wpt-slider.php

/* Add slider image size, this'll crop the images when they're uploaded to fit the slider */
add_image_size('wpt_slider_image', 1200, 400, true);

/* Function to display the wpt_slider */
function new_wpt_slider() { //call this function where you want to display the slider in your theme.
	
	$fits = array('post_type' => 'wpt_slider', 'posts_per_page' => 1);
    	//if there is 1 slide show the slider...
		if($fits){
				//Relative container
				echo '<div class="relative-container top-slider">';
				
				//Add some navigation
				echo '<a href="javascript:void(0)" class="slide-nav" id="prev">&lt;</a>';
				echo '<a href="javascript:void(0)" class="slide-nav" id="next">&gt;</a>';
				
				//We're using the cycle plugin so #cycle
				echo '<ul id="cycle">';
				//Limit the slider to 5 slides
				$args = array('post_type' => 'wpt_slider', 'posts_per_page' => 5);
				$loop = new WP_Query($args);
            while ($loop->have_posts()) : $loop->the_post();
			
                echo '<li>';
		// 1200 x 400 image we created earlier
                the_post_thumbnail('wpt_slider_image'); 
						
		global $post;
		//$class grabs the position selected in the 'Add Slide' page
		$class = get_post_meta( $post->ID, $prefix . 'position_radio', true );
						
				
                echo '<div class="'; echo $class; echo '">' ;
      			echo '<h3>';
				the_title();
			echo '</h3>';
			global $post;
			//wpautop() adds paragraph tags to the text area
			$text = wpautop( get_post_meta( $post->ID, $prefix . 'top_textarea', true ));
			//The text area comes from our wpt_create_metaboxes() function - 'id' =>  $prefix . 'top_textarea'
			echo $text;
                echo '</div></li>';
										
			endwhile;
			
			echo '</ul>';
			echo '</div>';			
			
		};
}; 

Save the ‘wpt-slider.php‘.

Download the Scripts

THEME/JS/…

1. Download the jQuery Cycle Plugin
   • Select the Cycle Plugin! This contains all the animations (25kb Compressed).
2. Also download the jQuery Easing Plugin   *Right click and save as!
3. I would recommend minimizing the JS: jscompress.com *They’ll minimize by about 50%!

Add these to the themes js folder.

Include this snippet to our wpt-slider.php to call these scripts.

themes/wpt-slider.php

/* Include the Cycle & Easing plugin */
add_action('wp_enqueue_scripts','wpt_load_scripts');
function wpt_load_scripts(){
    
//include jquery cycle
    wp_deregister_script('jquery-cycle');
    wp_register_script('jquery-cycle', get_stylesheet_directory_uri() . '/js/jquery.cycle.all.js', array('jquery'), '', true);
    wp_enqueue_script('jquery-cycle');

//include jquery easing
    wp_deregister_script('jquery-easing');
    wp_register_script('jquery-easing', get_stylesheet_directory_uri() . '/js/jquery.easing.1.3.js', array('jquery'), '', true);
    wp_enqueue_script('jquery-easing');
}

Also create a new document and save it as js.php

We’re now going to need to add the javascript, but through php! (that’s right js.php). For this project it’s the cleanest way in this case because we’re going to offer the end user an options page, where they’re going to have control over the speed and animation of the slider. Which requires the use of php variables.

• slider_transition
• slider_interval
• easing_effect
• slider_speed

hence the js.php

Add this: (do not add opening and closing <?php ?> tags)
THEME/JS/js.php

<script type="text/javascript">
 
jQuery(document).ready(function() {

// slideshow on homepage
jQuery('#cycle').cycle({
	fx: '<?php echo of_get_option('slider_transition') ?>',// these are defined by our options page below
	timeout: <?php echo of_get_option('slider_interval') ?>,
	easing: '<?php echo of_get_option('easing_effect')?>',
	speed: <?php echo of_get_option('slider_speed') ?>, 
	fit: 1,
	next: '#next', //nav id's
	prev: '#prev'
 });


// Create a function to resize the height of the container when the window is resized
function updateSlideHolderSize() {
	var max = 0;
	jQuery("#cycle li img").each(function () {
		max = Math.max(max, jQuery(this).height());
	});
	jQuery("#cycle").height(max);
};

// We added a class .top-slider to the containing div with a height of 400px so the page loads with the slider at the correct height, but we'll need to remove this when the browser is resized.

jQuery(window)
	.resize(function(){
		jQuery('.relative-container').removeClass('top-slider');
	});
	jQuery(window).resize(updateSlideHolderSize);

//extra animation because it's cool, we're just going to fade and slide the slider navigation in.
jQuery('.relative-container')
	.hover(function() {
		jQuery('#prev').animate({ 'left' : '1.2%', 'opacity' : 1 }), 300;
  		jQuery('#next').animate({ 'right' : '1.2%', 'opacity' : 1 }), 300;
	}, function() {
		jQuery('#prev').animate({ 'left' : 0, 'opacity' : 0 }), 'fast';
  		jQuery('#next').animate({ 'right' : 0, 'opacity' : 0 }), 'fast';
	});
});

jQuery(document).ready(updateSlideHolderSize);
</script>

Now open your header.php and before the closing </head> tag add this:

<?php include 'js/js.php'; ?>

Slider Options

Options.php

This options page will appear in the admin section under: Appearance/Theme Options/

Download the Options Framework
unzip and add the “options-framework-plugin-master” to your themes “inc” folder.
Rename the folder to just “options-framework”.
theme/inc/options-framework

Create a new document, save as options.php and add it to your main theme folder. Then add the following snippet:

<?php
/**
 * A unique identifier is defined to store the options in the database and reference them from the theme.
 * -= Called by inc/options-framework/options-framework.php =-
 * By default it uses the theme name, in lowercase and without spaces, but this can be changed if needed.
 * If the identifier changes, it'll appear as if the options have been reset.
 */

function optionsframework_option_name() {

	// This gets the theme name from the stylesheet
	$themename = get_option( 'stylesheet' );
	$themename = preg_replace( "/W/", "_", strtolower( $themename ) );

	$optionsframework_settings = get_option( 'optionsframework' );
	$optionsframework_settings['id'] = $themename;
	update_option( 'optionsframework', $optionsframework_settings );
}

Now we can start adding our dropdown-menu options/choices.
Add another function:

function optionsframework_options() {

	// Slider Transition Settings
	$slider_transition_settings = array(
		'none' => __( 'None', 'wpt-slider' ),
		'fade' => __( 'Fade', 'wpt-slider' ),
		'scrollLeft' => __( 'Scroll Left', 'wpt-slider' ),
		'scrollRight' => __( 'Scroll Right', 'wpt-slider' ),
		'scrollDown' => __( 'Scroll Down', 'wpt-slider' ),
		'scrollUp' => __( 'Scroll Up', 'wpt-slider' ),
		'cover' => __( 'Cover', 'wpt-slider' ),
		
		'blindX' => __( 'Slide in from the Right', 'wpt-slider' ),
		'blindY' => __( 'Slide in from the Bottom', 'wpt-slider' ),
		'blindZ' => __( 'Slide in from the Bottom Right', 'wpt-slider' ),
		
		'uncover' => __( 'Uncover', 'wpt-slider' ),
		'wipe' => __( 'Wipe', 'wpt-slider' )
	);
	
	// Sets the time between slides
	$slider_timer_settings = array(
		'4500' => __( '4.5', 'wpt-slider' ),
		'5000' => __( '5.0', 'wpt-slider' ), 
		'5500' => __( '5.5', 'wpt-slider' ),
		'6000' => __( '6.0', 'wpt-slider' ),
		'6500' => __( '6.5', 'wpt-slider' ),
		'7000' => __( '7.0', 'wpt-slider' ),
		'7500' => __( '7.5', 'wpt-slider' ),
		'8000' => __( '8.0', 'wpt-slider' ), 
		'8500' => __( '8.5', 'wpt-slider' ),
		'9000' => __( '9.0', 'wpt-slider' ),
		'9500' => __( '9.5', 'wpt-slider' ), 
		'1000' => __( '10.0', 'wpt-slider' )
	);
	
	//Easing options, I've only added a few, but think it's enough, we don't want to be overwhelmed.
	$slider_easing_settings = array(
		'easeInOutSine' => __('easeInOutSine', 'wpt-slider'),
		'easeInBack' => __('easeInBack', 'wpt-slider'),
		'easeOutBack' => __('easeOutBack', 'wpt-slider'),
		'easeInOutQuint' => __('easeInOutQuint', 'wpt-slider'),
		'easeOutQuart' => __('easeOutQuart', 'wpt-slider'),
		'easeOutExpo' => __('easeOutExpo', 'wpt-slider'),
		'easeOutCirc' => __('easeOutCirc', 'wpt-slider')
	);
	
	//Speed that the slide animates in.
	$slider_speed_settings = array(
		'600'  => __('0.6', 'wpt-slider'),
		'800'  => __('0.8', 'wpt-slider'),
		'1000' => __('1.0', 'wpt-slider'),
		'1200' => __('1.2', 'wpt-slider'),
		'1400' => __('1.4', 'wpt-slider'),
		'1600' => __('1.6', 'wpt-slider'),
		'1800' => __('1.8', 'wpt-slider'),
		'2000' => __('2.0', 'wpt-slider'),
		'2200' => __('2.2', 'wpt-slider'),
		'2400' => __('2.4', 'wpt-slider')
	);

Next we need to include the setting page select menu items, enable the dropdown lists, add descriptions and include the id’s they’ll use to grab the selected dropdown item we created above.

			$options[] = array(
				//Add a title for our options tab
				'name' => __( 'Slider Settings', 'wpt-slider' ),
				'type' => 'heading' );
				
					//Effect options
					$options[] = array(
					'name' => __( 'Slide Effects', 'wpt-slider' ),
					'desc' => __( 'Choose the effect you‘d like to use for the homepage slider.', 'wpt-slider' ),
					'id' => 'slider_transition',
					//std = Sets a standard option
					'std' => 'cover',
					'type' => 'select',
					'options' => $slider_transition_settings 
					);
		
					//Time between slides options
					$options[] = array(
					'name' => __( 'Pause Between Slides', 'wpt-slider' ),
					'desc' => __( 'Set the time delay between the slides in Seconds.', 'wpt-slider' ),
					'id' => 'slider_interval',
					'std' => 8000,
					'type' => 'select',
					'options' => $slider_timer_settings 
					);
					
					//Easing dropdown
					$options[] = array(
					'name' => __( 'Animation Easing', 'wpt-slider' ),
					'desc' => __( 'Easing offers a way for you too smooth the animation, in return making it look more natural.', 'wpt-slider' ),
					'id' => 'easing_effect',
					'std' => 'easeOutExpo',
					'type' => 'select',
					'options' => $slider_easing_settings 
					);
					
					//Speed dropdown
					$options[] = array(
					'name' => __( 'Set the Speed the Slide Enters', 'wpt-slider' ),
					'desc' => __( 'Choose your speed for the slides to animate in.', 'wpt-slider' ),
					'id' => 'slider_speed',
					'std' => 1800,
					'type' => 'select',
					'options' => $slider_speed_settings 
					);
					
					//Positioning options ie. the promotion-slider.png
					$options[] = array(
					'name' => __( 'The text can be disabled or positioned individualy with each slide', 'wpt-slider' ),
					'desc' => __( 'When you edit your slides, you will see 3 available positions and also a disable button.', 'wpt-slider' ),
					);
				
	//Returns all the above options
	return $options;
}

Save the document!

Open your functions.php and add the following to include the options framework:

theme/functions.php

      // Re-define the options-framework URL
define( 'OPTIONS_FRAMEWORK_URL', get_template_directory_uri() . '/inc/options-framework/' );

// Load the Options Framework Plugin
if ( !function_exists( 'optionsframework_init' ) ) {
    define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory() . '/inc/options-framework/' );
    require_once OPTIONS_FRAMEWORK_DIRECTORY . 'options-framework.php';
}

Display the Slider

Finally all you need to do is call this on your index.php or home.php depending on your theme:

theme/index.php

	<?php new_wpt_slider(); ?>

Now go create a slide…

Boom! New Slider.