Ajax Pagination

Several days ago some people ask me about how to implement some ajax pagination into their theme. If you Google it, you will found a hundred or maybe a thousand results which discuss about this problem, some of them is telling you about how to create a pagination like what Twitter have (Infinite scrolling using load more button).

For me infinite scrolling is useful but depends on what section you use it. For example, for a plain design like Twenty Twelve theme, this feature may help a lot. But, for a complex themes like what ColorLabs or many other vendor have, it may not help.

This time i will share to you about another (forgotten) ajax pagination, basically this pagination is same as regular pagination which will displaying a several posts while the older post is remaining hidden until you press the navigation button (older or newer posts navigation).

Untitled

But what make this pagination better is the ajax it self, your page will not refreshed to call the older/newer posts.

Ok, the code is very simple:

jQuery(function($) {
    $('#content').on('click', '.outer-submit a', function(e){
        e.preventDefault();
        var link = $(this).attr('href');
        $('#content').fadeOut(500, function(){
            $(this).load(link + ' #content').fadeIn(500);
        });
    });
});

The code above is the JQuery which is used, you can put it into your js file (if you are ColorLabs themes user, then you can put this code into zero.js file. This file is located at wp-content > themes > your-themes > includes > js).

Also here are several information that you may need:

  1. #content, this is the main layer which covered the looping code
  2. .outer-submit, this is the navigation layer

Then here is your looping code:

<div id="content">
    <?php
$new_query = new WP_Query();
$new_query->query('post_type=post&showposts=8'.'&paged='.$paged);
?>

<?php while ($new_query->have_posts()) : $new_query->the_post(); ?>
<div class="headline-entry">
	<article class="list-post">
			<?php colabs_image('width=320&height=240&before=<div class=entry-image>&after=</div>');?>
			<div class="entry-post">
				<h4 class="entry-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
				<div class="entry">
					<?php the_excerpt(); ?>
				</div>
			</div>
	</article>
</div>
<?php endwhile; ?>
	<div class="outer-submit">
    <?php next_posts_link('&laquo; Older Entries', $new_query->max_num_pages) ?><br/>
    <?php previous_posts_link('Newer Entries &raquo;') ?>
    </div>
</div><!-- #content -->

Also here are several information that you may need:

  1. showpost=8, this code is used to declare how many posts which is displayed per navigation page
  2. post_type=post, i made this code like this one so if you want to use this code with custom post type, you can do it easily
  3. colabs_image, this code is belong to ColorLabs themes, this code is used to displaying an image (thumbnail) from a post. Then, if you are not using ColorLabs theme, you can change this code into the code which is used by your theme to displaying a thumbnail

You can put this looping code at any section you need, like index.php, etc.

Simple code isn’t it?

Advertisements

11 thoughts on “Ajax Pagination

  1. If you dont mind, exactly where do you host your site? I am looking for a very good web host and your blog seams to be fast and up all the time

  2. It is challenging to come across knowledgeable individuals with this topic, on the other hand you look like there’s extra that you are referring to! Thanks

  3. Thanks for generating the sincere attempt to discuss this. I feel extremely powerful about it and wish to read far more. If it is OK, as you acquire a lot more in depth knowledge, may well you thoughts adding additional articles similar to this one with extra information and facts? It could be extraordinarily valuable and handy for me and my associates.

  4. Hello I will be as a result excited I discovered the webpage, I seriously located you unintentionally, though I had been exploring upon Google concerning yet another thing, Anyhow I will be here right now and would most likely wish to point out cheers to acquire a incredible post plus a all-round thrilling weblog (I additionally definitely like the actual theme/design), I don’t have sufficient time in an effort to browse all of it within the second but I possess saved that as well as added your own Bottles, when I have time I am returning to examine far more, Please do preserve the genuinely wonderful job.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s