Infinite Scroller
This component allows you to add infinite scrolling to Repeaters, Easy Posts & Products List components to replace regular pagination. The posts are pulled dynamically from the next page, saving users the need to navigate to a new page.
Loading animations can be styled and customised to fit the style of your site and both scrolling or clicking any element to load the next posts are supported.
Note – when using with queries from Repeater or Easy Posts, the infinite scroller component will replace working pagination by fetching the posts from the /page/2 and then /page/3 etc. If new posts aren’t being fetched, make sure you definitely have working pagination where you’re using the component. The component can’t be used if there isn’t working pagination.
Choose Content Type
Easy Posts, Repeater or Products List – If you’re wanting to pull posts in from /page/2, /page/3 inside of an archive to replace paginaiton links. Choose either Easy Posts, Repeater or Products List and then place the component you’re using inside of the infinite scroller component.
The process of setting up the query and building the post loops is unchanged, the only difference is that the pagination will not be there while the element is inside the infinite scroller. To control the behaviour of the infinite scroll, the settings are all found in the Primary tab of the infinite scroller component.
Page content (page breaks) – If you’re wishing to break up a single post (or page) into sections that aren’t all visible at once. Inside the post editor (either gutenberg or classic) break up your post into parts using page breaks. This will make sure WP adds pagination to the post.
Inside Oxygen, the inner content will need to be inside of the infinite scroller component. If using a button as a trigger to load the next content, be sure to have it outside of the infinite scroller.
Custom – For more flexibility, there’s also a custom option. This allows you to manually choose the content selector and the links for the infinite scroller to follow to find the next posts. This is useful if you’re using custom loop with your own custom pagination or wishing to use on a single post template where you wish to load the next post when the user scrolls down. (See ‘Custom Mode’ below with more info)
Trigger to Load More
There are two modes, either scrolling will trigger the new posts to load, or clicking on an element.
If choosing click element then you just need to add the selector for the element. For eg you could add a button underneath the infinite scroller component, with a class load-more. Now when users click that button, if there are more posts to load they will. If there isn’t the button will be removed. Any element can be used as the click trigger.
If choosing scroll down then you have the option to choose the scroll threshold (to control how many px away from the end of the posts the user needs to scroll) and also the scroll element.
Scroll element
By default this is the entire page, this is the most common situation where the user scrolls down the page to the point where the last posts are. You also have the option to choose ‘this element’ or ‘a container’ element. These options are useful if you don’t want the page height to change when the posts load, instead the element itself (or a container element of your choosing) would act as a scroll container. Note that you will need to set a height on the scroll container and set the overflow to scroll. This way when the user scrolls through the posts, they aren’t scrolling the actual page they are scrolling this element to reveal the new posts.
Change URL and Browser History
Choose whether the URL changes in the browser and to control the behavior of the browser when the user clicks the back button.
- Disabled – Ensures the URL isn’t changed at all as new posts are loaded.
- Push – The URL is changed as new posts are loaded to show pagination. These pages are pushed into the browser history. This means that if the user was to click back in the browser after scrolling to page 4, it would take them to page 3 and then page 2, etc.
- Replace – The URL is changed as new posts are loaded to show pagination. These pages just replace the most recent entry in the browser history. This means that if the user was to click back in the browser after scrolling to page 4, they would not go back to page 3. Instead, they would go to the page they were on before they landed on the page with the infinite scroll.
No content text
Here you can set text to appear after the last posts have loaded. Something like ‘No more content to load.’ This is turned off by default.
Loading Animation
This is the animation that will display as the new posts are being fetched from the next page. There are a number of presets to choose from that can be styled and positioned. This is on by default and is positioned relative to the infinite scroller. The ‘animation preview in builder’ provides a quick way to hide the animation while editing.
Custom Mode
As with a few components, we’ve added a ‘custom’ setting to open up what you can do with the component and allow for more custom solutions.
With custom mode, the component can be used to follow ANY links on a page to get content from somewhere on another page, not just limited to the pagination links as is the case with the other options.
One common use case for this would be adding infinite scroll to a single post template where the user can scroll down after reading a post and the content from the next post will load directly underneath.
For convenience, we’ve added a ‘previous post’ option where the content will automatically be pulled from the previous post and then the second previous post and so on. But you can also set a link selector, meaning the component will follow any links if you wanted to manually add navigation links to the template. For eg if you’re using an adjacent posts component, you could use those links to determine the next post to load up.
The content selector setting is to set the container for the infinite scroller to look for on the next page. ‘.post-content’ is the default.
FAQ
Not working with WPGridBuilder?
Infinite scroller isn’t recommended for use with filter plugins such as WPGridBuilder. The reason is the infinite scrolling is for pulling the posts from the next page and replacing the default pagination. It won’t be fetching the next posts that align with the filters, facetWP and WPGridBuilder have built-in solutions for ‘load more’ which is recommended if you’re filtering.