- Download the plugin.
- Install it to your
- 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
DIVthat wraps around all posts. New posts will be inserted at the bottom of this
- Post CSS Selector
- The selector that selects all posts on a page. Each post must be surrounded by a single
- Navigation links CSS Selector
DIVcontains the Next Posts and Previous Posts link.
- Previous Posts CSS Selector
Atag is what points to the 2nd page of posts.
- 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.
- Can I change the number of posts loaded?
- Yup. But that’s a WordPress thing. Go to Settings / Reading
- Is it SEO-Friendly?
- 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?
- You mean it just works?
- 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.
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.