Create a Loop of Featured Images in a Slider from Posts in Genesis

You can create a slider of Featured Images from the posts in Genesis by creating a custom loop and using Slick Slider.

Setting Up Slick Slider

First download and set up the Slick files needed, you’ll need to file these in your theme’s js and css directories:

• slick.min.js ~> js
• slick-theme.css ~>css
• ajax-loader.gif ~>css
• fonts/ ~>css

Also create the file that initiates the slick script…

• slick-init.js ~>js

Add to slick-init.js

This will allow the containing element of the slider .featured-image-slider to be targetted by the Slick Carousel Slider.

Setting Up a Genesis Page Template

In my case I want the slider on a page, so you can make a custom page template by just creating a file and naming it page-[slug].php replacing [slug] with the actual slug. The code for this template is from Bill Erickson’s custom loop code. Add in the below to the new page template…

Changing the Loop to include the Featured Images

So in the above I have added additional arguments to the new WP_Query, more of which are found here. Also adjusted is the loop content to include the  permalink to the actual post wrapped around the featured image and title – be sure to set the specific size of the image you want for the slider you can add an extra one with add_image_size

In the demo at the top of the page I am using one of the default sizes ‘thumbnail‘.