- 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.
I now added links to Next&Previous Pages.
I am using Content selector: #postings-list-in-loop
and
Post selector: .postings-list-posting
unsuccessfull… Anyone?
THX!
I’ve tried everything but I cannot get this to work on my site. Please help!! My site is… itsallmindcontrol.com
for the Content CSS Selector I have : #home blog col-2-left loggedin
for the Post CSS Selector I have : #home blog col-2-left loggedin div.post
for the Navigation Links CSS selector I have : navigation
for the Previous Post CSS selector I have : div.post-date a:first
can some please please help
Derrick,
nextSelector : “.page-navigation a:first”,
navSelector : “.page-navigation”,
contentSelector : “#primary-content”,
itemSelector : “#primary-content div.post”
Thank you so very much! Worked like a charm
I’m trying to get this to work on a draft of a project but I can’t figure out what my selectors are. I’ve tried several combinations but just can’t get anything to happen. Help?
Email might be best. Thanks!
Why won’t this work with my theme? Is there anything I can change?
I’m sure I have the selectors right. I don’t get an error or anything at all, it just shows up normally as if nothing has changed.
Cory you have a js error with fancybox ( the script is 404ing)
The might be breaking everythign for you
as for selectors..
#blog is the container but the rest are probably the defaults.
gluck
Is there a way to use the Wordpress plugin similarly as the demo? I want to add a “read more” link, but the Wordpress plugin has no options to do this and loads the posts on scroll.
@Zack,
No that’s not really infinite scroll, but instead hooking up some ajax to a click event. It’s pretty damn easy to do with jQuery and the load() function (passing it a selector). I’d read up some tutorials about that and try my hand at it.
Cheers
hi paul,
i saw that you support the twitter/facebook style manual trigger event to load the next array of posts… but… my javascript and php are so rusty i would not be able to implement it on my own. since your code automagically replaces the prev / next buttons, i would not know where to start. can you help out a novice easily implement the manual trigger? is it simple as dropping in a new function or something in The Loop? or could you supply me with more precise instructions on how to do it? i know its asking alot so i’ll understand if you dont/cant do it… also, any other plugins out there for wordpress that may mimic twitter ‘more’ pagination? i was not able to find any!
thanks again for the cool plugin!
thanks,
jason.
Hey Paul, thanks for the great plugin. I have 1 question; i’ve selected ‘enabled for all users’ but the magic only works when I’m logged in… Any tips?
Could this work for comments instead of (or also) posts?
Sorry Ken,
It doesnt really work with comments as built, and you’d have to adapt the jquery script to do it yourself.
Hi Paul,
I’m trying to make your plugin work in kind of a less common way. A client of mine, Anthem Branding has requested that I set their portfolio page up with your plugin so that it starts with a few rows of client projects, but is able to load more rows when someone scrolls to the bottom of the page.
So far I have set up their content so that it starts with nine entries in three rows and then has a dynamicly generated next button which uses a get variable to load more content. I have installed the wordpress infinite-scroll plugin but I’m having trouble configuring it.
The page I’m working on right now is this one: http://www.anthembranding.com/ .
Do you have any advice?
thanks,
Brannon Sherry
Code Junkie LLC
Hi amazing plugin, I had it working but now it says loading then fails to bring up the posts. What am I doing wrong? thanks.
OK haha it’s started working again? i’m happy
Hey Paul! Nice plugin but I can’t get it to work on my site. The preloader works but there’s no infinite scroll. I’m using wordpress theme ambiru. Any suggestions?
Hi Paul.
Great plugin.
It works flawless on my wordpress photoblog.
Your FAQ says it doesn’t work on categories and archives, but it do works on them (in my case at least).
Could it be because i use the style ‘http://photo.vampire.be/2010/01/’ and ‘http://photo.vampire.be/category/365/’, witch looks a lot like ‘http://photo.vampire.be/’
Like with a trailing ‘/’
Anyway, it works perfect. :-)
Great job.
Hey there - awesome project.
I finally got it to work in my WordPress theme - my mistake was that I forgot to use wp_footer(); in the footer.php file.
Anyhow, now it all works like it should and I have a question:
I let the first posts fade in, is there a way to do this with the new posts that get loaded as well?
no idea what the selectors are for my site! help!