Automatically pull newer posts and append to current page.

I was in the same situation as you recently. The way I did it is probably wrong, and prone to bugs but if you can live with that then this might help.

Basically you create an empty array at the top of your loop file, say for example loop-index.php.

$ignores = array();

Then inside your post loop you want to add these post IDs to the array (inside your while loop).

$ignores[] = $post->ID;

Then you’ll obviously have a link which can be clicked to show more posts with a Javascript click event binded too it presumably using jQuery. On the link set a rel tag to be the array of ID’s, you’ll have to do a foreach over the array and separate each by a comma.

Then in the loop template looking for the GET variable being passed from the AJAX url and use a post__not_in conditional on your WP_Query so it doesn’t load in those ID’s of already loaded posts.

If you need example code, I would be happy to write you an example.

I was in the same situation as you recently. The way I did it is probably wrong, and prone to bugs but if you can live with that then this might help.

Basically you create an empty array at the top of your loop file, say for example loop-index.php.

$ignores = array();

Then inside your post loop you want to add these post IDs to the array (inside your while loop).

$ignores[] = $post->ID;

Then you’ll obviously have a link which can be clicked to show more posts with a Javascript click event binded too it presumably using jQuery. On the link set a rel tag to be the array of ID’s, you’ll have to do a foreach over the array and separate each by a comma.

Then in the loop template looking for the GET variable being passed from the AJAX url and use a post__not_in conditional on your WP_Query so it doesn’t load in those ID’s of already loaded posts.

If you need example code, I would be happy to write you an example.

** Update w/ Example Code **

<div id="posts">
    <?php

        $numposts = wp_count_posts('post');
        $numposts = $numposts->publish;

        // Posts per page
        $per_page = 9;

        // Determine total amount of pages
        $total_pages = ceil($numposts / $per_page);

        // Get current page
        $paged      = (get_query_var( 'page' )) ? get_query_var( 'page' ) : 1;

        // Above your loop
        $ignores = array();

        // If we have sent ignore ID's
        if ( $_GET['ignore'] )
        {
            $get_ignores = trim($_GET['ignore'], ',');
            $get_ignores = explode(',', $get_ignores);
        }

        // If we have ignore ID's
        if ( !empty($get_ignores) )
        {
            foreach ($get_ignores AS $k => $v)
            {
                $ignores[] = $v;
            }
        }

        $count = 1;

        $my_args = array(
            'posts_per_page' => 9,
            'paged'          => get_query_var( 'page' ),
            'post__not_in'   => $ignores,
            'post_status'    => 'publish'
        );                                  

        $my_query   = new WP_Query($my_args);

        if ( $paged <= $total_pages):
            $paged = $paged + 1; 

            // The loop
            while ( $my_query->have_posts() ): $my_query->the_post();
                // At the start of the loop populate the used post ID's
                $ignores[] = $post->ID;
    ?>
        <div class="post">
        <h2><?php the_title(); ?></h2>
        </div>
    <?php $count++; endwhile; endif; ?>
    <?php 

        if ( $ignores AND is_array($ignores) )
        {
            // Create a comma separated string of ignore ID's
            foreach ( $ignores AS $k => $v ) {
                $ignore_str .= $v.',';
            }

            // Trim the ignore string of any rogue commas
            $ignore_str = ltrim($ignore_str, ',');
            $ignore_str = rtrim($ignore_str, ',');

            $ignore = site_url('page/'.$paged.'/?ignore=".$ignore_str."');
        }

    ?>

<a href="#" rel="<?php echo $ignore; ?>" id="load-more">Load More Posts</a>

</div>

<?php if ( !$my_query->have_posts() ) : ?>

    <section id="no-posts">
        <div id="post-0" class="post error404 not-found">
            <h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
            <div class="entry-content">
                <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyten' ); ?></p>
            </div>
        </div>
    </section>
<?php endif; ?>

<script type="text/javascript">
(function($){
    $("#load-more").on('click', function(e) 
    {
        e.stopImmediatePropagation();

        $("#posts").append("<div id='loading'><p>Loading posts</p></div>");

        $("<div>").load($(this).prop('rel') + ' #posts', function() 
        {
            $('#posts').append($(this).find("#posts").html()).fadeIn('slow');
            $("#loading").remove();
        });

        if ($("#no-posts"))
        {
            $("#no-posts").remove();
            $("#load-more").remove();   
        }

        e.preventDefault();

    });
 })(jQuery);
</script>

Leave a Comment