Custom slider for Genesis using Slick

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:

1. Register a “Slides” Custom Post Type
2. Build the slider template
3. Enqueue the Slick resources
4. 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.

Notes
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.

Notes
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

Next, we’ll need to enqueue the Slick resources in our themes. The two pieces we’ll need to enqueue are the Slick javascript file as well as the base css file. Finally, create a general javascript file where you’ll be able to apply the slick code to our slider template that we’ve created.

Notes
This is the most generic approach and should work no matter what your workflow happens to be. However, for example, if you are currently utilizing Sass or LESS in your theme you could take the associated files from the repository and add them as partials in your current set up. That way the styles can be compiled into your main CSS file and prevents you from having to enqueue an additional style file. The same can be done with the javascript file if you currently minify and concatenate your javascript files into a single file to be enqueued.

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

The final step is to apply the Slick slider to our slider template and bring the slider to life in our theme. The following snippet should be added to the general javascript file for your theme (the home-init.js from the above snippet).

Notes
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.