Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active Aug 29, 2015
Embed
What would you like to do?
Displaying Custom Post Type entries as a Slider using Slick in Genesis. https://sridharkatakam.com/displaying-custom-post-type-entries-as-a-slider-using-slick-in-genesis/
//* Register custom image size for Home Slider
add_image_size( 'home-slide', 1600, 444, true );
//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'sk_load_scripts' );
function sk_load_scripts() {
// Load Dashicons
wp_enqueue_style( 'dashicons' );
// Load the following only on front page
if ( ! is_front_page() ) {
return;
}
wp_enqueue_style( 'slick-styles', get_stylesheet_directory_uri() . '/css/slick.css' );
wp_enqueue_style( 'slick-theme-styles', get_stylesheet_directory_uri() . '/css/slick-theme.css' );
wp_enqueue_script( 'slick-js', get_stylesheet_directory_uri() . '/js/slick.min.js', array( 'jquery' ), '1.4.1', true );
wp_enqueue_script( 'slick-init', get_stylesheet_directory_uri() . '/js/slick-init.js', array( 'slick-js' ), '1.0.0', true );
}
//* Display 5 latest slide CPT entries on front page after header
add_action( 'genesis_after_header', 'sk_home_slider' );
function sk_home_slider() {
if ( ! is_front_page() ) {
return;
}
// WP_Query arguments
$args = array (
'post_type' => 'slide',
'posts_per_page' => '5'
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
echo '<div class="home-slides">';
while ( $query->have_posts() ) {
$query->the_post();
// display slider
echo '<div class="home-slide">';
// image
$image = genesis_get_image( 'format=url&size=home-slide' );
printf( '<div class="slide-image"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
?>
<div class="home-slide-caption">
<div class="home-slide-excerpt">
<!-- title -->
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" class="slide-title"><?php the_title(); ?></a></h2>
<!-- content -->
<?php the_content(); ?>
</div>
</div>
</div>
<?php }
echo '</div>';
} else {
// no posts found
}
// Restore original Post Data
wp_reset_postdata();
}
include_once( BE_DIR . '/lib/functions/post-types.php' );
/**
* Create Slide post type
* @since 1.0.0
* @link http://codex.wordpress.org/Function_Reference/register_post_type
*/
function sk_register_slide_post_type() {
$labels = array(
'name' => 'Slides',
'singular_name' => 'Slide',
'add_new' => 'Add New',
'add_new_item' => 'Add New Slide',
'edit_item' => 'Edit Slide',
'new_item' => 'New Slide',
'view_item' => 'View Slide',
'search_items' => 'Search Slides',
'not_found' => 'No slides found',
'not_found_in_trash' => 'No slides found in trash',
'parent_item_colon' => '',
'menu_name' => 'Slides'
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'has_archive' => false,
'hierarchical' => false,
'menu_position' => null,
'supports' => array( 'title','editor','thumbnail' )
);
register_post_type( 'slide', $args );
}
add_action( 'init', 'sk_register_slide_post_type' );
jQuery(document).ready(function($) {
$('.home-slides').slick({
autoplay: true,
dots: true,
responsive: [
{
breakpoint: 611,
settings: {
adaptiveHeight: true,
}
},
]
});
});
/* Home Slider
--------------------------------------------- */
.home-slides {
margin-bottom: 0;
}
.home-slide {
position: relative;
}
.home-slide-caption {
position: absolute;
bottom: 0;
width: 100%;
z-index: 1120;
}
.home-slide-excerpt {
padding: 20px;
background: rgba(0,0,0,0.7);
color: #fff;
text-align: center;
}
.home-slide-excerpt h2 {
font-size: 30px;
}
.home-slide-excerpt h2 a {
color: #b6e43e;
}
@media only screen and (min-width: 1601px) {
.slide-image img {
width: 100%;
}
}
.home-slides .slick-prev,
.home-slides .slick-next {
background: rgba(0,0,0,0.6);
padding: 6px;
width: auto;
height: auto;
border-radius: 0;
}
.home-slides .slick-prev:hover,
.home-slides .slick-next:hover {
background: #fc8527;
}
.home-slides .slick-prev:before,
.home-slides .slick-next:before {
opacity: 1;
display: inline-block;
font: normal 20px/1 "dashicons";
-webkit-font-smoothing: antialiased;
vertical-align: top;
font-weight: bold;
}
.home-slides .slick-prev:before {
content: "\f341";
}
.home-slides .slick-next:before {
content: "\f345";
}
.home-slides .slick-prev {
left: 10px;
}
.home-slides .slick-next {
right: 10px;
}
button.slick-prev:hover,
button.slick-next:hover {
cursor: pointer;
}
.home-slides .slick-dots {
bottom: 4px;
}
.home-slides .slick-dots li {
margin: 0 1px;
}
.home-slides .slick-dots li button {
background: url(images/circle.png) no-repeat;
}
.home-slides .slick-dots li button:hover,
.home-slides .slick-dots li.slick-active {
background: url(images/circle-hover.png) no-repeat;
}
.home-slides .slick-dots li button:before {
content: '';
}
@media only screen and (max-width: 610px) {
.home-slide-caption {
position: static;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.home-slides .slick-dots li button {
background: url(images/circle@2x.png) no-repeat;
background-size: 14px 14px;
}
.home-slides .slick-dots li button:hover,
.home-slides .slick-dots li.slick-active {
background: url(images/circle-hover@2x.png) no-repeat;
background-size: 14px 14px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment