How To Build A Slider Using Custom Post Types

How To Build A Slider Using Custom Post Types

This tutorial I will show you how to create your very own custom image slider using custom post types. Certainly, there are many WordPress plugins that can be used to make a slider such as vSlider, Front Slider, SlideDeck and a zillion others, but for the purpose of this exercise, we are going to build one using a custom post type.

View Live DemoDownload

And so, without further ado, let me show you how to make a featured slider using a custom post type.

Step 1 Create your custom post type (CPT)

If you don't already know something about CPT don't worry about it. This tutorial assumes no previous knowledge of custom post types, PHP or CSS. However, you should at least be able to cut and paste and whatnot. Very quickly, custom post types are an integral part of wordpress and in layman's terms think of it like this, they provide a way to create, edit, and store information in the same way as pages do.

Custom post types can easily be added to any theme by updating our functions.php file.

You can access and edit the functions.php either via cPanel or simply through WordPress.

To make our first custom post type, lets update our functions.php file. Copy the following code, then paste it onto your functions.php file immediately before the closing ?> tag.

/* My First Custom Post Type */

function my_post_type_slider() {
	register_post_type( 'slider',
                array( 
				'label' => __('Slides'), 
				'singular_label' => __('Slide', 'my_framework'),
				'_builtin' => false,
				'exclude_from_search' => true, // Exclude from Search Results
				'capability_type' => 'page',
				'public' => true, 
				'show_ui' => true,
				'show_in_nav_menus' => false,
				'rewrite' => array(
					'slug' => 'slide-view',
					'with_front' => FALSE,
				),
				'query_var' => "slide", // This goes to the WP_Query schema
				'menu_icon' => get_template_directory_uri() . '/inc/images/slides.png',
				'supports' => array(
						'title',
						'custom-fields',
						'editor',
            					'thumbnail')
					) 
				);
}

add_action('init', 'my_post_type_slider');

add_action( 'init', 'mytheme_setup' );
add_theme_support( 'post-thumbnails' );
function mytheme_setup() {
add_image_size( 'slider-post-thumbnail', 1000, 407, true ); // Slider Thumbnail
}

What d heck?! That's a lot of strange stuff, but as I said, You don't need to know any code, you just need to do as I say. Once you update that functions file, that should be it. Now when you go to your wordpress dashboard a new tab called Slides will appear as part of your sidebar.

The look you make when you get the first part of the tutorial to work.

Step 2: Creating a slider post (slide)

Now that your CPT is ready, you can start setting up your slides. Go ahead and add as many as you like by:

Log in to your WordPress Administration Panel (Dashboard).
Click the Slides tab
And now click the Add New tab
Fill in all the required fields (title)
Upload your image with the help of the Featured Image option (click the Set featured image link)
You can use the following custom fields for your slider:
slider-url - link for the slider image.
And click the Publish button

For the purpose of this demo, I’ve set my image slider to be 1000px x 407px.

Step 3 Download the World's most awesome Slider

Now you're ready to upload the JavaScript file that make up the slider. As I mentioned in the outset, there is a million zillion sliders out there, but my favorite is jQuery NivoSlider. NivoSlider is the slider that I am using for this tutorial. So go on and download that now. For full specifications visit the official website http://nivo.dev7studios.com

Next open up your download and find files jquery.nivo.slider.js & jquery-1.7.1.min.js and upload them to your twentyeleven 'js' folder found here /wp-content/themes/twentyeleven/js/.

Step 4 - Load your scripts properly

If you're like me you're stating to get a little antsy to get this done, you're probably saying, "I'll just put that directly onto my header."

Get a hold of yourself man!

The right way to include javascripts in your theme isn’t by putting links like this in theof your header.php:

<script type="text/javascript" src="yourscript.js"></script>

The right way to do it is to enqueue the scripts in your functions.php file. Copy the following code, then paste it onto your functions.php file immediately before the closing ?> tag.

/* Enqueue Slider */

function foamers_init_method() {
    wp_deregister_script('jquery');
		wp_register_script('jquery', get_bloginfo('template_url').'/js/jquery-1.6.4.min.js', false, '1.6.4');
		wp_enqueue_script('jquery');
		wp_enqueue_script('nivo', get_bloginfo('template_url').'/js/jquery.nivo.slider.js', array('jquery'), '3.1');

}
add_action('wp_enqueue_scripts', foamers_init_method');

Step 5 How to display your CPT

Now that we've added the scripts that will power our slider, we need a way to display our slider visually. Create a new file (call it slider.php) and put it in your theme's root directory. Copy the following code and paste it into your file.

<div id="slider" class="nivoSlider">
  <?php $posts_counter = 0; ?>
  <?php
		query_posts("post_type=slider&posts_per_page=-1&post_status=publish");
		while ( have_posts() ) : the_post(); $posts_counter++;
	?>
  <?php
		$custom = get_post_custom($post->ID);
		$url = get_post_custom_values("slider-url");
		$sl_thumb = $custom["thumb"][0];
		$sl_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'slider-post-thumbnail');
		$tab_title = get_post_custom_values("tab-title");
	?>
  <?php if(has_post_thumbnail( $the_ID) || $sl_thumb!=""){ ?>

		<?php if($url!=""){ ?>
    <?php if($sl_thumb!=""){
					echo "<a href='" . $url[0] . "'>";
					echo "<img src='" . $sl_thumb . "' alt='";
					echo $tab_title[0];
					echo "' title='#sliderCaption" . $posts_counter . "' />";
										echo "</a>";
								} else{
										echo "<a href='" . $url[0] . "'>";
					echo "<img src='";
					echo $sl_image_url[0];
										echo "' alt='";
					echo $tab_title[0];
					echo "' title='#sliderCaption" . $posts_counter . "' />";
										echo "</a>";
								} ?>
    <?php }else{ ?>
    <?php if($sl_thumb!=""){
					echo "<img src='" . $sl_thumb . "' alt='";
					echo $tab_title[0];
					echo "' title='#sliderCaption" . $posts_counter . "' />";
								} else{
					echo "<img src='";
					echo $sl_image_url[0];
										echo "' alt='";
					echo $tab_title[0];
					echo "' title='#sliderCaption" . $posts_counter . "' />";
								} ?>
    <?php } ?>

  <?php } ?>
  <?php endwhile; ?>
  <?php wp_reset_query();?>
</div>
<?php $posts_counter = 0; ?>
<?php
	query_posts("post_type=slider&posts_per_page=-1&post_status=publish");
	while ( have_posts() ) : the_post(); $posts_counter++;
?>
<?php
	$custom = get_post_custom($post->ID);
?>
<div id="sliderCaption<?php echo $posts_counter ?>" class="nivo-html-caption">
  <?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php wp_reset_query();?>

Step 6 update your header.php

In order for this to work there are a couple of more steps you need to follow. Copy the following code, then paste it onto your header.php file immediately before the closing </head> tag

<script type="text/javascript">
		jQuery(window).load(function() {
			// nivoslider init
			jQuery('#slider').nivoSlider({
				effect: 'fold',
				slices:15,
				boxCols:8,
				boxRows:8,
				animSpeed:500,
				pauseTime:3500,
				startSlide:1,
				directionNav:true,
				directionNavHide:false,
				controlNav:false,
				captionOpacity:10			});
		});
	</script>

Next, while you still have header.php file opened, copy the following code, then paste it where ever you would like your slider to be. You'll notice too, that this entire code snippet is wrapped around a conditional tag, so that the slider only displays on the home page.

<div id="main">
	 <?php if(is_front_page()):?> 
	<?php include_once(TEMPLATEPATH . '/slider.php'); ?>
	<?php endif; ?>

The last and final step:

To finish the slider off we'll add a dash of CSS. Open your theme's style.css and paste this at the bottom.

/*Featured Slider */
#slider-wrapper {
	position:relative;
	width:100%;
	height:491px;
	overflow:hidden;
}
#slider {
	background:url(images/loading.gif) no-repeat 50% 50%;
	position:relative;
	width:1000px;
	height:491px;
	margin-top:-31px;
}
#slider img {
	position:absolute;
	top:0;
	left:0;
	display:none;
}
#slider a {
	border:0;
	display:block;
}
#slider .featured-vid {
	position:absolute;
	top:-135px;
	left:185px;
	z-index:90;
}
.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0;
	left:0;
}
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:60;
	display:none;
}
.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}
.nivo-caption {
	width:490px;
	color:#202020;
	position:absolute;
	top:201px;
	left:100px;
	z-index:89;
}
.nivo-caption .nivo-caption-inner {
	padding:0;
	margin:0;
}
.nivo-caption a {
	background:url(images/link.png) no-repeat 0 0;
	display:inline-block!important;
	width:50px;
	height:50px;
	overflow:hidden;
	line-height:50px;
	font-size:12px;
	text-align:center;
	text-transform:uppercase;
	text-decoration:none;
	color:#000;
}
.nivo-caption a:hover {
	background-position:0 -50px;
}
.nivo-html-caption {
	display:none;
}
.nivo-directionNav a {
	position:absolute;
	top:0;
	z-index:99;
	cursor:pointer;
}
.nivo-prevNav {
	left:0;
}
.nivo-nextNav {
	right:0;
}
.nivo-controlNav {
	width:1000px;
	height:9px;
	overflow:hidden;
	position:absolute;
	top:730px;
	left:25%;
}
.nivo-controlNav a {
	background:url(images/pagination.png) no-repeat 0 0;
	display:inline-block!important;
	position:relative;
	width:9px;
	height:9px;
	margin:0 11px 0 0;
	padding:0;
	overflow:hidden;
	vertical-align:top;
	line-height:0;
	font-size:0;
	text-decoration:none;
	cursor:pointer;
	z-index:99;
}
.nivo-controlNav a.active, .nivo-controlNav a:hover {
	background-position:0 -9px;
}
.nivo-directionNav a {
	position:absolute;
	display:block;
	width:36px;
	height:35px;
	text-indent:-9999px;
	border:0;
	top:230px;
	background:url(images/direction_nav.png) no-repeat 0 0;
}
a.nivo-nextNav {
	right:10px;
	background-position:-36px 0;
}
a.nivo-nextNav:hover {
	background-position:-36px -35px;
}
a.nivo-prevNav {
	left:10px;
	background-position:0 0;
}
a.nivo-prevNav:hover {
	background-position:0 -35px;
}
#slider .nivo-controlNav img {
	display:inline;
	position:relative;
	margin-right:10px;
	width:120px;
	height:auto;
}

And there you have it. A simple and easy to use custom featured slider. Also, if you didn't catch it or if I didn't mention already, Twenty Eleven was the theme used thorough the demo. I’ve provided you with the files for the theme and also the images that I’ve used for the slider. Feel free to download them, have fun and let me know how it goes.

Did you like this post? Here is what you need to do next:

Subscribe it's FREE