Displaying Custom Post Type entries as a Slider using Slick in Genesis

On a site that I am currently working on, the client asked

Sridhar, I want a slider that looks like Soliloquy but not using Soliloquy. My users need a simple Posts like editing interface where they can specify the title, caption text and upload the image for each slide. Is this possible?

And the answer is yes. In this tutorial I show how the latest x number of entries of a Slides CPT can be pulled and shown in the form of a slider using Slick jQuery script below header on front page in Genesis.

For each slide, title and content will be set to appear in a dark overlay caption at the bottom on top of the entry's Featured image.

Live Demo

Step 1

Install and activate Bill Erickson's Core Functionality plugin.

Edit wp-content/plugins/Core-Functionality/lib/functions/post-types.php.

Replace the default code for registering rotator CPT with

	/**
	* Create Slide post type
	* @since 1.0.0
	* @link http://codex.wordpress.org/Function_Reference/register_post_type
	*/
	function sk_register_slide_post_type() {
	$labels = array(
	'name' => 'Slides',
	'singular_name' => 'Slide',
	'add_new' => 'Add New',
	'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' => 'Slides'
	);
	$args = array(
	'labels' => $labels,
	'public' => true,
	'publicly_queryable' => true,
	'show_ui' => true,
	'show_in_menu' => true,
	'query_var' => true,
	'rewrite' => true,
	'capability_type' => 'post',
	'has_archive' => false,
	'hierarchical' => false,
	'menu_position' => null,
	'supports' => array( 'title','editor','thumbnail' )
	);
	register_post_type( 'slide', $args );
	}
	add_action( 'init', 'sk_register_slide_post_type' );

view raw post-types.php hosted with by GitHub

Edit wp-content/plugins/Core-Functionality/plugin.php and remove the comment for the line that calls post-types.php like so:

include_once( BE_DIR . '/lib/functions/post-types.php' );

view raw plugin.php hosted with by GitHub

Step 2

Download Slick and extract the zip file.

Upload slick.min.js to child theme directory/js.

Upload fonts folder, ajax-loader.gif, slick.css and slick-theme.css to child theme directory/css.

Create a file named say, slick-init.js child theme directory/js having the following code: