- Download the plugin.
- Install it to your
/wp-content/plugins/directory - Activate the plugin in your Wordpress Admin UI.
- Visit the Settings / Infinite Scroll page to set up the css selectors.
- 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
DIVthat wraps around all posts. New posts will be inserted at the bottom of thisDIV. - 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
DIVcontains the Next Posts and Previous Posts link. - Previous Posts CSS Selector
- This
Atag 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.
- 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.
- 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.
- Do I need to edit my theme to make this work?
- Probably not, nope.
- Will this do form posts for get new data?
- Nope?
- You mean it just works?
- Yup.
- Really?
- I hope so. But due to the infinitudes of wordpress installations, each case is different. Different themes and other plugins may break infinite scroll’s functionality.
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.
Hi Paul!
Thanks for this Plugin. I am facing a weird problem using it together with JQuery Masonry in the WP Theme I’m developing -> http://dfhase.0fees.net/
In the options panel I call this script after the next posts are fetched:
$(’#content’).masonry({ appendedContent: $(this) });
like David specifies in this tutorial: http://desandro.com/demo/masonry/infinite-scroll.html
Everything works fine except it seems that every time the next posts are fetched there is a lot of empty space prepended to the very fist post.
Do you have any idea what the problem could be?
Thanks,
Alex
Hi Paul,
After upgrading the plugin, the code you provided to add a div and page number above the next set of results does not seem to work any more.
[code]
‘var page = $(this).attr(’id’).match(/\d+/)[0];
$(this).prepend(’Page ‘+page+”);’
[/code]
Has anything changed that might affect this?
Cheers
Ben
Hi,
I cant get the plug-in to work on my page, I dont know what to put in the fields. Can you pleace help me?
- The website is: http://www.locoloco.no
Thanks!
Hi Paul, and thank you for this very nice js.
I’ve got the same problem than Alex N.
With WP and the jQuery masonry js, i have the same empty space prepended to the first post. The height of this space seems to be the same height than the page “1″ : a blank duplica of the page 1 if you prefer.
Do someone has the same issue with WP and masonry ?
Thanks!
N
Ok, i found the issue here : as said on david desandro page
Infinite Scroll v1.4.091129 is compatible with Masonry, the version included in this repository, later versions may not be supported.
Works fine with this version !
Regards,
N
BenC, yah i definitely broke that… no update on when it’ll be fixed.