Breaking News
You are here : Home / Wordpress / WordPress Ajax Pagination
wp-ajax-pagiantion

WordPress Ajax Pagination

WordPress Ajax Pagination:

Converting WordPress Pagination to ajax pagination is very easy.You just need to Edit a file in your wordpress theme.It is actually a quite simple ajax load method of the jquery which is used for this wordpress ajax pagination.For  This pagination to work Your wordpress installation must have included Jquery library as this wordpress ajax pagination works on Jquery ajax load method.

WordPress Ajax pagination ::include Jquery

So to Include Jquery if not Included by default ,Just open header.php file of your wordpress theme.Then Find  wp_head() function,and add the line below just above the wp_head() function.

Wp Ajax Pagination::Adding script to header.php

Now Jquery is included we just include the The script below in header.php right after the wp_head() function.This function check when a pagination link is clicked then it just stop the current action and perform the ajax load .keep in mind just inspect the pagination div and content div with the help of firefox firebug plugin or just view source to find out the respective id’s of content div and pagination div.In this case the pagination div has id=’Pagination’ and content div has id=’content’ .Change it with yours.Also here is loader div which is hidden by default while we perform ajax load then the loader shows and after getting the data from the ajax load this loader div hides.You could place any gif animation inside the loader div.

This Script Simply convert the your existing wordpress pagination to the Ajax pagination.The script just just the content area part via ajax load method and put it in content area of current page.Wow That was very easy.So Doing these small steps convert wordpress pagination to the Ajax Pagination.Now you have ajax pagination in wordpress fast and easy.
tnx for visiting designaeon.com .Please hit share and like if you find the content useful.Just comment if any problem found.

[separator /]

This Post Has Been Viewed 329 Times

Tags : , ,

9 Replies

  1. Pradeep says:

    Nice tutorial thanks for the share.

  2. hai,

    Where the right place to put the pagination? & may i see the complete code?
    before i read this tutorial, i used wp_pagenavi() where, first step is loop the query post followed by call wp_pagenavi(); to show pagination. there is the same way to do in this tutorial?

  3. Ramandeep Singh says:

    ITs Quite SImple Just put the code in header.php above the function wp_head() ,Find your content area( ids or classes) which contains all blog posts with the paginator then ,just change the script accordingly.

  4. Tineke inTOWN says:

    With a closer look you can see that #content loads twice once the navigation has been clicked. Or am I doing something wrong?

    1. Ramandeep Singh says:

      Yes You are doing something wrong.You take your main content div,,which contains ,,,the all the posts along with the paginator.
      Take a look at this example:

      In the script you gonna grab the contents of the meat in the to the meat.Like

      load(link + ‘ #meat’);
      So the next page data will be loaded to the main meat wrapper.
      If in your wp theme the paginator and content are not wrapped by some div ,,then wrap them in a div and then load the next page/previous content in that div.

      I hope you understand what im tyring to say.

  5. Dawid says:

    Man, thats very good ma tutorial! I was try many others plugins for WP, but only yours working perfectly! Thanks!

  6. jason says:

    Great stuff – is there a way to keep it from jumping back to the top after it’s clicked?

  7. jibyjose says:

    I use this with wp_paging. But i can’t get the previous links. Please help me. Thanks in advance.

  8. Phillip says:

    This is a great snippet, but it doesn’t work with newer versions of jQuery as .live is depricated.
    Here’s a revised function I use that works:

    jQuery(function($) {
    $('#content').on('click', '#pagination a', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    $('#content').fadeOut(500, function(){
    $("#spinner").fadeIn(500);
    $(this).load(link + ' #content').delay(1500).fadeIn(500, function(){
    $("#spinner").fadeOut(500);
    });
    });
    });
    });

Leave a Reply

%d bloggers like this: