Easily Ajax WordPress Pagination

By: Pippin Williamson on January 14, 2011
2 29 Comments
WordPress Tutorials

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

Find this Article Useful?

We regularly update our twitter and facebook pages too with all our latest articles. Feel free to follow us on twitter or like us on facebook. You are also welcome to subscribe to our RSS feed.

You May Also Like:

Showing 29 Comments

  • goto10

    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 818 days ago

  • Pippin (Admin)

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

    REPLY 818 days ago

  • Thomas

    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 809 days ago

  • 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 809 days ago

  • Thomas

    Hey Pippin,

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

    Thomas

    REPLY 809 days ago

  • 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 809 days ago

  • 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 756 days ago

  • Pippin (Admin)

    You shouldn’t need to change it at all

    REPLY 756 days ago

  • 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 756 days ago

  • 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 756 days ago

  • 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 755 days ago

  • 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 755 days ago

  • Pippin Williamson (Admin)

    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 755 days ago

  • Boba

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

    REPLY 740 days ago

  • Pippin Williamson (Admin)

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

    REPLY 740 days ago

  • Boba

    Thanks, appreciate it :)

    REPLY 740 days ago

  • Paco Delacroix

    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 704 days ago

  • 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 689 days ago

  • nfrost21

    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 683 days ago

  • 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 683 days ago

  • nfrost21

    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 683 days ago

  • 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 683 days ago

  • nfrost21

    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 683 days ago

  • 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 683 days ago

  • Devin

    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 528 days ago

  • 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 500 days ago

  • Pippin (Admin)

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

    REPLY 500 days ago

  • 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 500 days ago

  • 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 500 days ago

Add Your Voice: