Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active May 16, 2018 07:33
Show Gist options
  • Save srikat/67da62eb8b7224a72346 to your computer and use it in GitHub Desktop.
Save srikat/67da62eb8b7224a72346 to your computer and use it in GitHub Desktop.
Testimonials Carousel in WordPress using Testimonials by WooThemes, Display Posts Shortcode and Slick jQuery. http://sridharkatakam.com/testimonials-carousel-wordpress-using-testimonials-woothemes-display-posts-shortcode-slick-jquery/
//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts_styles' );
function enqueue_custom_scripts_styles() {
wp_enqueue_style( 'dashicons' );
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.3.15', true );
wp_enqueue_script( 'slick-init', get_stylesheet_directory_uri() . '/js/slick-init.js', array( 'slick-js' ), '1.0.0', true );
}
//* Enable shortcodes in text widgets
add_filter( 'widget_text', 'do_shortcode' );
/**
* Customize opening outer markup of Display Posts Shortcode
* @author Bill Erickson
* @link http://wordpress.org/extend/plugins/display-posts-shortcode/
*
* @param $output string, the original opening markup
* @return $output string, the modified opening markup
*/
function be_display_posts_open( $output ) {
$output = '<div class="testimonials-listing">';
return $output;
}
add_filter( 'display_posts_shortcode_wrapper_open', 'be_display_posts_open' );
/**
* Customize closing outer markup of Display Posts Shortcode
* @author Bill Erickson
* @link http://wordpress.org/extend/plugins/display-posts-shortcode/
*
* @param $output string, the original closing markup
* @return $output string, the modified closing markup
*/
function be_display_posts_close( $output ) {
$output = '</div>';
return $output;
}
add_filter( 'display_posts_shortcode_wrapper_close', 'be_display_posts_close' );
/**
* Add Read More link to Display Posts Shortcode plugin
* @author Bill Erickson
* @link http://wordpress.org/extend/plugins/display-posts-shortcode/
*
* @param string $output the original markup for an individual post
* @param array $atts all the attributes passed to the shortcode
* @param string $image the image part of the output
* @param string $title the title part of the output
* @param string $date the date part of the output
* @param string $excerpt the excerpt part of the output
* @param string $inner_wrapper what html element to wrap each post in (default is li)
* @return string $output the modified markup for an individual post
*/
add_filter( 'display_posts_shortcode_output', 'be_display_posts_read_more', 10, 9 );
function be_display_posts_read_more( $output, $atts, $image, $title, $date, $excerpt, $inner_wrapper, $content, $class ) {
// First check if an excerpt is included by looking at the shortcode $atts
if ( $atts['include_excerpt'] )
// Now let's rebuild the excerpt to include read more
$excerpt = '<span class="excerpt">' . get_the_excerpt() . '<br /><br /><a class="more-link" href="' . get_permalink() . '">Read the full testimonial &raquo;</a></span>';
else $excerpt = '';
// Now let's rebuild the output. Only the excerpt changed so we're using the original $image, $title, and $date
$output = '<' . $inner_wrapper . ' class="' . implode( ' ', $class ) . '">' . $image . $title . $date . $excerpt . $content . '</' . $inner_wrapper . '>';
// Finally we'll return the modified output
return $output;
}
[display-posts post_type="testimonial" image_size="thumbnail" posts_per_page="10" wrapper="div" include_excerpt="true"]
jQuery(document).ready(function($) {
$('.testimonials-listing').slick({
dots: true,
slidesToShow: 2,
slidesToScroll: 2,
responsive: [
{
breakpoint: 569,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 481,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: false
}
}
]
});
});
/*
Testimonials Carousel
---------------------- */
.testimonials-listing {
text-align: left;
}
.testimonials-listing .listing-item {
padding: 40px;
}
.testimonials-listing .listing-item img {
float: left;
margin: 0 20px 10px 0;
}
.testimonials-listing .listing-item .title {
display: block;
margin-bottom: 20px;
font-size: 30px;
line-height: 1;
}
.testimonials-listing a {
color: #22a1c4;
}
.testimonials-listing a:hover {
color: #fff;
}
.testimonials-listing .slick-prev,
.testimonials-listing .slick-next {
width: auto;
height: auto;
}
.testimonials-listing .slick-prev:before,
.testimonials-listing .slick-next:before {
display: inline-block;
font: normal 30px/1 "dashicons";
-webkit-font-smoothing: antialiased;
vertical-align: top;
}
.testimonials-listing .slick-prev:before {
content: "\f341";
}
.testimonials-listing .slick-next:before {
content: "\f345";
}
.testimonials-listing .slick-dots li button:before,
.testimonials-listing .slick-dots li.slick-active button:before {
color: #fff;
}
.image-section .testimonials-listing button:hover {
border: none;
background: transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment