Wordpress Custom Post Type Slider

For my example I'm going to show a basic slider which can be displayed on the home page template.

Inside functions.php

/* Being custom post types */
add_action('init', 'slideshow_register');

function slideshow_register() {

 $labels = array(
 'name' => _x('Slideshow', 'post type general name'),
 'singular_name' => _x('Slideshow Item', 'post type singular name'),
 'add_new' => _x('Add New', 'slideshow item'),
 'add_new_item' => __('Add New Slideshow Item'),
 'edit_item' => __('Edit Slideshow Item'),
 'new_item' => __('New Slideshow Item'),
 'view_item' => __('View Slideshow Item'),
 'search_items' => __('Search Slideshow'),
 'not_found' => __('Nothing found'),
 'not_found_in_trash' => __('Nothing found in Trash'),
 'parent_item_colon' => ''
 );

 $args = array(
 'labels' => $labels,
 'public' => true,
 'publicly_queryable' => true,
 'show_ui' => true,
 'query_var' => true,
 'rewrite' => true,
 'capability_type' => 'post',
 'hierarchical' => false,
 'menu_position' => null,
 'supports' => array('title','thumbnail'),
 'rewrite' => array('slug' => 'slideshow', 'with_front' => FALSE)
 ); 

 register_post_type( 'slideshow' , $args );
}


add_action("admin_init", "admin_init");

function admin_init(){
 add_meta_box("url-meta", "Slider Options", "url_meta", "slideshow", "side", "low");
}

function url_meta(){
 global $post;
 $custom = get_post_custom($post->ID);
 $url = $custom["url"][0];
 $url_open = $custom["url_open"][0];
 ?>
 <label>URL:</label>
 <input name="url" value="<?php echo $url; ?>" /><br />
 <input type="checkbox" name="url_open"<?php if($url_open == "on"): echo " checked"; endif ?>>URL open in new window?<br />
 <?php
}

add_action('save_post', 'save_details');
function save_details(){
 global $post;

 if( $post->post_type == "slideshow" ) {
 if(!isset($_POST["url"])):
 return $post;
 endif;
 if($_POST["url_open"] == "on") {
 $url_open_checked = "on";
 } else {
 $url_open_checked = "off";
 }
 update_post_meta($post->ID, "url", $_POST["url"]);
 update_post_meta($post->ID, "url_open", $url_open_checked);
 }

}

function wp_rpt_activation_hook() {
 if(function_exists('add_theme_support')) {
 add_theme_support( 'post-thumbnails', array( 'slideshow' ) ); // Add it for posts
 }
 add_image_size('slider', 554, 414, true);
}
add_action('after_setup_theme', 'wp_rpt_activation_hook');

// Array of custom image sizes to add
$my_image_sizes = array(
 array( 'name'=>'slider', 'width'=>554, 'height'=>414, 'crop'=>true ),
);

// For each new image size, run add_image_size() and update_option() to add the necesary info.
// update_option() is good because it only updates the database if the value has changed. It also adds the option if it doesn't exist
foreach ( $my_image_sizes as $my_image_size ){
 add_image_size( $my_image_size['name'], $my_image_size['width'], $my_image_size['height'], $my_image_size['crop'] );
 update_option( $my_image_size['name']."_size_w", $my_image_size['width'] );
 update_option( $my_image_size['name']."_size_h", $my_image_size['height'] );
 update_option( $my_image_size['name']."_crop", $my_image_size['crop'] );
}

// Hook into the 'intermediate_image_sizes' filter used by image-edit.php.
// This adds the custom sizes into the array of sizes it uses when editing/saving images.
add_filter( 'intermediate_image_sizes', 'my_add_image_sizes' );
function my_add_image_sizes( $sizes ){
 global $my_image_sizes;
 foreach ( $my_image_sizes as $my_image_size ){
 $sizes[] = $my_image_size['name'];
 }
 return $sizes;
}

/* End custom post types */

Inside index-home.php

<?php
/*
Template Name: Home Template
*/
?><?php get_header(); ?>
<div id="container">

 <div id="slider">
 <?php 
 $temp = $wp_query;
 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 $post_per_page = 100; // -1 shows all posts
 $args=array(
 'post_type' => 'slideshow',
 'orderby' => 'date',
 'order' => 'ASC',
 'paged' => $paged,
 'posts_per_page' => $post_per_page
 );
 $wp_query = new WP_Query($args); 

 if( have_posts() ) : while ($wp_query->have_posts()) : $wp_query->the_post();
 $custom = get_post_custom($post->ID);
 $url = $custom["url"][0]; 
 $url_open = $custom["url_open"][0];
 $custom_title = "#".$post->ID;
 ?>
 <?php if ($url != "") { ?>
 <a href="<?php echo $url; ?>"<?php if ($url_open == "on") echo " target='_blank'"; ?>><?php the_post_thumbnail('slider', array('alt' => '', 'title' => '' )); ?></a>
 <?php } else { ?>
 <?php the_post_thumbnail('slider', array('alt' => '', 'title' => '' )); ?> 
 <?php }?>

 <?php endwhile; else: ?>
 <?php endif; wp_reset_query(); $wp_query = $temp ?>
 </div>

 <div id="mainbar">

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <?php the_content(); ?>
 <?php endwhile; else: ?>
 <h2>Page not found</h2>
 <?php endif; ?>

 </div>

</div>

<?php get_footer(); ?> 

Inside js/functions.js

jQuery(document).ready(function($){
 $('#slider').nivoSlider({
 effect: 'fade',
 pauseTime: 7000
 });
});

Inside header.php or footer.php depending on where you put the JS you just need to link to the proper JS code. In my example I'm using <a href="NivoSlider" rel="nofollow">http://nivo.dev7studios.com/">NivoSlider</a>.