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 Small Business and Technology Blog
Download link is broken. Any chance of getting it back?
Thanks for the notification, here it is..
http://www.mygeekpal.com/wp-content/uploads/2009/08/ajax-pagination.zip
Ah, thanks for the quick reply. Sadly I couldn’t get it to work though … Just sticks on “loading”.
Did you place the wp-ajax-post.php file inside the root directory of your blog?
No I did not … silly me … will give it another try shortly. Thanks again.
Oh, it turns out I did have the wp-ajax-post.php in the root …. and it still didn’t work. I tried it again and again on a vanilla Kubrick theme and same thing, just sticks on “loading…”
I have the same problem Darren mentioned- I get “loading…” then nothing more. Any tips? Using WP 3.0 beta here.
Can you show me the URL ? So I may debug ?
If your wordpress sql tables are not the default one (wp_something), in other words, if you did change de table’s prefix during the install, you need to change the line :
—–
$numposts = $wpdb->get_var(“SELECT COUNT(DISTINCT ID) FROM wp_posts WHERE 1=1 AND wp_posts.post_type = ‘post’ AND (wp_posts.post_status = ‘publish’)”);
—–
in /plugins/pagenavi.php with your own wpprefix_posts
Took me one hour to figure this out…Almost got crazy! (Almost, as always…)
(Excuse my bad english, I’m french-speaking)
Kinda great stuff, anyway !
thanks for this
Well, still can’t get it to work…
On a direct call, http://fede-ulg.be/tore/wp-ajax-post.php?p=2 give me everything I need, but firebug tells me the ajax call give a 404, and jQuery get stuck on “Loading…”, as you can see on http://www.fede-ulg.be/tore/
Since the WP is in a subfolder, I had to change the ajax call to
jQuery.ajax({
type: “GET”,
url: “/tore/wp-ajax-post.php?p=”+page,
success: function(html){
jQuery(‘#ajaxcontent’).html(html);
}});
}
But, as I said, the absolute url Firebug says it’s loading, http://fede-ulg.be/tore/wp-ajax-post.php?p=2, is working…
Plus, even if it returns a 404, Firebug does get the right HTML in response : http://ge.tt/6PT07jh/Capture%20d’écran%202010-12-04%20à%2017.18.32.png
Help would be welcome ! Hope I’m understandable…
i simply tried everything the same u have asked us to do, but the code is not working, any suggestions are greateful for me.
if you can post the working link also.
the errror i received was loading… and nothing loads on. may be the code is not well tested and not compatible with wp 3.0.3
what do you say. if u have a better solution with details instructions then plz mail me.
Thanks
Vaseem Ansari
Made that changes and still doesn’t work, anyone know why? WP version 3.0.4
I was able to fix it:
you guys need to follow Tim’s steps:
http://stackoverflow.com/questions/3445270/jquery-ajax-returning-404-error-but-correct-response
It will eliminate the 404 error.
Thank you so much for this alex