Infinite Scroll in WordPress

infinity-banner

Infinite scroll has become a standard feature in many web applications. Twitter and Facebook are the ones I use every day, but it’s also in a ton of Tumblr themes and Cargo Collective sites.

I feel WordPress themes has been slow to adopt infinite scroll- but after adding it to my site over the weekend I understand some of the complications.

Unlike Tumblr or Cargo Collective, WordPress (.org) users can use plugins to add all sorts of javascript to posts. On my site Syntax Highlighting is the main culprit (which I use to display code snippets), but many others have social buttons or lightboxed images.

When infinite scroll pulls in additional posts via ajax, it doesn’t load the javascript code from the header or footer of the post that might be needed to display js content (e.g. social buttons, formatted code, etc) properly. That puts theme authors in a bind. Infinite scroll may be a better end user experience, but it’s going to lead to more support requests during theme set up.

However, if you don’t use much javascript in your post content, or if you display excerpts on your index pages rather than full posts, I’d suggest trying it out.

The Infinite Scroll plugin recently had a complete rewrite, and I can now recommend using it again. If you use the plugin you should be able to set up infinite scroll for your theme in just a couple minutes.

I’ll also posted a tutorial about how to add Infinite Scroll to a theme without a plugin.

Useful Links:

Image Credit: Infinity Pool

About Devin

I'm a WordPress developer based in Austin, Texas. Follow my projects on GitHub, or more general WordPress ramblings as @devinsays on twitter.

4 Responses

  1. Hi Devin. I’ve been using infinite scroll since the need for it arose in one of my projects. It’s true that it doesn’t call back the scripts from the header or footer but you can always call it back after. Here’s what I mean:

    http://pastebin.com/dj47K4XV

    I hope this helps somebody out there.

  2. twinke

    hi, your tutorial is really very helpful, but i am facing here a problem…as it’s working fine with firefox and chrome,but in ei8 it’s not working…please help me….

Leave a Reply

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>