Easily Ajax WordPress Pagination

Ajax allows data to be loaded within a page without leaving or reloading that page. In this quick tutorial, I’m going to show you how to ajaxify pagination in your WordPress theme.

You can use the steps below to enable ajax on any kind of pagination, but I will specifically be using the pagination provided by the WP Page Numbers plugin.

Step 1 – Load jQuery

In order for the ajaxed pagination to work, you first need to load jQuery in your theme. It is quite likely that your theme already has jQuery loaded, but if it doesn’t, paste the following code into your header.php:

wp_enqueue_script('jquery');

Be sure you place the jquery call before

wp_head();

Step 2 – Ajax Pagination

To enable ajaxed pagination, paste the following into your header.php:

jQuery(document).ready(function(){
	// ajax pagination
	jQuery('#wp_page_numbers a').live('click', function(){ // if not using wp-page-numbers, change this to correct ID
		var link = jQuery(this).attr('href');
					// #main is the ID of the outer div wrapping your posts
		jQuery('#main').html('

Loading…

');
					// #entries is the ID of the inner div wrapping your posts
		jQuery('#main').load(link+' #entries')
	});
}); // end ready function

For this one, be sure you place it after

wp_head();

There are two variables that you will need to change in the above code. The first is #main, in both places. This needs to be the ID of the the outer div tag surrounding your posts. And #entries needs to be the ID of the inner div surrounding your posts. To illustrate exactly what I mean, look at the code below.

. . . your wordpress posts are here

Also, if you are not using the WP-Page-Numbers plugin, you will need to change the target element in this line:

jQuery('#wp_page_numbers a').live('click', function(){ // if not using wp-page-numbers, change this to correct ID

This code has been adapted from WP Canyon’s original tutorial.

Enjoy smooth-loading WordPress pagination!

Pippin

This article was authored by:

Pippin Williamson is a WordPress developer based in Lawrence, KS. WordPress is his expertise: custom theme / plugin development, e-commerce solutions, content management, and everything else WordPress. His personal site can be found at PippinsPlugins.com. There he publishes frequent WordPress tutorials, tips and tricks. He also host a variety of his own free WordPress plugins. Join the site and receive member only benefits, including exclusive tutorial access and source file downloads.

Pippin Williamson has authored 42 posts.Visit Website

Showing 31 Comments

  • Cool! I’m using WP PageNavi, and it was easy to set up using your pointers. One little note, I had to change att to attr in line 4 within step 2.

    REPLY
  • Pippin (Admin)

    Glad you liked it! Thanks for pointing that out; I’ve updated the code.

    REPLY
  • Hey Pippin,

    I love the script! It works great. I’ve tried adding fadeIn/fadeOut effects to no avail. Could you tell me why this doesn’t work as I expect it to?

    jQuery(document).ready(function(){
    jQuery('.numbered_nav a').live('click', function(){
    var link = jQuery(this).attr('href');
    jQuery('#archive_wrapper').fadeOut(500).load(link+' .portfolio-archives', function(){ jQuery('#archive_wrapper').fadeIn(500); });
    });
    });

    REPLY
  • Pippin (Admin)

    I’m not sure if this will work, but try it:


    jQuery(document).ready(function(){

    jQuery('.numbered_nav a').live('click', function(){

    var link = jQuery(this).attr('href');

    jQuery('#archive_wrapper').fadeOut(500);

    jQuery('#archive_wrapper').load(link+' .portfolio-archives').fadeIn(500);

    });

    });

    REPLY
  • Hey Pippin,

    Tried that, but it doesn’t work either. The ajax still works beautifully, just no fadein/fadeout.

    Thomas

    REPLY
  • Pippin (Admin)

    Without being able to test to (just running out the door), I’m not sure why, but I’m going to take a guess that what you need to do is use .html() to append the HTML you want to fade in before the ajax loads the content.

    Make sense?

    Try doing some google searches for “fading ajax”.

    REPLY
  • EO

    this is super helpful!! thanks for posting! :)

    I have a server running php 5.2.17, so how can I adjust the code to accommodate?

    thank you!!

    REPLY
  • Pippin (Admin)

    You shouldn’t need to change it at all

    REPLY
  • EO

    thanks for your quick reply! :D

    here’s my code:
    https://rapidshare.com/files/458885239/code.txt

    and here’s my error message :)
    syntax error, unexpected T_VAR

    any push in the right direction would be hugely appreciated!

    REPLY
  • EO

    also getting this:

    Parse error: syntax error, unexpected T_FUNCTION, expecting ‘)

    CODE:

    <?php jQuery(document).ready(function(){
    // ajax pagination
    jQuery('#wp-page_numbers a').live('click', function(){
    var link = jQuery(this).attr('href');
    jQuery('#content').html('loading…’);
    jQuery(‘#content’).load(link+’ #content-left’)
    });
    }); // end ready function ?>

    REPLY
  • Pippin (Admin)

    All of the jQuery code née to go in script tags, not php tags. Copy and paste the code above, without changing it, and it should all work fine.

    REPLY
  • EO

    sorry for my noobness!
    I added the script tags as follows:

    wp_enqueue_script(“jquery”);

    jQuery(document).ready(function(){
    // ajax pagination
    jQuery(‘#wp-page_numbers a’).live(‘click’, function(){
    var link = jQuery(this).attr(‘href’);
    jQuery(‘#content’).html(‘loading…’);
    jQuery(‘#content’).load(link+’ #content-left’)
    });
    }); // end ready function

    …still not seeing page or post content load separately – what am I missing??

    thank you so much for all your help!!

    -EO

    REPLY
  • To make it a little easier, email me at pippin(at)pippinspages(dot)com and I’ll help you out. The WP comment form isn’t very code friendly :)

    REPLY
  • Interesting. Oddly familiar code thou… In case you know what i’m talking about, would appreciate a “source link”.

    REPLY
  • Of course. I can’t believe I forgot that. It has been added :D

    REPLY
  • Thanks, appreciate it :)

    REPLY
  • Hi, i am using the Page Numbers Plugin and I need help to understand where I need to replace de divs #main and div entries.
    Would this be the sintax

    thanks

    REPLY
  • Pippin (Admin)

    The easiest way to tell is by using Chrome’s Inspector or Firefox’s Fire Bug. Simply right click on the pagination links and choose Inspect Element, then look for the div#

    REPLY
  • Hi there – think this is just what i need – but having difficulty getting it to play ball with the page navi plugin.

    I have a ul dynamically populated with list items for individual toys spread over 3 pages –

    http://www.escalamadrid.com/kalimba2/?paged=2

    …and have adapted the jquery script as following:

    // ajax pagination
    jQuery(document).ready(function(){
    jQuery(‘.pagination_container a’).live(‘click’, function() {
    var link = jQuery(this).attr(‘href’);
    jQuery(‘.content ul’).html(‘loading…’);
    jQuery(‘.content ul’).load(link+’ul.products’)
    });

    …seems i’m not targetting something correctly as the script is not working at all –

    any suggestions?

    REPLY
  • Pippin (Admin)

    It looks like the entire problem might just be a syntax error. You’re missing a semi colon after jQuery(â€Ëœ.content ulâ€â„¢).load(link+â€â„¢ul.productsâ€â„¢)

    REPLY
  • Thanks Pippin – turns out i had forgotten one of the closing braces – when i fixed that i had a problem with the ajax functionality making the page scroll to the top. To stop that i’ve added return false to the code:

    // ajax pagination
    jQuery(document).ready(function(){
    jQuery(‘.pagination_container a’).live(‘click’, function() {
    var link = jQuery(this).attr(‘href’);
    jQuery(‘.content’).html(‘Loading…’);
    jQuery(‘.content’).load(link+’.content .prodlist_container’);
    return false;
    });
    });

    …however the product buttons are now all constantly active and once you navigate to page 3, you’re unable to navigate back to page 1…. back to the drawing board then.

    REPLY
  • Pippin (Admin)

    Use e.preventDefault(); instead of return false.

    So like this:

    // ajax pagination
    jQuery(document).ready(function(e){
    e.preventDefault();
    jQuery(â€Ëœ.pagination_container aâ€â„¢).live(â€Ëœclickâ€â„¢, function() {
    var link = jQuery(this).attr(â€Ëœhrefâ€â„¢);
    jQuery(â€Ëœ.contentâ€â„¢).html(â€ËœLoadingâ€Â¦Ãƒ¢Ã¢â€š¬Ã¢â€ž¢);
    jQuery(â€Ëœ.contentâ€â„¢).load(link+â€â„¢.content .prodlist_containerâ€â„¢);
    });
    });

    REPLY
  • Any chance you could explain how the following line works?

    jQuery(â€Ëœ.contentâ€â„¢).load(link+â€â„¢.content .prodlist_containerâ€â„¢);

    ..think if i can understand that it’ll help me troubleshoot –

    thanks!

    REPLY
  • Pippin (Admin)

    It says: “load the URL specified in the HREF of the anchor tag clicked, then place it into the .content .prodlist_container element”

    REPLY
  • Wow this was super easy to setup. jQuery, you make my life so much easier. Oh, and also the awesome WP community! BTW, the code snippets extend into the sidebar on Chrome in this article. Anyone else notice that? Good article though, thanks.

    REPLY
  • David H

    I am trying to implement this but your instruction are unclear as to the following: div>

    . . . your wordpress posts are here

    The phrase “wordpress posts” is what leaves room for confusion.

    Each single post by itself has an outer dive and an inner div.

    I have a post page with ten short posts lined up inside the left content div.

    May I assume that “wordpress posts” refers to the entire BLOCK of MULTIPLE posts?

    That no matter what inner and outer divs may apply to a single post , nevertheless, you are meaning that we are looking for the all-encompassing divs that completely surround ALL of the Posts taken as a Group?

    Thanks for this tutorial!

    REPLY
  • Pippin (Admin)

    Yes, I meant the DIV that is surrounding ALL of the posts. So the posts’ container.

    REPLY
  • David H

    Thanks for clearing that up, Pippin.
    Now, just one more question.
    You specify ID as a customization requirement.

    Much of my theme uses classes for divs.
    Am I to assume that to make your code work I must add an ID definition to the page code itself such as this way for two theme divs that are now wrapping the block of posts, but currently without an ID definition?

    REPLY
  • Pippin (Admin)

    You can use a class instead of an ID, but only if the class is unique to that one div.

    I’d recommend you add an ID.

    REPLY
  • Cant belive it worked so well with just that 4 lines of code, its magic!

    REPLY
  • Hey, I’m trying to make this work but I have to be honest, I come from a Javascript background and WordPress still perplexes me! Any chance you could post a simple complete version so I can dissect? It would be much appreciated!!

    REPLY

Add Your Voice: