WordPress Slideshow Custom Post Type Using EZ Slider

This tutorial will show you how to make a custom post type in WordPress to be used in the ever popular “slider”. A slider, for ya’ll laymen, is typically a bunch of images and/or text, videos, etc. that occupy the same given space on a website, and flip through from one to the next kind of like a slideshow. Some have fancier controls than others.

For the purposes of this tutorial, we’ll be working with Alan Grakalic’s EZ Slider 1.7 framework, as it’s my personal favorite. There are no limits to the types of content you can have in each slide, and it’s as flexible as I’ve ever needed a slider to be. It comes with a handful of customizations, and any of them should work with this tutorial.

DEMO

Creating the Custom Post Type

You can get wonderfully complicated creating post types, and feel free to learn more about them straight from the WP-horses mouth, or from my favorite WP Journalist, Justin Tadlock. I like to keep things simple, so here’s our code snippet. Just select, copy and paste into your theme’s functions.php file.


add_action( 'init', 'create_post_type' );
function create_post_type() {
	register_post_type( 'cn_slideshow',
		array(
			'labels' => array(
				'name' => __( 'Slides' ),
				'singular_name' => __( 'Slide' )
			),
		'public' => true,
		'supports' => array( 'title', 'editor', 'custom-fields', 'thumbnail' ),
		)
	);
}

I’ve highlighted a few bits of that code (using HTML5’s new <mark> tag, FYI). Let’s review those quickly.

cn_slideshow
This is the name of our post type for development purposes (such as calling this particular post type via WP_Query, as explained below). There are a handful of names you can’t use, so I just prefix all of mine with “cn_”.
Slides
Slide
Here we have the name of the post type as it will appear to users in the WP Admin navigation area, both singular and plural.
‘title’, ‘editor’, ‘custom-fields’, ‘thumbnail’
This is where we set which user interface elements will be displayed in the Add New / Edit Slide screen of WP Admin. Title is the main title field. Editor the content editor. We’ll talk more about custom fields below, and thumbnail refers to Featured Images / Post Thumbnails.

The Final Result

Once you’ve got your custom post type created, take a look in WP Admin. You should see the Slides navigation menu item just below Comments.

screenshot of the WordPress Admin area, highlighting the custom post type Slides editor

You’ll probably want to go ahead and create a few posts so you’ll have something to work with in the following sections.

Optional: Custom Fields Integration

This is completely optional, but I often create at least one or two custom fields for my slides, as sliders typically have a “call to action” button, or you can simply click on the entire slide and it takes you somewhere.

Getting into how to use custom fields is more lengthy a discussion than this particular tutorial cares to venture into, but you can start with the basics here, or have an even easier time of it all using Steve Taylor’s code (now available as a plugin, though I prefer the functions.php route.). I’ll typically create one custom field for the link URL and one for the link’s text, or call to action. For ease of following along throughout the rest of this tutorial, we’ll say those custom field key values (referred to as “Name” in the WP Admin area) are cn_link and cn_text.

Creating the WP Query Loop

Now that we’ve got the custom post type created and a few slides to use on our site, let’s do just that. Here’s our code, which is essentially a WP Loop, and can be used just about anywhere on your site you’d see fit. Note that the same code utilizing the custom fields above is coming next.


<section id="slider">					
	<ul>
	<?php $my_query = new WP_Query('post_type=cn_slideshowposts_per_page=3');
	      while ($my_query->have_posts()) : $my_query->the_post(); ?>  
		<li>
			<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>
			<h2><?php the_title(); ?></h2>		
			<?php the_content(); ?>
		</li>	
	<?php endwhile; ?> 	
	</ul>
</section>

And an explanation of what some of that means.

WP_Query
A class used by WordPress, essentially, to get a Loop going. Learn all about it here.
post_type=cn_slideshow
This defines what type of posts to return, in this case, our custom post type.
posts_per_page=3
Here we’re telling WordPress to retrieve just the most recent 3 slides. You can omit this if you’d like, and WP will use whatever number you’ve got set in Settings > Reading, but I personally think keeping it down to a few is more effective.
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(‘full’); } ?>
This checks if there’s a Post Thumbnail / Featured Image and if there is one, displays it.

For anyone using the custom fields I mentioned above, here is the same code with those fields integrated.


<section id="slider">					
	<ul>
	<?php $my_query = new WP_Query('post_type=cn_slideshow&posts_per_page=3');
	      while ($my_query->have_posts()) : $my_query->the_post();
	      $slidelink = get_post_meta($post->ID, cn_link, true);
	      $slidetext = get_post_meta($post->ID, cn_text, true); ?> 
			<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>
			<h2><?php the_title(); ?></h2>		
			<?php the_content(); ?>
			<?php if ($slidelink != '') { ?>
			<p class="callto"><a href="<?php echo $slidelink; ?>"><?php if ($slidetext != '') { echo $slidetext; } else { ?>Learn More →<?php } ?></a></p>
			<?php } ?>
		</li>	
	<?php endwhile; ?> 	
	</ul>
</section>

Let’s review those additions.

$slidelink = get_post_meta($post->ID, cn_link, true);
Here we grab the custom field value for the link we set up earlier, and assign it to a variable.
$slidetext = get_post_meta($post->ID, cn_text, true); ?>
Here we get the value of the text / call to action’s custom field, and set it as a variable.
<?php if ($slidelink != ”) { ?>
This checks to see if the link custom field has any data. If it doesn’t, there’s no point in showing the button we’ll be creating at all, since it would just be a broken link.
<?php echo $slidelink; ?>
This populates the link’s href property.
<?php if ($slidetext != ”) { echo $slidetext; } else { ?>Learn More →<?php } ?>
This checks if there is data for the call to action text, and if there is adds it to the button, if not, adds the default text of “Learn more →”

Installing EZ Slider

So now you’re all set up, but if you view the actual page you wanted to add the slider to, you’ll find that it’s a giant jumbled mess. Let’s finish up getting EZ Slider configured, and you’ll be wowing your visitors with the power of a slider in no time.

The jQuery Code

You could of course just follow along with the directions back on Alan’s EZ Slider post, but I’ll go through it here to help get you setup perfectly for the first time.

You’ll need to install his code, which involves:

  • Uploading the easySlider.js file to your theme’s folder.
  • I typically put it in a folder named js, with my other Javascript files.

Then add the following code to your site’s header.php.


<?php if (is_front_page()) { ?> <script src="https://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/easySlider.js"></script>
<script>
      jQuery(document).ready(function(){
      	jQuery("#slider").easySlider({
      		auto: true,              
      		continuous: true,              
      		controlsShow: true,            
      		pause: 5000,  
      		numeric: true,
      		numericId: 'controls'   
      	});      
      });      
</script><?php } ?>

Explanation to follow:

<?php if (is_front_page()) { ?>
I typically only use a slider on the homepage, so this is stating “if we’re on the homepage, do the following”. You can remove this and the closing php tag as well if you don’t want to enforce such a limit, or brush up on WordPress’ Conditional Tags if you want more options.
<script src=”https://jqueryjs.googlecode.com/files/jquery-1.3.js” type=”text/javascript”></script>
This adds a call to jQuery, hosted on by Google Code, to your site. WordPress comes with jQuery already loaded, however I’ve had trouble getting that to work nicely with EZ Slider, so I call it like this. Note that calling jQuery multiple times on your site can end up breaking jQuery functionality altogether, and at the very least adds additional page load. Hence me only calling this code on the pages that actually have the slider.
<script src=”<?php bloginfo(‘template_directory’); ?>/js/easySlider.js”></script>
Links to the easySlider.js file, assuming you’ve placed it in a folder named js your theme’s folder.
jQuery(“#slider”).easySlider({
This, and everything indented just below it, sets up the controls as I typically like them. Again, check out the original EZ Slider 1.7 post linked above to learn more about the plethora of options available to you.

Great, almost there!

The CSS

Finally, you’ll need to add some CSS to your site’s style.css file.

At a very minimum, you need the basics to make the slider functional:


#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider, #slider li{ 
	width:500px;
	height:200px;
	overflow:hidden; 
	}

Every piece of this code is necessary. Anything that wasn’t that came with the original EZ Slider has been stripped out. You’ll need to make two changes:

width:500px;
The width of your slide. We’ll be using 500px for this tutorial, which is what I’ve used in the demo.
height:200px;
The height of your slide. I’ve used 200px in the demo.

Here’s the full CSS that I’ve used in the demo, including the custom fields and controls.


#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider, #slider li{ 
	width:500px;
	height:200px;
	overflow:hidden; 
	}
	
#slider li {position:relative;}
#slider h2, #slider p {position:absolute; left:276px; width:225px;}
#slider h2 {top:20px; font-size:20px;}
#slider p {top:100px;}
#slider p.callto {top:157px; left:380px; width:108px; background:#ff7800; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
#slider a {color:white; padding:5px;}

a {text-decoration:none; color:#a5d30f;}

#controls {list-style:none; margin:10px 0; height:25px;}
#controls li {float:left; padding:0 10px;}

#footer {clear:both; margin:25px 0; font-size:12px;}