- 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.
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.
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.)
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
Sounds like your post or content selectors are not right. If this is Firehole. Your Content selector is
#contentand post selector is
#content div.post.
If its another site, please share the URL so we can take a look.
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
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!
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!
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!
fixed over email! you’re all set, buddy.
>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
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,
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
Thanks for commenting freedy, and the feature request. I’ll start on it soon. :)
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
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?
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?
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.
Your contribution to the world of Wordpress Plugins is tremendous!
I’ve implemented your plug in on a friends blog successfully. However, when I tried to implement it on my personal blog I ran into a problem trying to use it at the same time as a MooTools+Slimbox (a Lightbox variant) implementation.
The website is http://www.doug-peterson.com
Right now if I include:
Then the infinite scroll will not work. Specifically the loading graphic appears, and goes away but that’s it; no addition of posts.
When I do not include those two scripts then Infinite Scroll works as advertised. Absolutely stellar UI improvement.
So if anyone has an idea of how I can get around this problem so I can use floating pics and infinite scrolling then I would greatly appreciate it.
*Double post to correct format issue
————————————-
Your contribution to the world of Wordpress Plugins is tremendous!
I’ve implemented your plug in on a friends blog successfully. However, when I tried to implement it on my personal blog I ran into a problem trying to use it at the same time as a MooTools+Slimbox (a Lightbox variant) implementation.
The website is http://www.doug-peterson.com/wordpress/. Right now if I include: mootools.js and slimbox.js then the infinite scroll will not work. Specifically the loading graphic appears, and goes away but that’s it; no addition of posts.
When I do not include those two scripts then Infinite Scroll works as advertised. Absolutely stellar UI improvement.
So if anyone has an idea of how I can get around this problem so I can use floating pics and infinite scrolling then I would greatly appreciate it.
[...] aqui e instalei, a partir da própria página onde li a respeito do conceito de Infinite Scrolling, um plugin para Wordpress que eles têm disponível. Neste momento, aliás, este plugin está ativo para qualquer visitante deste humilde blog, e, ao [...]
Great plugin. Thanks for releasing the code/plugin.
Cheers,
Matt, from Benn loxo du taccu
..I should also say, great audioblog you have too. I’ve been a fan since the very beginning.
Could someone help me define the CSS selectors on this site: http://blogblogblog.dk/blog/?
I am working on the same blog as Nilas with the exact same setup because http://suprb.com/grid-a-licious/ is giving it away. I can not get it to work on this site. or on the default WP.
Any ideas, I have it set to all users?
Here is my setup:
Content CSS Selector: #allposts
Post CSS Selector: #allposts > div.eachpost
Navigation Links CSS Selector: div.navigation
Previous posts CSS Selector: div.navigation a:first
I have the same difficulty as Garus. I can’t identify the CSS selectors for the grid-a-licious theme. Any ideas?
And also the script doesn’t seem to be appearing in the page. I’ve enabled for all users?…
that’s an impressive and very nice plug-in you made Paul! Thanks a lot for sharing it!
@chris_davenport - script not appearing: do you have installed wordpress in its own distinct directory? if you did so, you will have to edit wp_infinite_scroll.php on line 48 and 401: replacing get_option(’home’) with get_option(’siteurl’); it fixed my issue.
I host wordpress myself, do you think that’s the problem? thanks for the help.
@chris_davenport: when i say on its own i’m referring to this http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory
I have made a really huge-ass guide to adding this to the grid-a-licious theme:
Guide to adding Infinite Scroll to the Grid-a-licious theme
enjoy
Anyone having luck on tweaking the script to work with categories/tags? The script is awesome, but I am working on a site where the categories and tags drive the main site navigation. So if I change the number of posts that load in on the homepage, all is groovy,but the category pages loose half their content because I have to change the WP reading setting to only load in a few so the homepage load works correctly.
Thanks,
Cameron
Not having any luck at all right now. Neither with my custom or the default theme :D so frustrating
I would like to use this on a custom loop on a custom page..
Here is my code for the loop.
http://pastebin.ca/1548988
Any ideas if this is possible?
I would like to use this plugin for my blog. it worked after i put in the previous post link, but it also got rid of my flickr pictures div at the end of the page. Is there a way to keep that there and add a button that the user can click to load more posts instead of auto load on scroll? Any help would be greatly appreciated.
Thanks,
Eric
I’m developing a theme using WP Framework and am having a hard time getting Infinite Scroll to work… I install and enable the plugin, and it tells me I need to configure it before it will be ready. So I go to the configuration page, change all my options, and click “Update Options” only to be taken to a page that says “Are you sure you want to do this?” with nothing else. (In fact, in the source code, that message is right at the end, with only a closing P tag, body tag, and html tag between it and the end of the document - almost like the loading was interrupted somehow.) Anyway, I have not found a way to get past this. I even edited the PHP file manually to try to change the variables myself, but no luck - looks like it needs to be submitted using that button in order for the message to go away. Any ideas?
This is using WP 2.8.4 in a local environment, if it makes a difference.
There is a little bug in the file wp_infinite_scroll.php (about line 442)… “text” should be replaced by “loadingText”.
Great work! Thanks.
Cosmin
Development dead? I’d love to get a hold of the author.
Hey! Author! Email me!
Cameron: Right now you can edit the PHP file to include it on category/tag pages, but it’s not an option. This may change in the near future.
Eric: We talked separtely. :)
Kevin: Hmmmmmm…. That sounds messed up. :( I’ll email you.
Cosmin: You rock! thanks man. I just committed this fix.
Greg: Emailed.
Am also using the WP Framework theme - and infinite scroll doesn’t seem to work. I’ve tried all sorts of different selector options… Kevin let us know if you have any luck.
ps - the bug is that once I get to the end of all posts, it keeps loading “Sorry, but you are looking for something that isn’t here.” over and over again.
Inteliboy, the “Sorry, but you are looking for something that isn’t here.” message is in your theme, but infinite scroll thinks its a proper post because it has the `hentry` class. (And you’ve indicated that is what items are.)
If you remove that class from that div, you’ll fix this. :)
Also, the WP Framework theme should be sending a 404 status code when you ask for page 6 if page 6 doesn’t have content. That’s a bug on their side that would also resolve this issue.
I have a problem with the audio player 2.0b6. It is not being loaded on any of the pages that scroll into view (multiple themes). In Firefox it just shows a blank area, in IE half the time it’s also blank but sometimes it shows like an excerpt and says ‘to view the content open the post’
[...] Developer hack: use the jQuery plugin or the WordPress plugin. [...]
I am having a problem with audio player 2.0b6 as well. It seems to not fire the callback anymore.
Sadly it’s not compatible with Audio Player. The way they instantiate the flash (a script tag each time) is a messy solution and is not compatible with infinite scroll.
Sorry!
I too would love to be able to have a link at the bottom to invite the user to click for more posts that then load onto the bottom rather than have them triggered by the scroll. Looks like Eric had the same question - you seem to have answered him, but would be cool to see the answer publicll
Sorry for that! … but you get the picture. Love to know if possible. Thanks.
I also want to know how I can fix a button that allows the user to load more post instead of getting them automatically? Please, give me an answer soon. Im using the wordpress plug-in. Thank you.
Craig & David,
I’ve updated the wordpress and jquery plugins with new code (1.4) that can do what you’re asking for.
Read the Custom Trigger section here:
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
You can use events to trigger the load of new content.
Good luck!
I got the plugin working with the default WP theme but with my own theme I cannot get it to work. Can somebody check my site out and tell me what CSS tags to use? please and thanks!
http://wp.buumimedia.fi/?cat=1
this is a sandbox site for another website.