Demonstration

Solution

<ul>
	<li><?php next_posts_link('&laquo; Older Entries') ?></li>
	<li><?php previous_posts_link('Newer Entries &raquo;') ?></li>
</ul>

The code above is used to make the previous and next page for the posts. First we need to add an ID for the unordered list so we can add select it using jQuery later. Let’s give it ID ‘postPagination’.

<ul id='postPagination'>
	<li><?php next_posts_link('&laquo; Older Entries') ?></li>
	<li><?php previous_posts_link('Newer Entries &raquo;') ?></li>
</ul>

Now let’s make it work with ajax. Insert the code bellow in header.php file of your theme. 

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){

	jQuery('#postPagination a').live('click', function(e){
		e.preventDefault();
		var link = jQuery(this).attr('href');
		jQuery('#content').html('Loading...');
		jQuery('#content').load(link+' #contentInner');

	});

});
</script>

Change the #content with ID of the div that wraps the #contentInner div of your page.

Here is how the layout looks.

<div id='content'>
    <div id='contentInner'>
        The Posts and the navigation are here
    </div>
</div>

That’s it. Now when a link for previous or next post pages is clicked the new content will be loaded using ajax. If you are having troubles with these just say what’s your problem in the comments and i’ll do my best to help you.

Notice: Don’t forget to include the jQuery library inside the theme if it’s not already included.

Bonus example: Fading animation

Just change the javascript part to be like the snippet bellow.

jQuery(document).ready(function(){

	jQuery('#postPagination a').live('click', function(e){
		e.preventDefault();
		var link = jQuery(this).attr('href');
		jQuery('#content').fadeOut(500).load(link + ' #contentInner', function(){ jQuery('#content').fadeIn(500); });

	});

});

That’s all. You can also download the files which include the fading animation.

Update:
You can now download the modified files. The files are from the “Classic” wordpress theme that comes with the wordpress download.

Update:
Improved code and added a “loading” message. (the download files are also updated).

Update:
Bonus example added with fadeIn and fadeOut. You can download the files from the example.

Our WordPress themes
We have a few WordPress themes that we would like you to take a look at if you want.
check out the portfolio