WP More Posts

I’m sure most of you have thought this once or twice. Sometimes it just seems unnecessary to to reload the entire page when your visitors want to see more posts in the archive or more cases in your portfolio. Wouldn’t it be sweet to just load the posts dynamically using AJAX, like for example twitter does when you scroll to the bottom? This is exactly what WP More Posts does. Utilizing the API-like interface of WP JSON Posts, posts are fetched and included on the page you’re already viewing.

Download WP More Posts and play with it now! It might even work without any configuration at all (not likely though). Otherwise read through the documentation and you will be able to accomplish any magic you want.

How WP More Posts works

WP More Posts consists of essentially three parts. The jQuery plugin jqMorePosts takes care of the AJAX:ing, formatting and outputting of the new posts, the WordPress plugin WP JSON Posts returns the posts as JSON, and finally this plugin does nothing but putting these two together. Simplicity is the keyword for all of my public and private plugins. The part you need to worry about is the jQuery plugin.

Note that just like the case for WP JSON Posts this plugin does not work for custom queries, unless you somehow execute the query before the template is loaded.

How to use jqMorePosts

The syntax is like any jQuery function. Pass a jQuery object of the element where your posts are found to the morePosts() function. For example $(‘#content’).morePosts(settings). The settings might be more complicated but if you’re familiar with the callback style that’s common in jQuery you should be just fine. As always they are sent in an object.

Settings

• requestUrl (string) (required) Where to get the posts from. In most cases, for example on the front page, this will be window.location.href. Default: undefined.
• chunk (function/int) A function that returns how many posts to fetch from the server each request. Default: 10.
• imgSize (string) The size of the featured image. Default: ‘small’.
• current (function/int) A function that returns how many posts you already have (corresponding to WordPress’ offset). Default counts number of .hentry (.post since jqMorePosts v1.0.2) in the selector.
• exclude (array) Items you don’t want to be returned to save bandwidth. Default: ['the_content','the_post_thumbnail'].
• before (jQuery object) In case you have an element (earlier/later posts) at the bottom that you want to remain at the bottom, send them as a jQuery object. Default: undefined.
• queryString (object) Send additional data to the sever here. Default: {}.
• triggers (function) This function is run when initializing WP More Posts. Use it to bind events to custom functions that triggers fetching of more posts. Default is to compare the lower side of the container with the window scroll offset and fetch more posts if it’s visible (aka you’ve scrolled to the bottom). Note that the closure is changed so that this refers to this instance of jqMorePosts.
• walker (function/string) Function that processes each post and returns it as html. See in-line documentation for more on what parameters you can use, or read the documentation for WP JSON Posts.
• error (function) Callback that executes when an error has occurred. By default it pauses the getPosts function on 404 temporarily. Pausing indefinitely when out of posts might also be a good bandwidth saver. Se more below about pausing.
• complete (function) Callback that is executed when fetching is finished. Might be useful for something like  fading in the new posts.

Miscellaneous functions and stuff

WP More Posts uses the .data() jQuery function for storing all settings and variables. Thus using $(selector).data(‘morePosts’) you can access these and change these as you like. It’s not recommended to change the default variables though, but I leave that choice to you.

One such useful variable is .data(‘morePosts’).isAvailable that is used by pause(), resume() and getPosts() to determine whether or not to get more posts or not.

If you want to force post fetching just call .morePosts(‘getPosts’) directly. Just make sure isAbailable mentioned above is true. The easiest way to do this is to call .morePosts(‘resume’). The stop fetching posts .morePosts(‘pause’) will do. If you don’t want my plugin anymore just call .morePosts(‘die’) and all associated event listeners are removed. Delete any references to .morePosts and it’s gone.

Don’t forget to Download WP More Posts! I’d also be happy if you told me how you used it in the comment section below.

Examples

The following code is what I use in this portfolio. What’s probably unique to my site is the chunk function that counts the length of the first row and the last row to calculate how many posts to get to fill one row.

jQuery(function($){
    $('#content').morePosts({
        requestUrl: document.location.href,
        chunk: function(){
            var $cases = $('#content .case'),
                lastY = undefined;

            for( var i = 0, l = $cases.length; i < l; i++ ){
                var $c = $($cases[i]);

                if( lastY && lastY != $c.offset().top ){
                    break;
                }
                lastY = $c.offset().top;
            }

            return ((i - $cases.length % i) > 2 ? (i - $cases.length % i) : (i - $cases.length % i)*2);
        },
        current: function(){
            return $('.case:not(.welcome)').length;
        },
        exclude: ['the_date', 'the_content', 'the_excerpt'],
        imgSize: 'case',
        before: '#pagenav',
        walker: function( post ){
            return ('<div>'
                + '<h2><a href="' + post.the_permalink + '">' + post.the_title + '</a></h2>'
                + '<a href="' + post.the_permalink + '">'
                    + '<img src="' + post.the_post_thumbnail[0] + '" />'
                + '</a>'
                + '<a rel="category tag" style="' + $('#content .case').last().children('a[rel*=category]').attr('style') + '" href="' + post.the_category[0].cat_url + '">'
                    + post.the_category[0].cat_name
                + '</a>'
                + '</div>\n');
        },
        triggers: function(){
            var $this = this;

            $this.morePosts('comparePos');

            // When scrolled, check new window position
            $(window).bind('scroll.morePosts', function(){
                $this.morePosts('comparePos');
            });

            $('#pagenav a.page-numbers').click(function(e){
                e.preventDefault();
                $this.morePosts('getPosts');
            });
        },
        error: function( mpError ){
            if( mpError === '404' ) {
                $this.morePosts('pause', 5000);
            }
            else if( mpError === 'noMorePosts' ){
                $('#pagenav').empty().append('<span>How embarrasing, I\'m out of posts...</span>');
            }
        },
        complete: function(){
            $('#content').resize();
        }
    });
});