How to Override Jetpack Infinite Scroll Settings in a Child Theme

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 thoughts on “How to Override Jetpack Infinite Scroll Settings in a Child Theme

  1. 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' );
    • 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.

    • 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’ );

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s