Support » Plugin: GC Testimonials » Pagination at top and bottom of each page?

  • This plugin has been a lifesaver for many of my clients, thanks! One request that has come up more than once is to have the pagination appear at the top and bottom of the testimonials page(s). Is this a feature that can be implemented? And/Or can you provide us with the code to update to get this feature in place on our sites that are using the plugin?


Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author devnz


    Hi there,

    This is a feature we are looking to implement at some point. The pagination script the plugin uses does not allow paging links at the top and bottom, so we will be changing to another script down the track that does.


    Hey i am using the oxygen theme and wanted pagination on the top and bottom of my post. Also i don’t want it to have the page number, but a next and previous button. Can anyone help me?

    Thank you

    Hey, thanks for the respond, but i’m look for something like this where it said next and previous on top and bottom of my page break.

    I couldn’t find any jQuery plugins that only do Prev/Next so I modified the one packaged with GC Testimonials. I can post the code here. You will need to save it as a new file, upload to your server, and make 2 small changes to testimonials.php. Do you have FTP access to your server?

    Wow that shocking that a prev/Next plugin can’t be found any where. If you could post the code here that would be great. Thank you for all your help.

    Well, I gave up after trying 3 🙂

    Save this as quickpager2.jquery.js in your /wp-content/plugins/gc-testimonials/assets/js directory:

     * Quick Pager 2
     * Based on Quick Pager by Dan Drayne
    (function($) {
      $.fn.quickPager2 = function(options) {
        var defaults = {
          pageSize: 10,
          currentPage: 1,
          holder: null,
          pagerLocation: "after"
        var options = $.extend(defaults, options);
        return this.each(function() {
          var selector = $(this);
          var pageCounter = 1;
          selector.wrap("<div class='simplePagerContainer'></div>");
            if(i < pageCounter*options.pageSize && i >= (pageCounter-1)*options.pageSize) {
            else {
              pageCounter ++;
          // show/hide the appropriate regions
          if(pageCounter <= 1) {
          // Build pager navigation
          var pageNav = "<ul class='simplePagerNav'>";
          var liClasses = '';
          for (i=1;i<=pageCounter;i++){
            if (i==options.currentPage) {
              liClasses += "previousPage simplePageNav"+i;
              if (i==1 && options.currentPage==1) {
                liClasses += " disabledPage";
              pageNav += "<li class='"+liClasses+"'><a rel='"+i+"' href='#'>Prev</a></li>"; // [Prev] link
            else {
              if (i==options.currentPage+1){
                liClasses = "nextPage simplePageNav"+i;
                pageNav += "<li class='"+liClasses+"'><a rel='"+i+"' href='#'>Next</a></li>"; // [Next] link
          pageNav += "</ul>";
          if(!options.holder) {
            case "before":
            case "both":
          else {
          //pager navigation behaviour
          selector.parent().find(".simplePagerNav a").click(function() {
            //grab the REL attribute
            var clickedLink = $(this).attr("rel");
            var clickedPrev = $(this).parent("li").hasClass("previousPage");
            var clickedNext = $(this).parent("li").hasClass("nextPage");
            options.currentPage = clickedLink;
            if(options.holder) {
            else {
              // Changed to [Prev] + [Next] links
              // [Next] clicked
              if (clickedNext) {
                // change [Next] link
                if ( clickedLink == pageCounter ) {
                  // leave as link to last page, but change appearance (optional)
                } else {
                  // change target
                // change [Prev] target
              // [Prev] clicked
              if ( clickedPrev ) {
                // change [Prev] link
                if ( clickedLink == 1 ) {
                  // leave as link to first page, but change appearance (optional)
                } else {
                  // change [Prev] target
                // change [Next] target
            //hide and show relevant links
            // Scroll to top for any click
            $("html, body").animate({ "scrollTop": $("div.content").offset().top }, 800);
            return false;

    Then change the 2 instances of quickPager in testimonials.php to quickPager2.

    I added a CSS class called disabledPage if you want to style that in your theme. If you’re on the first page, the [Prev] link has disabledPage and likewise for the [Next] link if you’re on the last page. The link still works, I just made it grayed out in my case.

    For pagination both above and below, change pagerLocation to both like this:

    $output .= '$("#testimonials_container").quickPager2({ pageSize: '.$no.', currentPage: 1, pagerLocation: "both" });';

    Let me know how that works for you.

    Chris Dillon’s method does work! Is there any way to get the disabledPage to automatically set both and not just the one you click? For example when the property is set to both, and you click the bottom Next link, the top Next link does not “grey out” or change only the bottom. I have messed around a bit with it and I can not get it accomplished. Thanks for the fix Chris, it is a welcome addition to GC Testimonials.

    Sorry for not testing that. Here’s the updated javascript:

    Works beautifully Chris. Thank you. It is a real nice enhancement to this plug-in.

    Also, a helpful hint for those using Dillon’s great method. If you add this code to your in your .disabledPage CSS class you can easily disable those last and first page links.

    .disabledPage {

    It is supported in most current browsers now.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Pagination at top and bottom of each page?’ is closed to new replies.