Testimonials Cycle WidgetWP Customer Reviews is a great way to add testimonials to your WordPress install. It seems like clients always want to have their testimonials rotate somewhere so here’s how to get your wp customer reviews to cycle in a widget.

1) Add the WP Customer Reviews Shortcode

You’ll first need to make sure that you theme supports the shortcode. To do that you add this line of code to your functions.php file:
add_filter('widget_text', 'do_shortcode');

Then the short code is something like this:
[WPCR_SHOW POSTID=”ALL” NUM=”5″ SNIPPET=”200″ MORE=”” HIDECUSTOM=”0″ HIDERESPONSE=”0″]

I left the More text empty because it didn’t behave the way I wanted it to… more on that below. I wanted it to show testimonials submitted to all posts, to show at most 5 reviews, and keep the length under 200 characters each.

2) Modify plugin code to work well with jQuery cycle

My client wanted to change the order that things appear in and in order to make the html cycle with jQuery cycle I had to clean up the html. So if you want your reviews to cycle you’ll have to replace your plugin’s wp-customer-reviews.php file with this one.

3) Add jQuery Cycle to your website

The last step is to add the cycle magic and this is all done by jQuery cycle which you can download here:
http://jquery.malsup.com/cycle/download.html

If you’d like it to cycle all of the divs within the sidebar (my sidebar has an id of secondary) you’d add this code to your header.php after adding the js you download to a js folder in your theme.

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/cycle.js”></script>
<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(‘#secondary #wpcr_respond_1’).cycle();

});

</script>

If you’d like to see it in action it’s currently running at portland.monkeybarstorage.com

  • Eric says:

    Hi! Im also using WP Customer Reviews. I used Googles Rich Snippet tool and submitted the portland.monkeybarstorage.com domain. Within the results was this warning. Thus, the plugin shortcode seems to fail this test. Any ideas on how to fix it?

    Warning: No rich snippet will be generated for this data, because it appears to include multiple reviews of an item, but no aggregate review information.

    Thanks for your feedback Derek!

    • ddubbua says:

      Off the top of my head I dont know whyd it get that error. Have you tried submitting a widget created out of the box with the short code? Ill look into it closer on Monday.

  • Eric says:

    Yeah, I think the shortcode is buggy when you try to aggregate the reviews. Let me know if you find anything about a fix. I sent Aaron an email, and doesn’t seem to be in a rush to try and fix it…which I understand, being a free plugin…

  • pxlgds says:

    aloha, i’ve installed WP Customer Reviews and attempted to get the widget to cycle via the instructions here, but something is amiss and the cycle does not function. I’ve been trying to sort this for the last month to no avail. I left a more descriptive comment in the “Sidebar widget placement for reviews” topic in the wp wp-customer-reviews support forum where others seemed to have the same problem. Is there anything you can suggest to get the widget to cycle. the site is fmvtax dot com. mahalo for your help.

    • ddubbua says:

      I don’t see the Sidebar widget anywhere. For that you need the shortcode where you want it and the do shortcode bit for your functions.php file.

  • derek says:

    I’ve got things so the latest testimonial is showing in the sidebar but am confused as to get the reviews rotating through all of them that you have managed to do so well. I have downloaded the changed .php file from here but was told that I could break my site by using it.
    I have also downloaded the cycle.js file but don’t know where to add it in WordPress.

    If you are still monitoring this page could you give me a few pointers..

    Thanks,

    • ddubbua says:

      You’ve only got one testimonial showing right now. You’ve got to do at least two to make them cycle. You include the cycle.js in header.php it’s the code in step 3. Of course there’s no warranty, but it shouldn’t break your site. If it does there’s always undo, right? :o)

  • derek says:

    Thanks for the quick reply. I’ll get onto it..

  • Eva says:

    I’m having some difficulties getting this to work and wanted to ask you a couple of questions.

    1) what about themes who already use this version of the cycle js: jquery.cycle.all.min.js. Would it work with that too?
    2) I don’t see you adding the jquery via wp_enqueue in this tutorial: I’m assuming this is necessary?
    3) Could you elaborate on changes you made to the plugin code file? What part of the html was changed?
    4) Could you specify what you did with the script part? What is the difference with the standard code (like you can find on the cycle plugin page under ‘basic demo’)

    Sorry for all my questions, I’d love to get this to work.

    Thanks!

    • ddubbua says:

      Hey Eva, cycle.all is even better than just plain cycle. It allows you to use more transitions if you are in the mood for something different. I didn’t use wp_enqueue here but rather just used included the file by adding the javascript file link in the header. Looks like wp_enqueue may be the best practices way of attaching script and thus better than my method… thanks for pointing that out to me! The changes I made to the HTML was to simply get each testimonial into a container. What happens with cycle is that you specify a container and it rotates each first level element within that container. The original plugin code didn’t have the stars and the testimonial all in one container so I modified the code to fit all the elements of each testimonial into one div so that we were rotating 3 testimonials rather than 9 parts of a testimonial. You don’t modify cycle script at all you just load the file and then call it using:
      jQuery(document).ready(function(){
      jQuery(‘#secondary #wpcr_respond_1′).cycle();
      });

      with #wpcr_respond_1 being the id of the div containing the testimonials and that div was found in my sidebar called #secondary.

      Good Luck!

      As a note to everyone you may want to look at any code you copy off of my website and make sure that your ‘s and “s are all generic, otherwise they may not process properly.

  • derek says:

    I don’t know if I have access to the header.php file. I login to my wordpress backend but after that I am at a bit of a loss. This site has the Thesis theme installed does that change things?

    • ddubbua says:

      You can edit the theme’s header.php file if you use the wordpress admin navigation to go to appearance > editor. You can select the header.php file there. Ideally you’d use an ftp client to get the file from the server then make edits in an html editor so that you could always undo anything and keep better track of your revisions, plus see the markup a little clearer.

  • Eva says:

    Thanks for your answer! I’m going to work on this some more. I think the reason it’s not working for me now is an issue with my theme… Again, thanks for your explanation, it makes more sense to me now. 😀

  • Pablo says:

    Hello,

    I have tried it at my site but doesn’t work.

    You can check with the browser inspector that the libraries are already loaded. The shortcode [WPCR_SHOW POSTID=”ALL” NUM=”100″] shows all the reviews in a list at the bottom of the home page, but they don´t rotate one by one.

    All that I could do is activate the fade effect when changing #wpcr_respond_1 by .hreview at:

    jQuery(document).ready(function($) {
    $(‘#wpcr_respond_1’).cycle({
    fx: ‘fade’,
    timeout: 3000,
    speed: 1500,
    pause: 1,
    fit: 1
    });
    });

    Could you help me out to make it work, please?

    TIA

    • ddubbua says:

      So the way cycle works is that you select a parent element and it will rotate everything on the next level within that element. You’ll notice in my example I had to change the review code to make it cleaner in step two (wp-customer-reviews.php).So ideally you’d have something like this:

      First review content
      Second review content

      The output customer review code is a mess in my opinion, but it’s a nice feature for a website. Hope it’s worth the cleanup for you, have you tried the .php file I have available for download? It’s been awhile so not sure if it would still work.

  • Monet says:

    Thanks a lot Derek! I was stuck trying to figure this out and couldn’t get a clear enough answer on the WP-customer review support page. Awesome info! It worked!

  • derek says:

    Don’t know if you are still monitoring this page but I have got my testimonials to show on a widget on the front page but following your advice here I don’t know what to do with the jquery cycle code I have downloaded as suggested on this page.

    You seem to suggest adding it to the header.php file or am I missing something? I didn’t like to add a load of .js code to a .php file in case it breaks the site.

    Any advice greatly appreciated..

  • derek says:

    I think I have worked out how to add the code from the second stage above into the header.php but I am unsure where to put the cycle.js file. I am using cpanel to access the site but can’t work out the correct location.

  • Jeffrey says:

    If anyone is still trying to make this work or you havent been able to get it to work just do this.

    $(document).ready(function () {
    var divs = $(‘div[id^=”hreview-“]’).hide(),
    i = 0;
    (function cycle() {
    divs.eq(i).fadeIn(400)
    .delay(5000)
    .fadeOut(400, cycle);
    i = ++i % divs.length; // increment i,
    // and reset to 0 when it equals divs.length
    })();
    });

    I found this code for cycling divs and just made a line change to cycle the reviews. Hope this helps anyone that comes across this.

  • derek c says:

    Where does this code go and does it replace existing code?

    Thanks,

  • Jeffrey says:

    If anyone is having issues when upgrading to version 3 of WP Customer Reviews I did this

    $(document).ready(function () {
    var divs = $(‘div[id^=”wpcr3_id_”]’).hide(),
    i = 0;
    (function cycle() {
    divs.eq(i).fadeIn(400)
    .delay(4000)
    .fadeOut(400, cycle);
    i = ++i % divs.length; // increment i,
    // and reset to 0 when it equals divs.length
    })();
    });

    Changes are placed in header.php of theme. It is working for me currently!

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.