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');
});
  • David

    Hey, I’m trying to use your plugin with a custom post type. Can you post an example of how to implement your plugin on a custom post type archive page?

    here is my custom query


                get_query_var('paged'),
                    'taxonomy' => 'marathon_category',
                    'term' => 'cmj2011',
                    'posts_per_page' => '3',
                    'post_type' => 'live',
                    ));
                    if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
                   
                   
                   

  • http://bezago.com Nuwan Sameera

    You need to change the loop as follows,
                   


     
    get_template_part() the loop file is where the posts/content will be loaded.

    Now you should insert the following code,

           
    get_query_var('paged'),
                    'taxonomy' => 'marathon_category',
                    'term' => 'cmj2011',
                    'posts_per_page' => '3',
                    'post_type' => 'live',
                    );
    if(function_exists('genarate_ajax_pagination'))
    genarate_ajax_pagination('Read More', 'blue', "content", query_post_array); 

    ?>

  • Anonymous

    hello, your plugin is really interesting. will you update it to use on 3.3.1? thanks a lot.

  • http://bezago.com Nuwan Sameera

     This should works on WP 3.3.1 too. Let me know if you see some issues.

  • Anonymous

    thanks a lot for a help. your plugin is really great!

  • Kevin

    quick question i tryed adding this pluggin !
    it works great…. on thing With WPML doesn’t seem to be working 100 %. i can get the query to give me the results. im using a custom post type with wpml plugin. 

    when i put the site in the primary language it runs find but when i try the secondary language it shows me the first 12 like i want than when i click on the read more button it gives me the exact amount of post that are left to get from the DB. but repeats the same one backward and in the primary languague

    ‘realisation’, ‘posts_per_page’ => 12,’caller_get_posts’ => 1, ‘paged’ => $paged));
                                   //number of post for a page
                                   while ($projectspost->have_posts()) : $projectspost->the_post();
                                   
                                        get_template_part( ‘loop’, ‘realisation’ );
                                  
                                   endwhile;
                                ?>
                               
                               
                                ‘realisation’, ‘posts_per_page’ => 12));
                                ?>
                               
                                

  • http://bezago.com Nuwan Sameera

    Thanks for let me know this issue. But unfortunately I don’t have this plugin to check. Ajax pagination plugin uses wp_query(array=()) function to fetch posts using Ajax request. But in your case wp_query function doesn’t  know current language when you in other language pages. That the reason to fetch default language posts.

    So can you try again by including the language type into the 4th parameter in genarate_ajax_pagination() function if it support from WPML plugin?. I tried to get help from WPML support forum but it wasn’t allow me to create account. so I cannot see the thread comments.

  • David

     Hmm, I’m still unsure. This is the full code for one of many custom archive pages.

    http://www.production.cmj.com/marathon/live

    Where should get_template_part() go?

    Also query_post_array seems to be throwing an error.
    Feel free to email me if it is easier.

    Thanks for your help!
    David

       

            CMJ 2011 Live Reviews
               
               
                   
                get_query_var('paged'),
                    'taxonomy' => 'marathon_category',
                    'term' => 'cmj2011',
                    'posts_per_page' => '3',
                    'post_type' => 'live',
                    ));
                    if ( have_posts() ) while ( have_posts() ) : the_post(); ?>