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.
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' ); |
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' ); |
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:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.