I'm using the following JavaScript to load more pages in #work_items (see live at http://mtthwbsh.com):

$('.older a').live('click', function(e)  {
$('.navigation').prepend("<div class=\"loader\">&nbsp;</div>");

var link = jQuery(this).attr('href');

var $content = '#work_items';
var $nav_wrap = '.navigation';
var $anchor = '.navigation .older a';
var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts

$.get(link+'', function(data){
var $timestamp = new Date().getTime();
var $new_content = $($content, data).wrapInner('').html(); // Grab just the content
$('.navigation .loader').remove();
$next_href = $($anchor, data).attr('href'); // Get the new href
$($nav_wrap).before($new_content); // Append the new content
$('#rtz-' + $timestamp).hide().fadeIn('slow'); // Animate load
$('.older a').attr('href', $next_href); // Change the next URL
$('#work_items .navigation:last').remove(); // Remove the original navigation


Currently, if you are on the last page of posts and click "load more" again, it loads the same last page again. I'd like to conditionally not run the function if no pages are left (and replace the button with something like "no more posts"). How would I go about doing this?

Here is the markup I'm using for the pagination:

<div id="work_items">
<?php $paged = (get_query_var('page')) ? get_query_var('page') : 1;
  query_posts($args); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 

    <div class="box">
    <div class="thumbnail">

    <a href="<?php the_permalink(); ?>">
        if ( has_post_thumbnail() ) {
    </div><!-- THUMBNAIL -->        


    <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>

    </aside><!-- ASIDE -->
    </div><!-- BOX -->

<?php endwhile; ?>

Another unrelated issue I'm having is that I am targeting every fourth post with nth-child(4n)to clear a margin, but for some reason after the first set of posts it starts targeting the first post of the next set. Is there something weird about how WordPress handles the order of elements?

Thanks for your help!

  • 1
    Do not use query_posts().
    – kaiser
    Dec 29, 2013 at 23:43
  • @kaiser what should I use instead? Don't I need to use query_posts to select the cat I want?
    – mtthwbsh
    Dec 30, 2013 at 0:18
  • 1
    Pretty much NEVER! See here
    – JMB
    Dec 30, 2013 at 0:51
  • Read the link (we both) linked to?
    – kaiser
    Dec 30, 2013 at 1:53

2 Answers 2


Yes use wp_query :)

Anyway, to prevent loading posts while you're out of pages, you need to know the current page number last loaded and the total number of pages that exist.

Total pages that exist: $max = $wp_query->max_num_pages; Current page: just count it in your load loop, so set the var to 1, then iterate it each time the load button is clicked.

Then you can just compare the 2 when the button is clicked and before you do the operation: if(pageNum <= max) { //do your stuff }

An excellent tut on this is here, I used it to build my own stuff: http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/

Concerning your 2nd non-related question: it's probably because of your markup. I see you load boxes in a wrapper 'work-items' but the new boxes added after load don't go in that wrapper. :nth only works when it has a clear parent, so #work-items .box:nth(4n)

Good luck!


I would follow along with this tutorial http://wp.tutsplus.com/tutorials/getting-loopy-ajax-powered-loops-with-jquery-and-wordpress/

I used it recently to compile a page with masonry, isotope and ajax loading of posts. Worked out quite nicely with a bit of tinkering.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.