Post Pagination

Ever wanted to browse through the older post archives only to be staring at the screen for ages in frustration while the content slowly loads up? A quick fix would be to make use of AJAX to load the post archives. In this tutorial, I will show you how to do that using the ever popular JavaScript framework; MooTools on a typical 2 column WordPress theme.

The code is quite easily digestible and with a little CSS tweaking, you could get it to work for your theme.

Step 1: Readying the Files

Download the file mootools_core.js and upload it into a folder within the directory of your active WordPress theme and name it as js.

I only included components needed for AJAX post pagination in this MooTools build. You are however welcome to create a new one with components you would like to use.

Create a blank JavaScript file called ajax.js and upload into the js folder. At this point of time, you should have these 2 files in your js folder.

yoursite.com/wp-content/themes/yourtheme/js/mootools_core.js
yoursite.com/wp-content/themes/yourtheme/js/ajax.js

Step 2: Edit header.php

You have to tell the browser that we have a JavaScript file to use. Add the following lines into your header.php just before the closing </head> tag.

<?php wp_enqueue_script('mootools', '/wp-content/themes/yourtheme/js/mootools_core.js')); ?>
<?php wp_enqueue_script('mootools_ajax', '/wp-content/themes/yourtheme/js/ajax.js')); ?>

Where yourtheme is the folder name of your active theme.

Step 3: Edit index.php

When it comes to AJAX pagination, we only want to refresh the post listings and not other portions of your site. The following code snippets will tell the browser to skip loading the entire page.

The top of your index.php file should have the following line:

1

<?php get_header(); ?>

Replace that line with this:

1
2
3

<?php if (!isset($_GET['ajax'])) { ?>
<?php get_header(); ?>
<?php } ?>

Similarly, at the very end of the file you should see:

1
2

<?php get_sidebar(); ?>	
<?php get_footer(); ?>

Now replace it with this:

1
2
3
4

<?php if (!isset($_GET['ajax'])) { ?>
<?php get_sidebar(); ?>	
<?php get_footer(); ?>    	
<?php } ?>

To avoid any possible causes for the code not to work, do ensure that your HTML structure is identical to the ones listed below. We will need to have a div with an id of ‘post’ nesting the loop.

Go back into index.php and add the div before the start of the loop, i.e. the end result should look like this:

1
2

<div id="post">	
<?php if (have_posts()) { ?>

Be sure to also close the <div> after the loop ends.

1
2

<?php } ?>
</div>

We also need a div with a CSS class of ‘page-navi’ to nest the post pagination links.

1
2
3
4

<div class="page-navi">
	<?php next_posts_link('- Older Posts -') ?>
	<?php previous_posts_link('- Newer Posts -') ?>
</div>

Step 4: Writing your ajax.js

This is basically what goes on in your JavaScript file. I have left some pretty detailed comments so that you know what the code is all about.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

//function used to handle AJAX post pagination
function ajaxLinks(id, container) {
 
	//looks for all instances of id
	$$(id).each(function(ele) {		
 
		//what happens when the particular instance is clicked on
		ele.addEvent('click', function(e) {
			e = new Event(e).stop();
			var alink = ele.getProperty('href'); 
			var url = alink;
 
			//construct the new URL with a parameter indicating how it should load the page (fully or a portion of it)
			if (alink.indexOf('?') != -1) {
				url += "&ajax=y";
			} else {
				url += "?ajax=y";
			}				
 
			//this is where the magic happens
			var ajaxLink = new Request.HTML({				
				onRequest: function() {}, //what happens during an ajax request is made													
				onSuccess: function() { //what happens when an ajax request is completed successfully															
					new Fx.Scroll(document.body, {'duration': 'long'}).start(0, 0); //scrolls to the top of the page once your content is loaded
					ajaxLinks('.page-navi a', 'post'); //calls the function again so that it will add ajax post pagination to your newly loaded page
				}, 
 
				onFailure: function() {}, //what happens when an ajax request fails
				update: $(container) //#post which is your container gets updated
			}).get(url);											
		});		    
 
	});
 
}
 
//needed for the MooTools build to be executed
window.addEvent('domready', function(dom){						 
	ajaxLinks('.page-navi a', 'post'); //Of course all of this will not be completed until you call the function to action
});

Step 5: Customization

As you would have probably guessed, this is a very basic implementation of how AJAX post pagination works in WordPress themes.

I would love to let your imagination run wild and see what you come up. Of course you need to have a little knowledge in CSS to get it done. Customizations can be made in the 3 different events (onRequest, onSuccess and onFailure).

If you have any doubts or feedback about this how-to. I would love to hear of it.

Enjoy this post? You should follow me on Twitter!