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

//Further configuration - http://kenwheeler.github.io/slick/
jQuery(document).ready(function($){
$('.featured-image-slider').slick({ //add CSS class of target
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
})
});
view raw slick-init.js hosted with ❤ by GitHub

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…

<?php
/**
* Genesis custom loop
*/
function be_custom_loop() {
global $post;
// arguments, adjust as needed
$args = array(
'post_type' => 'post',
'posts_per_page' => 1,
'post_status' => 'publish',
'paged' => get_query_var( 'paged' )
);
// Use $loop, a custom variable we made up, so it doesn't overwrite anything
$loop = new WP_Query( $args );
// have_posts() is a wrapper function for $wp_query->have_posts(). Since we
// don't want to use $wp_query, use our custom variable instead.
if ( $loop->have_posts() ) :
echo '<ul>';
while ( $loop->have_posts() ) : $loop->the_post();
echo '<li>' . get_the_title() . '</li>';
endwhile;
echo '</ul>';
do_action( 'genesis_after_endwhile' );
endif;
// We only need to reset the $post variable. If we overwrote $wp_query,
// we'd need to use wp_reset_query() which does both.
wp_reset_postdata();
}
add_action( 'genesis_loop', 'be_custom_loop' );
remove_action( 'genesis_loop', 'genesis_do_loop' );
genesis();
view raw page-slug.php hosted with ❤ by GitHub

Changing the Loop to include the Featured Images

<?php
/**
* Genesis custom loop
*/
function be_custom_loop() {
global $post;
// arguments, adjust as needed
$args = array(
'post_type' => 'post',
'posts_per_page' => -1,
'post_status' => 'publish',
'paged' => get_query_var( 'paged' ),
'category__not_in' => array(37,38),//removing some Categories I don't want in the slider
);
// Use $loop, a custom variable we made up, so it doesn't overwrite anything
$loop = new WP_Query( $args );
// have_posts() is a wrapper function for $wp_query->have_posts(). Since we
// don't want to use $wp_query, use our custom variable instead.
if ( $loop->have_posts() ) :
echo '<div class="featured-image-slider">'; //adding in my containing div and Slick target
while ( $loop->have_posts() ) : $loop->the_post();
echo '<a href="' . get_the_permalink() . '"><div>'; //add in the link to the post
the_post_thumbnail( 'thumbnail' );//add in the featured image at a specific size
echo '<h5>' . get_the_title() . '</h5></div></a>';//add in the title of the post
endwhile;
echo '</div>';
do_action( 'genesis_after_endwhile' );
endif;
// We only need to reset the $post variable. If we overwrote $wp_query,
// we'd need to use wp_reset_query() which does both.
wp_reset_postdata();
}
add_action( 'genesis_after_loop', 'be_custom_loop' ); //position the loop
//remove_action( 'genesis_loop', 'genesis_do_loop' ); // this line is commented as I am leaving the genesis loop in place
genesis();

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

Leave a Comment





%d bloggers like this: