The Slick slider is a fully accessible and responsive slider that is easy to customize and perfect for use when your designs require a slider or carousel. Check out the demos to see the options available.
Adding the slider to your Genesis theme can be done in a couple of quick steps. When adding a slider to my child themes, I use the following steps:
- Register a “Slides” Custom Post Type
- Build the slider template
- Enqueue the Slick resources
- Pull it all together
Register Slide Custom Post Type
I like using custom post types and templates for managing content within themes. From my personal experience with helping clients to manage their sites, this approach has always been more intuitive and easier to manage than trying to control everything via widget areas.
You’ll notice above that I’ve decided not to make this post type public. In simplest terms I’m doing this so that there won’t be single slide pages on the front end for the slides that I make. I want the slides to be accessible to visitors only where I chose to place my slider.
You may not want to take this approach. You may want to have a slider that features the same type of content. If so, you can make the post type public and link directly to the single posts of your slider.
Making the slider template
Now that we have a new post type to house all the content for our slides, we can use a new WP_Query to get that information and put it into a format that is ready to become our slider.
This is a basic starting point that I use for the majority of sites which I add to the front-page.php template. The slides can and should be customized to pull any type of content that you would like. This example uses the_content() but for usability you could create custom fields to output here depending on the design.
Also, the slide image is pulling the featured image at the “home-slider” size. This is an image size that is added via add_image_size() function and can be customized to meet the needs of your design.
Enqueue the Slick resources
Also, the code above is wrapped in a conditional to ensure the resources are only enqueued on the page that they’re intended to be used, the front page. If you would like to use the slider on all pages or on a different page, you can easily modify the conditional within the above snippet to meet your needs.
Pulling it all together
Your slider should be ready to go! Just create some posts in your “Slide” custom post type and they will show up in your slider. Once you’ve got it working, you can modify this above snippet to meet the needs of your design. Check out all examples and associated snippets to see how to further control your slider.