A web developer's blog. PHP, MySQL, CakePHP, Zend Framework, Wordpress, Code Igniter, Django, Python, CSS, Javascript, jQuery, Knockout.js, and other web development topics.

Infinite Scrolling with WordPress

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

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>