Render your posts with a custom format using Jetpack’s infinite scroller

Jetpack’s infinite scroller uses the content.php file by default to render new posts that are being loaded when the user scrolls down. This is what most of developers need in almost any scenario, nevertheless if you’re using a custom html for your posts, it would be better to be able to manipulate the output for all these posts being loaded with infinite-scroller.

The key here is to use one of the variables available when doing add_theme_support for infinite-scroller. The variable ‘render’ allows you to specify which function contains the html/php you want to display for new posts.


add_theme_support( 'infinite-scroll', array(
'container' => 'infinite_content',
'posts_per_page' => 8,
'render' => 'infinite_scroll_render',
) );

This function is an example of how to use the ‘render’ variable. By calling to a new function ‘infinite_scroll_render’ we can now customize all html elements and php functions for specific pages. For example, if you would like to call a custom content-myposttype.php file for each post type you’re using, you could do something like this:


function infinite_scroll_render(){
while( have_posts() ) {
the_post();
$post_type = get_post_type();
get_template_part( 'content', $post_type );
}
}

Now the infinite-scroll will always use your custom get_template_part to get the correct file. From here you could customize that function to do pretty much whatever you want.

Go ahead and try it!

Leave a Reply