Sridhar Katakam

Genesis and WordPress Tutorials

Testimonials Carousel in WordPress using Testimonials by WooThemes, Display Posts Shortcode and Slick jQuery

by 18 Comments

In this article I show how 'testimonial' CPT entries made available by Testimonials by WooThemes plugin can be output using Bill Erickson's Display Posts Shortcode plugin and displayed as a responsive carousel using Slick jQuery script.

testimonials-carousel-slick

The reason for not using Testimonials plugin's built-in shortcode is because it did not seem possible with the generated HTML to float the featured image to the left with the content wrapping around it on the right. For 100% control on the HTML output incl. the case when you need to show testimonial CPT related custom fields like Byline and URL, writing a custom query + loop is the way to go (example). For this tutorial though, we shall use Display Posts Shortcode to keep it simple.

Step 1

Install and activate Testimonials by WooThemes and Display Posts Shortcode plugins.

Step 2

Download Slick and extract the zip file.

Upload slick.min.js to child theme directory/js.

Upload fonts folder, ajax-loader.gif, slick.css and slick-theme.css to child theme directory/css.

Create a file named say, slick-init.js child theme directory/js having the following code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • I followed the steps as outlined above but wanted to point out that the “slick.css.map” file was NOT included in the SLICK zip file?

    Lastly when I tested out the widget with shortcode it did NOT appear as yours does in this tutorial? Is that because the “slick.css.map” is NOT present?

    Reply

  • Hey Sridhar,

    I can’t seem to get the scrolling (next – previous sections) to work… I’m working with the centric theme (heavily customized using your tutorials here).

    I followed the instructions but can’t figure out why it won’t work.
    http://forgeddesign.com/v2/ (towards the bottom, widget area).

    Reply

  • Hi Sridhar,

    Thank you so much for this tutorial, it is what I was looking for. However, I have 2 problems: there is a dash line( ‘-‘ ) displayed before every post and I can’t figure out how to get rid of it. Also, I didn’t create the testimonials using the testimonials plugin that you have recommended, but through a CPT because I want to minimize plugin usage. Is there a way to display the ACF values created in the testimonial CPT?

    Thank you in advance!

    Reply

    • Hi,

      Note the last step of the tutorial. You will see the output of this tutorial wherever that shortcode is pasted.

      https://www.deluxe-designs.net/whattoeat/testimonials/ is currently showing the default testimonial CPT’s archive page.

      What you can do is replace the default loop with a custom one to output the shortcode on this CPT archive page.

      archive-testimonial.php:

      remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'prefix_do_loop' );
/**
 * Outputs a custom loop.
 */
function prefix_do_loop() {

    echo do_shortcode( '[display-posts post_type="testimonial" image_size="thumbnail" posts_per_page="10" wrapper="div" include_excerpt="true"]' );

}

genesis();
      Reply

      • I figured this was something silly and it was. I did add the archive-testominial.php template so actually this wasn’t for nothing; it was helpful. Ultimately the scroll arrows were set to white so it looked as though they weren’t there. I think I can troubleshoot the rest by fixing up the css to match my template. Thank you for your assistance with the archive custom loop!

        Reply
    • >