ThemeShaper

How to Override Jetpack Infinite Scroll Settings in a Child Theme

✳︎

by

Caroline Moore
in

When a theme author adds Jetpack Infinite Scroll support to their theme, they configure its options specifically for that theme. Occasionally you might want to override the theme’s defaults for your purposes, and in this article, I’ll show you how to do so in a child theme.

Here is a typical Jetpack Infinite Scroll setup function, located in the parent theme’s functions.php:

function my_theme_infinite_scroll_setup() {
	add_theme_support( 'infinite-scroll', array(
		'container'      => 'content',
		'footer'         => 'page',
		'posts_per_page' => 10,
	) );
}
add_action( 'after_setup_theme', 'my_theme_infinite_scroll_setup' );

Note the posts_per_page value is currently 10. As per the documentation, this will override the value in Settings → Reading. But maybe you want to display 20 posts instead of 10 on your site – how can you change the theme author’s chosen default without modifying the original theme files, and when the Settings → Reading option is ignored?

Enter the almighty filter! Infinite Scroll uses the infinite_scroll_settings filter to apply modifications to pre-existing settings. It’s as easy as creating a function in your child theme’s functions.php to redefine the posts_per_page setting and pass it through the filter, like so:

/*
 * Change the posts_per_page Infinite Scroll setting from 10 to 20
 */
function my_theme_infinite_scroll_settings( $args ) {
	if ( is_array( $args ) )
		$args['posts_per_page'] = 20;
	return $args;
}
add_filter( 'infinite_scroll_settings', 'my_theme_infinite_scroll_settings' );

You can use the above function to modify any of Jetpack’s other infinite scroll options within your child theme. I hope this sheds some light on how to customize Infinite Scroll settings in a child theme!

8 responses

  1. Chris Ferdinandi Avatar
    Chris Ferdinandi

    Would it be possible to retrieve the user setting for posts-per-page, and if a value exists, use that instead of a manually set variable. Something like this:

    function my_theme_infinite_scroll_setup() {
	$posts_per_page_user_setting = get_option('posts_per_page');
	if ( ! $posts_per_page_user_setting ) {
		$posts_per_page_user_setting = 10;
	}
	add_theme_support( 'infinite-scroll', array(
		'container'      => 'content',
		'footer'         => 'page',
		'posts_per_page' => $posts_per_page_user_setting,
	) );
}
add_action( 'after_setup_theme', 'my_theme_infinite_scroll_setup' );
    1. Caroline Moore Avatar
      Caroline Moore

      Yes indeed, if the parent theme uses the posts_per_page option, it should respect the user setting. In the event a theme author uses a specific number for the posts_per_page setting, like if their theme’s layout requires a certain number of posts to be displayed in a grid, it’s good to know how to override it in a child theme without modifying the parent theme. My example is simplistic; the filter allows you to alter other infinite scroll settings, too.

  2. Chris Ferdinandi Avatar
    Chris Ferdinandi

    Makes sense… thanks!

  3. briansahagun Avatar
    briansahagun

    How do you alter the other options?

    1. Caroline Moore Avatar
      Caroline Moore

      Good question! You’d change the option name and value in the $args array. Say you wanted to change the footer option to match up with a different DIV with an ID of main, rather than the current ID of page:

      /*
      * Change the footer Infinite Scroll setting from #page to #main
      */
      function my_theme_infinite_scroll_settings( $args ) {
      if ( is_array( $args ) )
      $args[‘footer’] = ‘main’;
      return $args;
      }
      add_filter( ‘infinite_scroll_settings’, ‘my_theme_infinite_scroll_settings’ );

      1. briansahagun Avatar
        briansahagun

        I also tried putting several settings like:
        $args[‘type’] = ‘scroll’;
        $args[‘container’] = ‘articles’;
        $args[‘wrapper’] = false;

        Is this correct?

      2. Caroline Moore Avatar
        Caroline Moore

        It’s hard to say from seeing only those three lines, but yes, those settings *should* work as well.

  4. How to Override Jetpack Infinite Scroll Settings in a Child Theme | WordPress 2.0 Site

    […] How to Override Jetpack Infinite Scroll Settings in a Child Theme © ThemeShaper: https://themeshaper.com/2013/10/08/how-to-override-jetpack-infinite-scroll-settings-in-a-child-theme/ […]

Previous:
Next: