WordPress Plugin Installation

  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.

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.

178 Responses to “WordPress Plugin Installation”

  1. Alex N. says:

    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

  2. BenC says:

    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

  3. Erik says:

    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!

  4. N says:

    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

  5. N says:

    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

  6. Paul Irish says:

    BenC, yah i definitely broke that… no update on when it’ll be fixed.

  7. I have the same question as Erik above on July 26th. I have the plugin installed but don’t know what to put in the fields or how to place it on my blog (as a widget I presume?)? I know, pretty basic stupid questions but I’m just not sure.

    Thanks,

    Charlie

  8. Cremsnit says:

    Hello, please can you tell me what to add on CSS Selector? Please i`ve tried all the things.. the site is: http://cremsnit.ro/blog

  9. TJ says:

    The plugin currently doesn’t work with WordPress 3 or higher. Does anyoen know if the plugin will be fixed any time soon?

  10. kjjb says:

    We sell Gucci Bag at our discout store. You can buy cheap Gucci Jewelry to save money. Gucci Bags is on sale now. Please access our shop to shopping Gucci Sunglasses. Wholesale price for all the Gucci Jewelry. Gucci Wallet is Best Christmas Day’s Gift . Enjoy buy wonderful luxury Gucci Watches from us.

  11. Cedric says:

    Hello!

    I am using Infinite Scroll on my website and I just saw that it’s not working for all users, only the admin.
    Yes, I put the menu in the config panel to All Users, and it does not change anything.
    I have been running it for few months and I just saw it wasn’t working for all users, I don’t remember if it ever worked for all users, I’m always logged in! :p

    The JS code is on the Main page source code, so I don’t really understand!
    Any help could be really grateful.

    Thanks!

    Cedric

  12. Cedric says:

    Ok forget it, I was using WP-PageScroll which combined an old version of Infinite Scroll and WP Page Navi, just deactivated it and installed the last version of Infinite Scroll and it worked for all!

  13. Dallas SEM says:

    Glad I found this article on bing when I was surfing the internet. Good STUFF!

  14. Alex says:

    Hi Paul!
    Could you update us on how it’s going with tag and category pages? Also, will it work on search page?

  15. BCB says:

    I installed the plugin and it seems to work fine except for that it keeps adding “404 error” posts to the end and never stops. My theme (twentyten) obviously reports unfound pages with a 404 because the post it returns are of class “404.” I’ve looked through the javascript but am not familiar enough to figure out why it doesn’t set isDone to False and stop adding unfound posts.

    Help?

  16. Eric says:

    is it possible for infinite scroll to load new posts before the navigation links? Because even though it gets hidden, it’s causing problem in the markup and results some styling issues.

  17. Alan says:

    Hey, Paul. Thanks for the plug-in. It seams great from the pages I have visited.

    I’m trying, unsuccessfully, to make it work for http://blog.alanpf.com with the following values:
    Content CSS Selector: #main-content
    Post CSS Selector: #main-content div.post
    Navigation Links CSS Selector: div.pagination
    Previous posts CSS Selector: div.pagination a:prev

    Any help would be appreciated. Thank you!

  18. Sam says:

    @BCB

    I have the same problem and I am convinced it’s due to WordPress 3. I have just spent the last 3 hours trying to figure it out to no avail!

    Can we get some help!? :(

    <3

  19. Paul Irish says:

    Sam and BCB,

    I just fixed the issue with twentyten. newest version should have it fixed

    https://github.com/paulirish/infinite-scroll/raw/master/jquery.infinitescroll.min.js

  20. Gab Labelle says:

    Hello !

    I have a little problem. If you visit http://www.visualise.ca/ and you scroll down, infinite scroll will reach the last page (only 2 pages total for now).

    The problem is that when I reached the End, only the “loadingText” has been shown and disappeared not the “donetext”. And then if I scroll up I see the “loadingText” again (but there’s no more page to load) and the “donetext” is finally shown. But it should have been shown when it first reached the end on the scroll down no ?

    Many thanks for your time and help.

  21. davide says:

    hi Paul
    first of all great work!!
    i have the same problem that kevin had long time ago. i installed the plug in, activated it and set it up.when i press upgrade options it comes the message “Are you sure you want to do this?” but i can’t select anything to confirm.
    i’m using wordpress 3.0.3

    greets
    davide

  22. Gab Labelle says:

    Hi I’m coming back with my question. A fresh install of WordPress at http://themes.visualise.ca/twentyten/ that uses the default WordPress theme twenty ten and the infinite scroll plugin installed from the dashboard.

    The problem is, like I said, when you scroll until the last post only the “loadingText” is shown and disappears, not the “donetext”. And then if I touch the scrollbar (to go up) I see the “loadingText” again (but there’s no more page to load) and the “donetext” is finally shown. But it should have been shown when it first reached the end (the last post) not on the next scroll ?

    You can see this by yourself: http://themes.visualise.ca/twentyten/
    Also the theme I’m creating: http://themes.visualise.ca/mfg/ (You can also hit the + to load new posts)

  23. AnaMarry says:

    Hi,
    thank you for this very nice js.
    I’ve got the same problem as Alex and N.
    With WP and the jQuery masonry js, i have the same empty space prepended to the first post. o me also this space seems to be the same height as the page “1″ .
    I tried different versions with different codes but no chance. Please Help me to solve my issue.

    Infinite Scroll v1.4.091129
    Infinite Scroll v 1.5.101115 (included in last WP plugin)

    and different callback codes:
    $(‘#secondary’).masonry({ appendedContent: $(this) });
    or
    $(this).masonry({ appendedContent: $( newElements ) });

    with first callback code I get empty space and with second callback code, Masonry break with callback and second page comes over the first one. script gives me an error: newelements as “undefined element”.

    can you please help me to solve the issue.

    Thanks!

  24. Jonas says:

    Great plug-in!!!
    feature request: option to load next page manually (or is there a way?)

  25. Hugo says:

    Hi there,
    its a great plugin but unfortunately I cant get it to work in wordpress,
    Im doing a wordpress/blog that uses the masonry script to make the grid, and I’ve got the first page almost done, Im just trying to add the infinite scroll and it doesnt work!!! I don’t know if the selectors are wrong or something in the structure of the code that need to be changed!!! here’s the link (http://visualblog.4morfic.com) can anyone help me with that?
    thanks!!

  26. Hugo says:

    Hi again,
    just found out what one of the problems was, I had some problems with the selectors, and now I can load the new pages/posts!

    But I have another problem the new posts dont fit on the grid, they go to the top of the other!!??? any idea why!?!?

    Thanks!

  27. Hugo says:

    hello,

    just resolved the issue,
    was a problem with the functions, just needed to add this code to the plugin:

    function( newElements ){
    $(this).masonry({ appendedContent: $(newElements) });
    });
    });

    the only problem I have now is the loading text and the end text that overlaps! if anyone had the same problem and fixed it please tell me howww!!!

    Thanks

  28. […] oficial de Infinite Scroll. Instrucciones para WordPress. Plugin en jQuery. Publica un comentario » Publicado en: Cómo lo hago, Internet Etiquetas: […]

  29. will says:

    where do i find this info?

    “You need configure the plugin with CSS selectors that match your theme.”

  30. MJC says:

    Hi,

    I’m having problems getting it to work with WP custom content types. The plugin works, but just loads the same 12 (number set in WP) posts over and over again – forever. Any thoughts?

    Many thanks,

    -m

  31. Val says:

    Hi,

    I am trying to use Infinite Scroll together with a Plugin called “LightWindow 2.0” and it works alright. When the 2nd page loads, the script for “LightWindow” won’t work anymore, though. I know it has something to do with “Javascript to be called after the next posts are fetched”, but what exactly do I write into that column?

    Thank You,
    Val

  32. Nigel says:

    Firstly thanks for the awesome plugin Paul :)

    I have it all working on my WP press site, which I did manually with your jquery stuff from github rather than the plugin.

    I implemented the “More” button from your Twitter example page rather than auto-scrolling and that is working but the WP pagination code relies on pulling the page number in from the url which isn’t there.

    I hardcoded a url “http://www.example.com/news/page/2/” to test and that works great but I now need to make it dynamically increase the page number to 3 once I’m on the second page of data.

    I have searched around for answers but can only find code relevant to pulling from the url.

    I would imagine this could possibly be done through javascript?

    Thanks for any help you can offer.

  33. Ben says:

    Hi,

    I’m using infinite scroll and it works like a charm, but I want to alter two things:

    – Remove the “moving from left to right”-animation, when the loading gifs fade in
    – Remove the fallback Text/animation, so when I enter nothing in the input fields no text nor animation is displayed.

    Thanks in advance and thank you for this superb plugin!

  34. Peter says:

    Hi, I look forward to this plugin working but I’m having trouble withe the CSS Seletor settings.

    The website I’m setting up is: http://secondparallel.com/criblook/ and these CSS Selector settigns I’m using. Also, I’m using WordPress 3.0+

    Content CSS Selector: .post
    Post CSS Selector: .tab-panes
    Navigation Links CSS Selector: .bm_numberedPages
    Previous posts CSS Selector: .numberedPage

    I’m not good with code so any help would be greatly appreciated!

    Thanks, Pete

  35. Brian says:

    2 Issues:

    1) After my last post, the page continues to add “404 Nothing Found” error pages. How do I alter the code to stop at the last post?

    2) It doesn’t leave any space between infinite posts. Essentially all the posts get stacked ontop of one another without any padding…

    Thanks, this plugin is great I hope I can get it working!

  36. Brian says:

    I would like to have my WordPress blog initially load 3 posts and then have the infinite scroller load 1 new post each time…How can I achieve this functionality?

    Thanks

  37. Kanda optical…

    Thank you for a good blog on WordPress Plugin Installation ” Infinite Scroll | jQuery … . As I have read other online views on the same I think the details are well reflected on this.It was a good way of spending evening on Monday . I’ll visit agai…

  38. Bille says:

    How do I configure my site in Infinite Scroll: billeweb.com.br ? This message is appearing on the configuration page of the plugin: All CSS selectors are found with the jQuery javascript library. See the CSS selector jQuery documentation for an overview of all possibilities. Single-quotes are not allowed-only double-quotes May Be used. Thanks and congratulations for the excellent work with Infinite Scroll!

  39. dog says:

    […] WordPress Plugin Installation « Infinite Scroll | jQuery plugin, WordPress plugin, interaction design pattern […]

  40. thanks, fantastic plugin!!! it’s exactly what i want!!!

  41. JB says:

    Hi ! I try to install infinite scroll on my page but I struggle to find the right syntax for the selectors…
    I use epione theme for wordpress. Hope to hear from you and congratulation for your scripts, I use the motherfuckingtextshadow as well ;)

  42. Martin says:

    Hey JB,

    my guess for your site would be the following, hopefully someone can correct it if i am wrong, and i could lern from it on my one page:

    Content CSS Selector: #home_content
    Post CSS Selector: #content div.post
    Navigation Links CSS Selector: div.navigation
    Previous posts CSS Selector: div.prv_page a:first

    BUT, i am struggeling myself for my site:

    worpress 3.1.2
    thesis 1.8 theme

    Content CSS Selector: #content_box
    Post CSS Selector: #content div.post
    Navigation Links CSS Selector: div.prev_next
    Previous posts CSS Selector: div.previous a:first

  43. Martin says:

    JB,

    its more likely:
    Post CSS Selector: #home_content div.post_content
    or

    Post CSS Selector: #post div.post_content
    with
    Content CSS Selector: #post

    in conclusion:
    Content CSS Selector: #post
    Post CSS Selector: #post div.post_content
    Navigation Links CSS Selector: div.navigation
    Previous posts CSS Selector: div.prv_page a:first

    I can’t do better .. please somebody help…

  44. Martin says:

    My Problem is fixed with

    Content CSS Selector: #content
    Post CSS Selector: #content div.post
    Navigation Links CSS Selector: div.prev_next
    Previous posts CSS Selector: p.previous a:first

  45. lajme shqip says:

    Amazing plugin, i just discovered it and im replacing my older navi plugins on all my sites

  46. Thanks a lot for the tips.This sounds pretty cool.I think I have a better chance with this one here though.

  47. Mixa says:

    When i use this plugin my images in posts not open with lightbox effect (Lightbox work only with images in first portion of posts). How I can fix it? Thank you!

  48. Rodrigo says:

    Hi, I have a problem with the plugin, infinitely repeated posts, I have no idea what the problem, help please http://xiiivii.com/v2/

  49. Andrey says:

    Hi !
    Plugin is very awesome!
    However there is one thing I cannot understand. The plugin loading the next posts BUT the “Loading bar” doesn’t disappear after the loading is finished. How can I fix that?
    You can check it on my website…

  50. Awesome plug in I use it on my site