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

What WP JSON Posts does is returning any page, post or feed you like as JSON. If you want to load a page into a lightbox you shouldn’t need to use something else than the actual URL. And that’s exactly how easy WP JSON Posts is to use. An AJAX request to http://example.com/this-is-my-page?jsonposts=1 will give you a JSON representation of that page.

I’m sure you already got some ideas about how you can implement this in your own theme or plugin. Go ahead and download WP JSON Posts now! Otherwise just read on and I’ll show you just how deep the rabbit… how much you can accomplish with this WordPress plugin.

Feature overview:

• Get JSON data for any post, page, archive, the front page etc.
• It works even for custom posts and taxonomy archives.
• And all this are enabled completely automagically.
• Choose what data you need.
• Customize number of posts and what posts you’ve already got.
• No bloat. No unnecessary functions. You are free to do whatever you want.
• It’s free! Licensed under GPLv3.

Note: custom queries, page templates and other stuff you put in the template files are ignored. That’s kinda the definition of this plugin.

What exactly does it do?

The strength of WP JSON Posts is that it’s based on WordPress own built in post query. That is, when you visit a certain URL WordPress does some hard work figuring out what you want to see and goes to get those posts. Usually WordPress then applies the correct template, be it single.php or taxonomy-whatever.php. But if WP JSON Posts finds a key named ‘jsonposts’, the theme is swapped for JSON.

As of version 1.0.1 the following data can be returned for each post:

• ID
• the_title
• the_content
• The content already HTML-formatted
• the_excerpt
• the_category
• An array for every category as an object. The same data as in the WordPress category-object plus the url.
• cat_ID
• cat_name
• cat_url
• category_count
• category_description
• category_nicename
• category_parent
• count
• description
• name
• object_id
• parent
• slug
• taxonomy
• term_group
• term_id
• term_taxonomy_id
• the_date
• Date formatted as “2009-06-11 10:58″. May be subject to change in future updates.
• the_permalink
• the_post_thumbnail
• Array of image properties:
• url
• width
• height
• crop (bool)

There’s one more thing…

Well, four actually. These are the parameters you can send as GET requests to customize what post data that are returned. In summary you could send &exclude=the_content-the_category&number_of_posts=10&offset=10&imgsize=small.

The above data contains pretty much a shitload of data which might be unnecessary. Often you only want the title and the featured image. Thats where the &exclude parameter comes in handy. My plugin expects it to be a dash-separated string of properties to remove. For example &exclude=the_content-the_date-the_category would remove those properties from the returned post objects. Default is to send everything.

Sometimes you don’t want to get the full normal result of a feed, but only the first couple of posts. For example on the front page of my portfolio I want to get a different number of posts depending on how long the rows are. &number_of_posts=5 will take care of this.

The third parameter you may attach is &offset. This is used to specify how many post you’ve already got, just like WordPress’ own offset parameter. &offset=10 would start getting posts at the eleventh post. Default is 0.

Finally you might have to specify what size you want the featured image to be. &imgsize=case would return the image size named “case”. Default is “small”.

By now I’m really sure you’ve got a few ideas how to use this plugin. Why don’t you download WP JSON Posts now? And don’t hesitate to write some feedback in the comment section below.

In the front end you’ll find an inspirational slideshow, a video blogg and an image gallery with lightbox enlargement. In the back end there’s an internal chat, group management and custom image taxonomies. All this with 36 users and three custom user levels in mind.

Special features is the content slideshow on the front page that is easily edited, and the image lightboxes on some pages for viewing large size images. All this was of course made using WordPress.

Visit fistulasjukhuset and see it yourself!

Some noteworthy features are the real-time search, where a user gets suggestions based on existing reviews while typing, and signing in using Facebook connect to avoid the need for creating an account.

Prakti was awarded a scholarship for “best development project”.

Except from design I also created new content, restructured the usable content and added some missing features. For example commenting, an automatic document archive etc. One challenge was to incorporate existing functions from the old CMS into WordPress, which I did using custom built plugins.

To make the content easily updated, “custom post types” were used heavily. They are used to difference between different kind of content, e.g. products and articles, make each as easy to update as a Word document. Since I’m a friend of availability, all features are still working even if JavaScript is disabled.

The most prominent change design-wise is that I put a lot more images on the front page to immediately convey what services Häståkeriet offers. Another feature is the custom made calendar that shows when the activities occur.