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:
Sridhar, another fantastic tutorial.
Easiest slider around.
Thanks!
This is just what I needed! Can this be used in multiple gallery pages too?
Can you elaborate? Are you asking if it’s possible to display the same slider (showing the same images) on several inner static Pages along with homepage?
I meant showing different sliders on different static pages.
Possible. You can create a custom taxonomy and write the code such that based on the current Page, slide data of that particular Page-specific custom taxonomy term is used.
The other easy alternative, in case you do not want to write code, is to use a slider plugin like Soliloquy Pro.
would it be possible to call multiple custom posts and show them in a grid? lets say 6 x4.and use the slider to get more posts?
I tried to follow this tutorial, but the source files are either non-existent or completely different than the ones that are referenced here 🙁
I have just tested this by downloading the latest version of Slick from https://github.com/kenwheeler/slick/archive/1.6.0.zip. Extracted the zip file, went inside “slick” folder and can see all the files just fine.
http://d.pr/i/15moB
Sorry, I meant to say the core functions found on github. The files don’t match those mentioned in the tutorial. The author must’ve updated the files.
Can you elaborate?