Pagination on blogs is quite in common. But an AJAX powered pagination on a cool themed blog is the apple of my eye. In this tutorial we are going to see how to change your old styled pagination into an AJAX powered dynamic pagination.

In this tutorial I assume that you have basic knowlege of editing HTML, PHP and Javascript. I have used jQuery for handling ajax and the modified code for pagination from Lester Chan’s WP-Page Navi

The tutorial will consists of creating a basic pagination using PHP, jQuery and editing some template pages. Make sure you backup your ooriginal theme before trying this.If you arent able to follow the tutorial download the zip file at the containing the required files. (including css style).

Step 1

Firstly, open up the index.php and/or home.php if it exists. Wrap the div that holds all the posts with a div of id #ajaxcontent. And add <?php pagenavi(); ?> just before the end of the content div.
Will look something like this

<div id="ajaxcontent">
<div id="content">
<?php if (have_posts()):
   while (have_posts()):
      the_post(); ?>
.......
.
.
.
.
<?php endwhile;
endif; ?>
<?php pagenavi(); ?>
</div> <!-- end #content -->
</div>
<!-- end #ajaxcontent -->

Step 2

Create a new folder called plugins in your current template’s directory. Download the zip package containing all the files. Copy the pagenavi.php and pagenavi.css file into the plugins folder in your current template’s directory.

Step 3

Now just copy everything inside the #ajaxcontent wrapper(Make sure you dont include the ajaxcontent wrapper div too.) and create a new file called wp-ajax-post.php in your root directory and paste it there.

Step 4

Add this code on top of wp-ajax-post.php

<?php
require ('wp-blog-header.php');
query_posts('paged=' . $_GET['p']);
$paged = $_GET['p'];
?>

Step 5

The last thing to do is, open functions.php in your template directory and include the pagenavi.php plugin like this

<?php include("plugins/pagenavi.php"); ?>

So that was the tutorial, check out the working example/demo on the home page of my blog MyGeekpal

Download Ajax Pagination Files

Related posts:

1. How to Backup and Synchronize your WordPress Blog
2. How to Create a WordPress Plugin – Hello World!
3. Including Files in PHP – Learn PHP in 7 Days – Day #6
4. Its time to Upgrade your WordPress Again – How to Upgrade from WordPress 2.6.2 to WordPress 2.6.3
5. WordPress: Creating Custom 404 Pages