Infinite Scroll Support and JetPack

Hi,

You can find information about adding theme support at https://jetpack.me/support/infinite-scroll/.

Thnk you. I’ve added it to my ‘dev site‘ and I’m a little confused with how I can modify it to work the way it works on my live site.
Any help would be appreciated

Dev site with new infinite scroll

add_theme_support( 'infinite-scroll', array(
 	'type'           => 'scroll',
	'footer_widgets' => false,
	'container'      => 'content',
	'wrapper'        => true,
	'render'         => false,
	'posts_per_page' => false
) );

Live site

<?php if ( is_home() || is_category() ) { ?>
	$container.infinitescroll({
		navSelector  : '#nav-below',
		nextSelector : '#nav-below .nav-previous a',
		itemSelector : '.entries',
		bufferPx: 10000,
		loading: {
			img: "<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif",
			msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
			finishedMsg: "<?php _e( 'All content loaded.', 'custom' ); ?>"
		},
		debug: false,
		animate: false
	},
	function( newElements ) {
		var $newElems = $( newElements ).css({ opacity: 0 });
		$newElems.imagesLoaded(function(){
			$newElems.animate({ opacity: 1 });
			$container.masonry( 'appended', $newElems, true );
		});
	}
	);
	<?php } ?>

If anybody ends up getting this to work with Masonry, please let me know

From a quick check of your site, it looks like you should change the container attribute to be article-grid as that’s the element your current Infinite Scroll code adds posts to. Beyond that, it’s hard to tell what else you might need to do without digging into the theme itself. For that level of assistance, you may need to hire a consultant if you don’t have in-house staff available.

As for working with jQuery Masonry, our Infinite Scroll code triggers a post-load JavaScript event on document.body after each set of posts is appended. We use that event to trigger Masonry with themes on WordPress.com. One such example is Pinboard, which you can see a demo of at https://pinboarddemo.wordpress.com/.

Hi everybody, I’ve read https://jetpack.me/support/infinite-scroll/
but I didn’t understand “where” should I add those code line?
add_theme_support( ‘infinite-scroll’, array(
‘container’ => ‘content’,
‘footer’ => ‘page’,
) );
to which file?
1) functions.php ?
2) index.php ?
???

Many thanks.

My wordpress blog is here:

https://lnx.sinapsi.org/wordpress

You should indeed add it to your functions.php file.

Well, I did it, but nothing change in my theme.
Any other suggestion?
Thanks.

[ link removed, correct link provide above already ]

*Ow. Makes frown face from auto play of noise from that site and quickly closes said site*

Otto recently did a write up on how to add Jetpack’s infinite scroll to your theme.

Try disabling all of your plugins (including whatever made that noise that cause me to leave your site immediately…) and give this a read.

https://ottopress.com/2012/jetpack-and-the-infinite-scroll/

As usual please make sure a) you’ve good file backups before poking at your theme files and b) consider doing any modifications to your theme via a child theme.

[* Removed duplicate of https://www.ads-software.com/support/topic/scrolling-not-loading-gallery-view-javascript-jquery?replies=1 Please do not post duplicate requests.]

I don’t get the ?post-load? on categories page. Is there a way to catch this on categories pages as well?

@philb74 Could you start a new thread, and post links to some of your category archive pages so we can investigate further?

Thank Jeremy

I did so:
https://www.ads-software.com/support/topic/infinite-scroll-%C2%ABpost-load%C2%BB-trigger?replies=1#post-4023144

Phil

Using the WordPress example site that Erick linked to, this is how I ended up getting Masonry and Infinite Scroll to work together.

// Code inside here fires when the DOM is ready
jQuery(window).load(function(){
	jQuery('#content').masonry({
		itemSelector : '.post',
		columnWidth : 250
	});
});

// Handle new items appended by infinite scroll
jQuery(document).on('post-load', function() {
	setInterval( function() {
		jQuery( '#content' ).masonry( 'reload' );
	}, 300 );
});