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.
• Does it still keep going, even at the end of the blog? Infinite scroll is configured to die when it hits a 404 Not Found status code, so when it goes through all your archives it should hit a /page/43/ (or something) that doesn’t exist, then show a message “Congrats, you’ve reached the end of the internet.” Some wordpress themes don’t report not found pages with a 404. Try a different theme or contacting the theme author.

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.

Why doesn’t it work on ____ page?

Currently, the plugin is disabled for everything but the main page, but I’ll work on enabling it for Archives, Categories, and Tags.

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.

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

Autopagerize adds infinite scroll functionality to hundreds of websites, including Google, Yahoo, Blogger, and Twitter. It was written by Japanese hacker swdyh with inspiration and ideas from ma.la. I strongly recommend you check it out. Naturally you’ll need the Firefox extension Greasemonkey in order for it to work.

User is browsing paged content.

Use When:

• Retaining the user is important and clicking “Next Page” is a usability barrier.
• The full content available is too large to show on initial load.
• The content is available in paged chunks: search results, blog posts, product listings portfolio features.

Advantages:

• Users are retained on the site far better.
  • Users are less likely to continue on to the next “page” if they have to click something versus it being delivered automatically to them. ^{[citation needed]}
• Requires no adjustment in a user’s typical reading habits.
• The added functionality needs no affordances or instruction.
• As long as the functionality is enhancing an existing navigational structure (like the wordpress plugin here), it remains SEO-friendly and Accessible. It will degrade gracefully if a user does not have JavaScript enabled..

Disadvantages:

• The “footer” of the page will be typically impossible to reach.
• Currently there is no way to cancel or opt-out of the behavior.
• There is no permalink to a given state of the page.
• Dynamically adding more content to the page increases the memory footprint of the browser. Depending on the browser, this could account for around 50megs of RAM.
• Analytics will not immediately capture the event, so custom configuration is required.

Implementation Recommendations:

• Depending on site latency, new content can be fetched aggressively (when a user has 500px of the page left to scroll) versus at the last moment (with ~100px left).
• User should be notified when there is no more content available.

Examples in the wild:

• Humanized Reader
• SocialThing
• Live.com Image Search
• Soup tumblelogs
• Google Reader, Yahoo Mail use the same technique but within a container

• 2005 June 28 - Bill Scott releases Rico LiveGrid and writes “Death To Paging!”
• 2005 June 23 - Ma.La releases the Google Auto Pager greasemonkey script.
• 2006 April 25 - Humanized Reader launches with “Infinite History”
• 2006 September 14(ish) - Yahoo Mail (beta) utilizes the same LiveGrid technology
• 2006 September 17 - Microsoft’s Live.com Image Search includes infinite scroll.
• 2006 October 31 - Peter Forde writes Endless Pageless and releases a Rails plugin
• 2007 April 17 - swdyh releases AutoPagerize greasemonkey script, enabling infinite scroll for nearly every site.

* Google Reader uses the same preloading LiveGrid technology. Anyone know when this debuted?

For the plugins below, the following code goes in the Javascript Callback option.

Lightbox JS 1.0 (by Lokesh Dhakar): No compatibility code available.

Lightbox JS 2.0 (by Lokesh Dhakar):

myLightbox.updateImageList();

Thickbox:

 tb_init( $jQis('#infscr-page-'+INFSCR.currPage).find('a.thickbox, area.thickbox, input.thickbox') );

1 Pixel Out Audio Player: Compatible! Version 2.0, too.

Yahoo Media Player:

YAHOO.MediaPlayer.addTracks( $jQis('#infscr-page-'+INFSCR.currPage)[0] );