Get Started With 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:

Be sure you place the jquery call before

Step 2 – Ajax Pagination

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

Loading…

For this one, be sure you place it after

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:

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

Enjoy smooth-loading WordPress pagination!

Pippin