- 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!
Hi Paul!
great work! congrats!
unfortunatly i cannot manage to put it to work on my site
http://blog.vaiumagasosa.com/
can you help me finding the selectors?
cheers
antónio torres
Yes im having problems to with the selectors im not a advance programer i know the basic im trying to install that in http://clasificadosfacil.net but really was dificult if somebody can help me im very thanks. And sorry for look like a lammer hehe but, really need help. If i can help somebody else for exchange the favor just email me.
Hi Paul.
It works great!
Check it on my site: http://5nak.com
Thanks for the great plugin.
Hi Paul.
Quick question: what would be the most efficient way or apending a page number above each new page?
I thought adding the following might work but what if I have 100 pages!!
jQuery(’#infscr-page-2′).prepend(’Page 2′);
jQuery(’#infscr-page-3′).prepend(’Page 3′);
I tried adding this to the admin section of Infinate Scroll but is it called every time a new page is loaded so another instance of page 2 appears.
I then tried adding the JS via my functions.php
function pagename() { ?>
jQuery(document).ready(function(){
jQuery(’#infscr-page-2′).prepend(’Page 2′);
jQuery(’#infscr-page-3′).prepend(’Page 3′);
});
</script
<?php
}
add_action( ‘thematic_after’, ‘pagename’ );
but it threw an error.. maybe that’s a question of the WP forums tho.
Does anyone have any other ideas on the most efficent way of giving users a “standpoint” of thier current location
Cheers
Ben
BenC,
inside the callback do something like this
I think that’ll work.
Hey Paul,
Thanks for the swift responce :-)
Tried adding this to the “JS to be called after next posts are fetched” in the the InfScroll options…
jQuery(function($) {
var page = $(this).attr(’id’).match(/\d+/)[0];
$(this).prepend(’
Page ‘+page+’
‘);
});
and it borks!
Then tried added the following to functions.php
function pagename() { ?>
jQuery(document).ready(function(){
var page = $(this).attr(’id’).match(/\d+/)[0];
$(this).prepend(’
Page ‘+page+’
‘);
});
});
<?php
}
add_action( ‘thematic_after’, ‘pagename’ );
= no effect
Can’t see any issues with the code?
Hope I am not being a tool here - have been looking at code for 18 hours so probably!
Cheers
Ben
FYI the code above works a treat.
Thanks Paul! :-)
Hi! Amazing plugin but I’m having trouble getting it to work for me.
I’m guessing I have the wrong selectors… any suggestions?
Thank you!
@Riley
Look at any posts page’s source and look for the post wrapper div, could be div id=post-xxx (in my case). In the div class selectors, you should see the relevant class - mine is hentry for example, but I use the thematic framework so prob. different to yours.
If you have the selector right, try disabling some plugins see if that is the cause of your problems. I think page navi might not play so nice.
@Paul Irish
Might you be so kind as to help me… again. pls! I’ve been struggling for a while on this!
The code above to insert a page number works great - only slight issue is that it counts a last page with no results as a page and displays page-x at the bottom of all the content - the side effect is my users click on the page number thinking there might be more (even tho they see no more posts message), and are left disappointed and disjointed that there is nothing more for them. For the sake of usability and bounce rates I should address this!
I thought using the .last jquery function but I guess that wont work unless fired with the *no more results*
[code]jQuery(’.page’).last().css(’display, ‘none’);[/code]
Any ideas would be much appreciated.
Cheers
Ben
ben,
it’d probably be best if you pass your custom code into the errorCallback hook in the plugin.
this will run when the script reaches the last page.. and you can run that last() thinger. :)
in case anyone needs this - hides last page number when used with the callback above.
jquery.infinitescroll.min.js
errorCallback : function(){$(’div.infscr-pages’).last().addClass(’remove’);}
stylesheet
.remove {display:none}
Hi,
I can’t seem to get Infinite Scroll to work. Can anyone help?
http://www.desmondbehari.co.uk/the_shapes_we_need
Thanks
http://repset.net/blog/
I still cannot get this to work on my website.
I’ve tried every combination of possible selectors and it still doesn’t work.
What would my selectors be? Also, since I’ve been confused by this, when entering your selector do you surround it with quotes, or no?
And then assuming I have them correct, why else would this not work? Nothing has ever happened even once.
Hi.
How do use to Twitter-type of WordPress?
wp_infinite_scroll.php line 442
// kill scroll binding
$(window).unbind(’.infscr’);
// hook up the manual click guy.
$(’.more’).click(function(){
$(document).trigger(’retrieve.infscr’);
return false;
});
↑This script added.
But, Navigation is gone does not reappear after next page.
Please some advice me! Thank you.
Here i try to make your plugin work with headway (a popular framework) and i have no luck….
here is the site : http://orkaro.com/
i like to change the option.. can you help ?
Hey Paul,
Heads up. After updating InfScroll to Version 1.5.100504 I seem to no longer be getting the next page content wrapper e.g.
<div id=”infscr-page-2″ class=”infscr-pages”>Is anyone else experiencing this?
Cheers.
Ben
@DesB
Try using #content div.hentry as your Post CSS Selector rather than #content div.post
@marc-andre menard
Headway seems to use the Sandbox selectors (so does Thematic theme) so again try using #content div.hentry as your Post CSS Selector
Just to confirm for both of you - you should have
Content CSS Selector: #content
Post CSS Selector: #content div.hentry
Navigation Links CSS Selector: div.navigation
Previous posts CSS Selector: div.navigation a:first
Hope this helps
Ben
I’m using the video QuickTags plugin and when I’ve got an article which contains an embedded video the infinite scroll dosen’t import the embed code, it gives a video thumbnail in place of the flase embed.
Can you help me to fix this?
Thanks,
The plugin is not working in the topic: http://www.upstartblogger.com/upstart-blogger-wordpress-theme-signal-37
Tell you how to do that, he worked?
Hello!
Have problems to get it to work… sorry, I assume I am not configuring the css selectors properly, but really can’t get it to work!
HEEELP!!
actually it looks like it’s not loading at all… comparing the code in my website with Derrick’s site, I have no comments in my html code that include “infinite”, so I now suppose it’s conflicting with something?
it has got something to do with my theme, I temporarily used the default wordpress theme and was working, can you help please?
it has got something to do with my theme, I temporarily used the default wordpress theme and was working, but the theme I actually use won’t even load the script code in the html…… can you help please?
added a temporary workaround by hardcoding the plugin into my footer… not ideal tho :(
ah you got it to work!
yah some themes dont like the way i tried to insert that js.. i dont know why. :(
Hello guys!
could anyone give me a hand? i can’t seem to find the right Selectors :)
http://floradeborahmartinez.com/blog
many thanks!
Hey, beautiful plugin for wordpress. Loved it so much I came back for it again! However I ran into a spot of bother :(
Cant figure out which of my divs are required as its not a standard theme I guess?
my url is http://www.blog.the-dot.co.uk using handglove theme. ive tried using
Content CSS Selector : #post-wrap
Post CSS Selector : post
Navigation csss: #post-nav-wrap
prev link csss: post-nav-older
with no avail… could you please help me out :)
Thanks for your time.
- Owen x
Hi Paul
I was wondering what i am doing wrong because, I am kinda new to this so I would appreciate your help greatly.
These are the selectors that I tried, but I can’t seem to get it to work.
#wpcontent
#wpcontent div.post_snippet
div.navigation
div.navigation a:visted
After I changed and hit update options, the default setting are show once again. Would appreciate a quick respone since I would like to show in Uni in 12 hours.
Thanks in advance
Fabrizio, can you share the footer hardcoding you did that got this to work? The plugin doesn’t load any javascript on my client’s custom theme, so I have to install the script manually. Here’s what I’m putting now:
if (!(window.jQuery && jQuery.fn.jquery >= ‘1.2.6′)){
document.write(unescape(”%3Cscript src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js’ type=’text/javascript’%3E%3C/script%3E”));
window.INFSCR_jQ=true;
}
(window.INFSCR_jQ ? jQuery.noConflict() : jQuery)(function($){
// Infinite Scroll jQuery+Wordpress plugin
$(’$content_selector’).infinitescroll({
debug : ,
nextSelector : “div.page_nav a:first”,
loadingImg : “http://127.0.0.1/m/wp-content/plugins/infinite-scroll/ajax-loader.gif”,
loadingText : “Buscando mais…”,
donetext : “Parabens, chegou no fim”,
navSelector : “div.page_nav”,
contentSelector : “#root”,
itemSelector : “#root div.corpo-post”
},function(){
$js_calls
});
});
Updating my own comment above: the problem was the $content_selector — it slipped past me! Great jQuery script, thanks a lot to the authors.