infinite scroll on homepage

Hi,

Did you try this plugin, Because Its still works with news themes.

https://wordpress.org/plugins/infinite-scroll/

I noticed on your homepage, only one column of Photos is being. These should load fully, Have you looked at customization.

Other suggestion is try this.
http://www.infinite-scroll.com/

Or let me know if you still need my help.

Hi hammer07

Try downloading jetpack plugin from here https://wordpress.org/plugins/jetpack/.
Now install this plugin.
And you need to follow the steps described in this link http://ottopress.com/2012/jetpack-and-the-infinite-scroll/
Feel free to post if problem continues.

Best Regards!!

Hello @hammer07,
Just some steps and you are done for the infinite scroll.

1. Install and activate Jetpack plugin mentioned above.
2. Go to Jetpack settings page and activate ‘Infinite Scroll’.
3. Create a child theme and put the below codes in child theme’s ‘functions.php’:

function pp_jetpack_setup() {
    // Add theme support for Infinite Scroll.
    add_theme_support( 'infinite-scroll', array(
        'container' => 'main',
        'render'    => 'pp_infinite_scroll_render',
        'footer'    => 'page',
    ) );

    // Add theme support for Responsive Videos.
    add_theme_support( 'jetpack-responsive-videos' );
}
add_action( 'after_setup_theme', 'pp_jetpack_setup' );

/**
* Custom render function for Infinite Scroll.
*/
function pp_infinite_scroll_render() {
    while ( have_posts() ) {
        the_post();
        if ( is_search() ) :
            get_template_part( 'template-parts/content', 'search' );
        else :
            get_template_part( 'template-parts/content-masonry', get_post_format() );
        endif;
    }
}

4. Go to Settings > Reading and check the boxes that says ‘ Scroll Infinitely’ and ‘ Track each Infinite Scroll post load as a page view in Google Analytics’ and save changes. See the screenshot: http://prntscr.com/a0vmqp

5. Add the below CSS in Customizing > Theme Options
Advanced Options > Custom CSS:

.masonry-entry {
   float: left;
}

And this should do it. Try this and let us know about it.

Note: How to create a child theme? https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme

Thanks!

regards,

Hello @hammer07,
The free version of ‘Photo perfect’ theme does not support infinite scroll by default. And that is why i have provided you some hints through customization. I checked in your site and the issue has occurred on the infinite scroll as a result of theme being not adaptive to infinite scroll by default as i mentioned. Whereas, the features works very nicely on the pro version. I can only tell you to add the following js code in the theme and see if it works.

jQuery(document).ready(function($) {

		if ( $( 'body').hasClass( 'archive-layout-masonry' ) && $( '#masonry-loop' ).length > 0 ) {
			//Masonry blocks
			$blocks = $("#main");

			$blocks.imagesLoaded(function(){
				$blocks.masonry({
					"columnWidth": ".hentry",
					"itemSelector": ".hentry",
					"percentPosition": true
				});

				// Fade blocks in after images are ready (prevents jumping and re-rendering)
				$(".hentry").fadeIn();
			});

			// $(document).ready( function() { setTimeout( function() { $blocks.masonry(); }, 500); });

			$(window).resize(function () {
				$blocks.masonry();
			});

			// When Jetpack Infinite scroll posts have loaded
			$( document.body ).on( 'post-load', function () {

				var $container = $('#main');
				// $container.masonry( 'reloadItems' );

				$blocks.imagesLoaded(function(){
					$blocks.masonry({
						"columnWidth": ".hentry",
						"itemSelector": ".hentry",
						"percentPosition": true
					});

					// Fade blocks in after images are ready (prevents jumping and re-rendering)
					$(".hentry").fadeIn();
				});

				$container.masonry( 'reloadItems' );

				// $(document).ready( function() { setTimeout( function() { $blocks.masonry(); }, 500); });

			});

		}; //End if masnory is activated

	});

Thank you!

Hello @hammer07,
Switching to PRO theme will definitely resolve your issue as it supports infinite scroll by default and you won’t need any customization. There are also other awesome features, you can check that here: http://themepalace.com/shop/wordpress-themes/photo-perfect-pro/

Thanks!