Controle deslizante de tipo de postagem personalizado WordPress

Para o meu exemplo, vou mostrar um controle deslizante básico que pode ser exibido no modelo da página inicial.

Dentro de 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 */

Dentro de 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(); ?>  

Dentro de js / functions.js

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

Dentro de header.php ou footer.php dependendo de onde você colocou o JS, você só precisa vincular ao código JS adequado. No meu exemplo, estou usando o <a href=” http://nivo.dev7studios.com/”> NivoSlider </a>.