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.
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).
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 -->
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.
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.
Add this code on top of wp-ajax-post.php
<?php require ('wp-blog-header.php'); query_posts('paged=' . $_GET['p']); $paged = $_GET['p']; ?>
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 Small Business and Technology Blog