Want to see infinite scroll in action?

Aurgasm.us ROFLCon Tinyways

Installation

(I recommend using the OneClick wordpress plugin. It makes plugin installation a piece of cake, especially if you’re doing more than one.)

  1. Download the plugin.
  2. Install it to your /wp-content/plugins/ directory
  3. Activate the plugin in your Wordpress Admin UI.
  4. Visit the Settings / Infinite Scroll page to set up the css selectors.
  5. The plugin will now work for a logged in Admin, but will be disabled for all other users; you can change this.

CSS Selector Setup

You need configure the plugin with CSS selectors that match your theme.

Content CSS Selector
The DIV that wraps around all posts. New posts will be inserted at the bottom of this DIV.
Post CSS Selector
The selector that selects all posts on a page. Each post must be surrounded by a single DIV.
Navigation links CSS Selector
This DIV contains the Next Posts and Previous Posts link.
Previous Posts CSS Selector
This A tag is what points to the 2nd page of posts.

Troubleshooting

  • Your posts need to be wrapped in divs all next to each other.
  • You need a link on your page to the next page of posts.

FAQ

Can I change the number of posts loaded?
Yup. But that’s a Wordpress thing. Go to Settings / Reading
Is it SEO-Friendly?
Yes all enhancements are made via javascript only, so search spiders see no difference.
Is it accessible?
Things won’t change for screen-readers. This technique degrades gracefully.

Customization

This information will probably help styling.

  • <div id="infscr-page-2" class="infscr-pages"> will contain the page 2 content, etc
  • <div id="infscr-loading"> is the loading div.

Changelog

  • 2008 June 29 - 1.0 release.

Who made this?

Paul Irish of Aurgasm wrote the original javascript and now maintains the project.

dirkhaim of tinyways took Paul’s original code and built it out into a full fledged Wordpress plugin with configurable options.