WP More Posts

Posted 11.11.06 @ 19:35 | Last updated 11.11.20
Wordpress Project

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

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();
        }
    });
});

Comments

1 comment

  • WP JSON Posts - Andreas Hultgren

    [...] automagically load new post to the bottom of your front page like Twitter do (u might wanna look at WP More Posts)? Maybe you want to load some pages with AJAX and display them in a fancy lightbox like I do (try [...]

  • Tell me what you think