Installation

(I, in general, recommend using the OneClick wordpress plugin. It makes plugin installation a piece of cake, especially if you’re doing more than one. Not that installing this plugin is hard or anything…)

  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.

17 comments.

17 Comments »

Comment by BOLL
2008-07-01 06:08:56

It will not load for me if I don’t edit the path it uses to load the hotness.js manually in the plugin. I have my blog in a sub folder on the server, but it is configured to load when entering the root of the doamain. The script fails to load when it tries to access itself from the path without the sub folder. Again, if I edit the path manually to the full path, including the sub folder, it does work.

Another thing, even when fixed, it doesn’t seem to load at all when displaying posts filtered by tags. Is it supposed to do that or should I edit the plugin myself to get it to work?

I’ve disabled it for now, but thanks for a very interesting plugin in any case! I’ll have to spend more time with it to make it suit my needs.

Comment by Paul Irish
2008-07-01 21:00:28

Thx for digging into the plugin, BOLL. This is great feedback. The first two are bugs and I’ll fix them promptly.

Currently the plugin is disabled for everything but the main page, but I’ll work on enabling it for Archives, Categories, and Tags (and maybe some config for each of those too.)

 
 
Comment by Len
2008-07-02 22:17:40

I have a problem getting this to work, it is possible that I don’t have it configured correctly. When I scroll to the bottom of my main page, I get the “loading next post” graphic, but it never loads any additional posts. The graphic goes away and the older posts are not appended on the end. Thoughts?

Thanks, Len

Comment by Paul Irish
2008-07-02 22:53:39

Sounds like your post or content selectors are not right. If this is Firehole. Your Content selector is

#content

and post selector is

#content div.post

.
If its another site, please share the URL so we can take a look.

Comment by Len Hardy
2008-07-03 08:09:41

Paul -

Thanks for the quick reply. I have my selectors set up as you suggested. I have the same issue, the “loading next post” graphic appears and then disappears but no additional posts are displayed. I’ve left the plug-in configured and activated in case you have time to take a quick look.

Thanks!

Len

(Comments wont nest below this level)
 
 
 
Comment by Gex
2008-07-04 03:29:17

This plugin is a great concept, but I’d still consider it beta. I can’t get it to work though it says it’s activated. I’ve even tried to use it with the basic WP default theme. Dontcha think the plugin should work “out of the box” with it’s default settings on the default theme at least? Without at least that functionality I can’t figure out how to adapt it to my theme. Thanks!

Comment by Paul Irish
2008-07-08 16:43:06

Gex, things should be working with the WP default theme now.
I accidentally had referenced “wp-infinite-scroll/” in my php code, but the wordpress plugins site was using the folder “infinite-scroll/” without the wp- prefix.
Now it should work out of the box. My bad!

 
 
Comment by burrob
2008-07-08 14:00:21

First of I have to say big up for this nice plugin. Unhappily I don’t get it work with the actual wp default theme. Could you please give us a description what to do to get this plugin work with the actual default theme so we can transform it to other themes? Do we need a special arrengement of our html code beside your troubleshooting hints?

Perhaps you can have a look at my website (blog.ralf-hellriegel.de) to figure out what’s wrong.. Thanks!

Comment by Paul Irish
2008-07-08 17:28:49

fixed over email! you’re all set, buddy.

 
 
Comment by freedy
2008-07-14 18:02:43

>Currently the plugin is disabled for everything but the main page, but I’ll work on enabling it for Archives, Categories, and Tags (and maybe some config for each of those too.) <

Using a news like theme posts do not show on main page. So, despite a brilliant plug-in…. it would be more if you could consider ‘config’ new update for ‘categories. archives, and tags’ please.

That would be super please if you would.

Thank you

Comment by Paul Irish
2008-07-17 09:59:02

Thanks for commenting freedy, and the feature request. I’ll start on it soon. :)

 
 
Comment by Dali
2008-07-17 06:15:36

Everything seems to be working fine, but when scrolled down to the last post the message “Not Found
Sorry, no posts matched your criteria.” keeps on coming instead of displaying the message that there are no more posts to be displayed.
Is it something in the setup that I am doing wrong or a bug in the plugin?

Cheers,

Comment by Paul Irish
2008-07-17 09:28:47

interesting.. I’m pretty sure that it’s your theme. The plugin will die when it hits a 404 status code. If it doesn’t, it’ll keep doing what you see

 
 
Comment by David Markus
2008-07-24 06:53:44

Hi Paul,

I’m very anxious to get this pugin to work, but whatever I do or try; it just won’t… I think my settings must be:
#content
#content div.entry
div.navigation

If possible, please have a look at my site, but email me first for the login credentials, ’cause it’s shielded.

thanks in advance,

David

 
Comment by p4th3t1c
2008-08-04 10:17:43

I have tried using your plugin but I can’t get it to work. The javascript doesn’t seem to be loading in to the page once the plugin is installed. I have it enabled for all users. Is it possible that it is conflicting with another plugin?

Comment by Paul Irish
2008-08-04 10:45:54

do you have it enabled for all users on http://www.p4th3t1c.co.uk right now?

i dont see it being injected into the source of the homepage.. :/

also the email you left doesn’t seem to work. do you have another?

Comment by p4th3t1c
2008-08-04 14:59:54

Yes sorry, just realised I hadn’t set it up after switching servers.

It is enabled for all users.

I have tried disabling Flickr Manager and Google Analytics, which on a quick glance were the only plugins injecting any javascript in to the page.

(Comments wont nest below this level)
 
 
 
Name (required)
E-mail (required - never shown publicly)
URI
Your Comment (smaller size | larger size)
You may use basic HTML. Wrap code in <pre lang="javascript"></pre> .