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.
<?php wp_enqueue_script("jquery"); ?>
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.
<script type="text/javascript">
jQuery('#Pagination a').live('click', function(e){ //check when pagination link is clicked and stop its action.
e.preventDefault();
var link = jQuery(this).attr('href'); //Get the href attribute
jQuery('#content').fadeOut(500, function(){ //fade out the content area
jQuery("#loader").show(); // show the loader animation
}).load(link + ' #content', function(){ jQuery('#content').fadeIn(500, function(){ //load data from the content area from paginator link page that we just get from the top
jQuery("#loader").hide(); //hide the loader
}); });
});
</script>
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.
Posted Under Categories:
More Stuff About:
Nice tutorial thanks for the share.
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?
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.
With a closer look you can see that #content loads twice once the navigation has been clicked. Or am I doing something wrong?
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.
Man, thats very good ma tutorial! I was try many others plugins for WP, but only yours working perfectly! Thanks!
Great stuff – is there a way to keep it from jumping back to the top after it’s clicked?
I use this with wp_paging. But i can’t get the previous links. Please help me. Thanks in advance.
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);
});
});
});
});