neilgee
11/27/2015 - 8:01 AM

Genesis Featured Image Loop Slider with Slick

Genesis Featured Image Loop Slider with Slick

//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,
	})
});
<?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();
<?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();