Layers Child Themes: How to Add Infinite Scroll for Post Archives

Child Theming

Since: 1.5 Last Updated: Time to Read: 3 minutes

This tutorial covers two ways to add Infinite Scroll to your child theme post archives.

This term is associated with any functionality that allows segmented loading of posts on a single page without refresh or changes to the page permalink. Traditionally, posts are loaded when scrolling, creating an endless page the further you scroll. Sites like Facebook use this method, for example. This feature has evolved more recently to include click to load, where a user taps a button to load more posts. This has several advantages over the original infinite scroll in that it does not suffer the visual defects of some scroll to load functions, including flickering or load delays, and can be better managed by the browser to avoid page load speed drawbacks. The footer is also not visible or reachable in default infinite scroll implementations that use scroll to load, making it difficult for users to reach widgets, menus or copyright information.

This requires Layers 1.5 or later, which adds the post list ID to the archive templates post wrappers.

Allowing a 3rd party plugin to handle features like Infinite Scroll is advisable if you only want to offer it as an option, and do not want the developmental responsibility for it. Adding support for JetPack’s Infinite Scroll module is as simple as a function and a hook placed in your child theme functions.php:

Line 1: Set your custom function to define which loop to use.  This can be whatever you want as long as it is unique, or change ‘mytheme’ to your theme name. We will call this function from within the infinite scroll arguments.

Lines 2-5: Copy lines 16-18 of the archive.php in Layers here to use the standard post loop, or point to a custom partial in your child theme. This is the standard post archive. If you have a custom post type and archive template for it, copy the loop from that template starting with the “while” part of the loop. See get_template_part() for syntax.

Line 8: Set your second function. This can be whatever you want as long as it is unique, or change ‘mytheme’ to your theme name.

Lines 9-15: Enabling Infinite Scroll is very similar to adding support for post thumbnails or editor styles thanks to add_theme_support()

'infinite-scroll'  accepts several arguments which can be set by Customizer options. In this example, we have two controls allowing our users to set the number of posts to load/display at a time, and the type of load called with layers_get_theme_mod() :

In brief:

  • type= scroll or click
  • footer_widgets= best also made an option so the user can set to true if they have widget areas in their footer
  • containe = this should be post-list and refers to the ID of the div wrapping the loop in archive.php. If you are using a custom archive template, this is the ID of your loop wrapper.
  • wrapper = set to false to allow new posts being loaded to inherit the article wrapper used by Layers.
  • render= your first custom function name
  • posts_per_page = a number, or the variable for your customizer option.

View details of these functions and arguments on the JetPack Infinite Scroll page.

Line 18: Finally, hook this function to after_setup_theme

There are several different ways to implement infinite scroll yourself, heavily depending on how you want it to behave and look. Below are some tutorials we have found useful: