How to get rid of the .infinite-wrap in Jetpack’s Infinite Scroller for WordPress

You’ve may be wonder how to do it, but not found any info on regarding that div that separates your group of posts. This article will guide you to do this simple operation that could be obvious once you know it but very difficult to discover without the right advice.

The .infinite-wrap appears whenever you add support for infinite-scroll to your theme using the default variables. As soon as you activate it and select the container that will hold the posts, you will see a div separating the new posts using an infinite-wrap class.

This wrapper can be easily removed by configuring the variables for your theme support. If you normally would do something like this to activate infinite scroller:


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

Then you will only need to add the wrapper variable and set it to false, to be able to get rid off the extra wrap div:


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

This easy trick will allow you to show all post together and load some more posts whenever the user scrolls down without interrupting the user experience.

Leave a Reply