How to add search engine friendly infinite scroll in your WordPress Theme

Now a days Infinite Scroll is a popular way to dynamically load fresh content into a site as a user scrolls down through it. It’s also easy to use   into a WordPress theme. Here you know how to do it easy:

We are  use this feature with Twenty Fourteen Theme by By the WordPress team.But you will use in your own WordPress theme by customizing this code properly.

Get the Script Assets

First of all Download a copy of (jquery.infinitescroll.min.js)from the GitHub repository, and paste  it  “js” folder of your Twenty Fourteen or WordPress theme.

like this

js_file_path

 

Pick up the ajax-loader.gif of your choice, and add it to your theme images folder.its just a loader image or nothing.as your wish to use this image.

like this

ajax_loader_image_path

 

Enqueue  jquery.infinitescroll.min.js

Now  register your enqueue script in Function.php.

Here is your process———

 

function custom_theme_js(){

wp_register_script( ‘infinite_scroll’, get_template_directory_uri() . ‘/js/jquery.infinitescroll.min.js’, array(‘jquery’), ‘1.0’,true);

if( ! is_singular() ) {

wp_enqueue_script(‘infinite_scroll’);

}

}

add_action(‘wp_enqueue_scripts’, ‘custom_theme_js’);

Init your own script to make infinite scrolling

In this code  I used in my theme that name is Twenty Fourteen. You will  need to customize these in order to match your theme:

  • img: The path to the ajax loader image
  • nextSelector: Selector for the “previous posts” link.
  • navSelector: Containing selector.
  • itemSelector: Selector for posts. Something like that .hentry, .post, .etc
  • contentSelector: Containing div for your posts.

 

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’ ); ?>”

},

“nextSelector”:”.paging-navigation a”,

“navSelector”:”.paging-navigation”,

“itemSelector”:”article”,

“contentSelector”:”#content”

};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );

</script>

<?php

}

}

add_action( ‘wp_footer’, ‘custom_infinite_scroll_js’,100 );

 

Note:Add This code use in Function.php .

like this file

 

fuction.php

Hopefully it’s work for your WordPress theme.This code working fine for Twenty Fourteen Theme By the WordPress team.