I got the chance to implement this in WordPress.
The first step, install the JSON API plugin for WordPress. It can be downloaded here: http://wordpress.org/extend/plugins/json-api/ or just search “JSON API” in your WP-Admin plugins section.
This plugin is really neat because it gives us a JSON response for any WordPress press by just appending ?json=1 at the URL. For example if I load this URL with the plugin installed: http://localhost/?json=1 I get a response in JSON containing the Posts in my frontpage.
{
status: "ok",
count: 2,
count_total: 24,
pages: 12,
posts: [
{<snipped - will contain the title, excerpt, date, etc.>},
{<snipped - will contain the title, excerpt, date, etc.>}
]
} |
In your template you just need to setup a container for the dynamically loaded items and a “loading” gif image.
<div id="ajax_content"></div>
<div class="row" id="loader">
<div class="span12" style="text-align: center; margin-bottom: 20px;">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/ajax-loader.gif" alt="" />
</div>
</div> |
The javascript part is pretty straight forward. The unlocked variable is pretty important since it prevents duplicate calls to the AJAX request. This is only quick way I got around that problem (duplicate calls).
<script language="javascript" type="text/javascript"> page_number = 2; //starting with what page number? template_directory = '<?php echo get_bloginfo("template_directory") ?>'; unlocked = true; //this is to make sure we only load once $(window).scroll(function() { if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { $("#loader").show(); if (unlocked) { unlocked = false; $.ajax({ type: "GET", url: "<?php echo get_bloginfo('url'); ?>/page/"+page_number+"", data: "json=1", success: function(data){ console.log(data) page_number++; if (page_number <= data.pages) { $.each(data.posts, function(key, val) { console.log(key+" > "+val.title) $("#ajax_content").append( '<div class="row">'+ '<div class="span12">'+ '<h2>'+ '<a href="'+val.url+'" rel="bookmark" title="Permanent Link to '+val.title+'">'+ val.title+ '</a>'+ '<p>'+val.excerpt+'</p>'+ '</div>'+ '</div>' ); }); } $("#loader").hide(); unlocked = true; } }); } } }); </script> |
Credits:
Stackoverflow
Ajax Load
twitter.com/wenbert