Pagination at top and bottom of each page?

Like this one?
http://beneverard.github.io/jqPagination/

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?

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>");

      selector.children().each(function(i){

        if(i < pageCounter*options.pageSize && i >= (pageCounter-1)*options.pageSize) {
          $(this).addClass("simplePagerPage"+pageCounter);
        }
        else {
          $(this).addClass("simplePagerPage"+(pageCounter+1));
          pageCounter ++;
        } 

      });

      // show/hide the appropriate regions
      selector.children().hide();
      selector.children(".simplePagerPage"+options.currentPage).show();

      if(pageCounter <= 1) {
        return;
      }

      // 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) {
        switch(options.pagerLocation)
        {
        case "before":
          selector.before(pageNav);
        break;
        case "both":
          selector.before(pageNav);
          selector.after(pageNav);
        break;
        default:
          selector.after(pageNav);
        }
      }
      else {
        $(options.holder).append(pageNav);
      }

      //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) {
          $(this).parent("li").parent("ul").parent(options.holder).find("li.currentPage").removeClass("currentPage");
          $(this).parent("li").parent("ul").parent(options.holder).find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");
        }
        else {
          // Changed to [Prev] + [Next] links

          $(this).parent("li").parent("ul").find("li.disabledPage").removeClass("disabledPage");

          // [Next] clicked
          if (clickedNext) {

            // change [Next] link
            if ( clickedLink == pageCounter ) {
              // leave as link to last page, but change appearance (optional)
              $(this).parent("li").addClass("disabledPage");
            } else {
              // change target
              $(this).attr("rel",parseFloat(clickedLink)+1);
              $(this).parent("li").addClass("nextPage");
            }

            // change [Prev] target
            $(this).parent("li").parent("ul").find("li.previousPage").find("a").attr("rel",parseFloat(clickedLink)-1);

          }

          // [Prev] clicked
          if ( clickedPrev ) {

            // change [Prev] link
            if ( clickedLink == 1 ) {
              // leave as link to first page, but change appearance (optional)
              $(this).parent("li").addClass("disabledPage");
            } else {
              // change [Prev] target
              $(this).attr("rel",parseFloat(clickedLink)-1);
              $(this).parent("li").addClass("previousPage");
            }

            // change [Next] target
            $(this).parent("li").parent("ul").find("li.nextPage").find("a").attr("rel",parseFloat(clickedLink)+1);

          }

        }

        //hide and show relevant links
        selector.children().hide();
        selector.find(".simplePagerPage"+clickedLink).show();

        // Scroll to top for any click
        $("html, body").animate({ "scrollTop": $("div.content").offset().top }, 800);

        return false;
      });
    });
  }

})(jQuery);

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.

Sorry for not testing that. Here’s the updated javascript:
https://gist.github.com/cdillon/8926809

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 {
     pointer-events:none;
}

It is supported in most current browsers now.