Support » Plugin: Jetpack - WP Security, Backup, Speed, & Growth » Infinite Scroll Support and JetPack
Infinite Scroll Support and JetPack
-
“At this time, your theme, varmag, doesn’t support Infinite Scroll. Unlike other Jetpack modules, Infinite Scroll needs information from your theme to function properly”
Can you tell us who have made our own custom themes how we can enable support for this feature?
Thanks
-
Hi,
You can find information about adding theme support at http://jetpack.me/support/infinite-scroll/.
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 bearticle-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 ondocument.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 http://pinboarddemo.wordpress.com/.Hi everybody, I’ve read http://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:
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.
http://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 http://wordpress.org/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
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 ); });
- The topic ‘Infinite Scroll Support and JetPack’ is closed to new replies.