Category: PHP

I was working on Infinite Scroll functionality in WordPress. Initially i was trying to use jetpack (WordPress plugin) to implement the same but i was not able to understand how jetpack works and i did not get proper screenshot and online support to make me understand it properly. So i have Goggled more and finally i successfully implemented Infinite Scroll on VaseemAnsari.com. You can check the home page, category page, archive page and other pages where pagination generally comes.

Let me guide you how easy it is and how can you implement the same Infinite Scroll on your WordPress blog.
Step 1. This simple functionality uses javascript “jquery.infinitescroll.min.js”. You can download a copy of “jquery.infinitescroll.min.js” from the GitHub repository, and drop it into the “scripts” or “js” folder of your WordPress theme.

Step 2. Use any Ajax loader image. I hope you already have so many or you can find loading images on Google. You can pick out the ajax-loader.gif of your choice, and add it to your theme “images” folder.

Step 3. You need to register and enqueue the required jquery.infinitescroll.min.js script in functions.php (You can find this file in your wordpress theme.)

function custom_theme_js(){
	wp_register_script( 'infinite_scroll',  get_template_directory_uri() . '/js/jquery.infinitescroll.min.js', array('jquery'),null,true );
	if( ! is_singular() ) {
		wp_enqueue_script('infinite_scroll');
	}
}
add_action('wp_enqueue_scripts', 'custom_theme_js');

Step 4. Then you need yo use below function to make the magic happen. You can write this function in functions.php file.

function custom_infinite_scroll_js() {
	if( ! is_singular() ) { ?>
	<script>
	var infinite_scroll = {
		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 posts loaded.', 'custom' ); ?>"
		},
		<?php /*?>
			img				: 	The path to the ajax loader image, we put the image in plugin folder
			nextSelector	: 	Selector for the “previous posts” link.
			navSelector		: 	Containing selector for the previous/next navigation links.
			itemSelector	: 	Selector for posts. This might be .hentry, .post, .etc
			contentSelector	: 	Containing div for your posts
		<?php */?>
		"nextSelector":"#nav-below .nav-previous a",
		"navSelector":"#nav-below",
		"itemSelector":"article",
		"contentSelector":"#content"
	};
	jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
	</script>
	<?php
	}
}
add_action( 'wp_footer', 'custom_infinite_scroll_js',100 );

Check out below screenshot to know how Infinite Scroll works on my blog Twenty Thirteen and Twenty Twelve theme.

I have added Infinite Scroll to WordPress Twenty Thirteen and Twenty Twelve theme. If you have any issue in finding the proper div selectors of your theme then check below images. These images will help you to find selectors in Twenty Thirteen and Twenty Twelve Theme

You can see the Infinite Scroll working at below urls.
Twenty Thirteen Theme
Twenty Twelve Theme

I hope the above work out for you and if you still feel any issues then check the original link that helped me a lot.
Source