Ajax Pagination (Twitter old Style) – WordPress plugin
Posted by: Nuwan Sameera Hettiarachchi on: January 23rd, 2012
In: Web,WordPress Comments!

The pagination of a web site gives to view more old posts of the blog or specific content of the website. There are lot of WordPress plugins to enable the pagination in different styles, eg: WP-Paginate. When I was developing new website using WordPress, I wanted to have the pagination just looks like Twitter old styles. The Twitter pagination styles is quite more fast and it gives good end user experience.

The Ajax Pagination plugin is to convert WordPress default pagination behavior into the Twitter style (old) using Ajax functionality. You can use this plugin to where the pagination is available in your template. You can check demo on Vesess blog also using this plugin.

Features

  1. Load posts in Ajax functionality
  2. Twitter pagination style
  3. The default pagination where the functionality is available in your template can be replaced
  4. Custom post type post pagination support
  5. Javascript “callback” function after one page is loaded

Download and Installation

Download the plugin and install using correct with guidance.

How to use this plugin in your template
After you install the plugin, insert following code into your index.php file.

<?php 
     if(function_exists('genarate_ajax_pagination')) 
         genarate_ajax_pagination('Read More', 'blue');  
?>

The “genarate_ajax_pagination($btn_name, $color_name, $loop, $query)” function has four parameters may help to you get more functionality from the pagination button.

$btn_name is string (optional). The button name default value is “Read More”

$color_name is string (optional). The button background color names. by default “blck” is applied and you can use following colors, or your custom colors.

  1. blue
  2. red
  3. magenta
  4. orange
  5. yellow

Note: this plugin is used CSS3 functionality buttons. The original credits to Super Awesome Buttons with CSS3 and RGBA

$loop – string (optional). The default is ‘content’

Note:
The ‘twentyeleven’ theme support ‘content’
The ‘twentyten’ theme support ‘loop’

The loop file is where the posts/content will be loaded. The default value is (if you don’t set $loop variable) ‘loop’. This usage is that, the plugin load your post content template, eg: get_template_part($loop). Advantage of this parameter is that you can use the pagination in several places in your WordPress theme to load the posts/content from.

$query – array (optional), the default is array()

If you are using custom query to display posts, pagination plugin also need the custom query array to run loop. The advantage of this parameter, you can use any Custom Post Type Template. eg: array(‘post_type’ => ‘custom’)

How to handle the callback function

This plugin is used jQuery javacript framework to handle the AJAX functionality on client side. So this plugin is triggered a customer event name called ‘complete-paginate’ once complete the next page append to the page.

The important of the custom event in client side is that you may have twitter or Facebook button or a specific bound event in the loaded posts content. This custom event may help you to re-assign events any effect.

The custom event can be bound into the button (id=”ajax_pagination_btn”). eg:

$('#ajax_pagination_btn').bind('complete-paginate', function(event) {
  console.log('update other Js functionality');
});