Last active
May 16, 2018 07:33
-
-
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/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//* 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 »</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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[display-posts post_type="testimonial" image_size="thumbnail" posts_per_page="10" wrapper="div" include_excerpt="true"] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
} | |
} | |
] | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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