How to Add Infinite Scroll to a WordPress Template | Infinite Scroll WordPress Tutorial

For those who work with developing WordPress themes , constantly introducing new features is without doubt essential , not only to make her more attractive templates , but above all more functional . The Infinite Scroll is an extremely popular way to load content dynamically on your site , requiring only the user to scroll the display screen to content go charging and appearing dynamically. Popular sites like Twitter and Facebook use this feature there is a lot of time , which can be easily adapted to a WordPress template , depending of course on your needs . Not all types of websites and blogs fit well in an infinite scroll , so when using the functionality , take this into consideration. To put the infinite scroll on your WordPress , follow this tutorial, based on the code of colleagues wptheming .
 
How to Add infinite scroll to a WordPress template
 
 
DOWNLOAD JAVASCRIPT
 
Download a copy of the file ” jquery.infinitescroll.min.js ” which is on GitHub repository , and upload the file to the Scripts folder or javascript files from your WordPress template . If you do not have a folder ” scripts ” or ” js” in your template , you can create one, just to organize more easily all the files and functionality of your theme.
 
If you want you can also choose one of the images to the script loading effect here: ajax- loader.gif . Upload the image to the ” images ” folder of your template . If no , you can create .
 
 
LOADING THE SCRIPT
 
It will be necessary to register and load the script into the functions.php file of your template . Copy and paste the following code into the functions.php file of your theme . If your theme does not have a file with that name, you must create one, and paste the following code in it :
 
/**
 * Load javascripts used by the 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’);
 
 
 
STARTUP SCRIPT
 
In the following code , they are listed different parameters used in the template. You will probably need to change some of them , to properly fit your template . Take note:
 
    img : The path to the URL of the loading image
    nextSelector : link selector ” antiquity ” .
    navSelector : Selector of the previous / next navigation links.
    itemSelector : Selector for posts . May be .hentry , .post , .etc
    contentSelector : Contains divs to your posts .
 
/**
 * Infinite Scroll
 */
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”:”#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 );
 
Note: Do not forget to translate the charging messages for the desired language.
 
 
TEST SCRIPT
 
When loading content of the homepage or category , infinite scroll should be working. If you are not working , make sure the script is not charging properly, or if perchance is giving some error JavaScript. Also check that the selectors are all working properly.
 
If you scroll several times , it is likely that at some point start to give 404 errors , so you should apply the following patch to the functions.php file:
 
/**
 * If we go beyond the last page and request a page that doesn’t exist,
 * force WordPress to return a 404.
 * See http://core.trac.wordpress.org/ticket/15770
 */
function custom_paged_404_fix( ) {
    global $wp_query;
    if ( is_404() || !is_paged() || 0 != count( $wp_query->posts ) )
        return;
    $wp_query->set_404();
    status_header( 404 );
    nocache_headers();
}
add_action( ‘wp’, ‘quimby_paged_404_fix’ );

LEAVE A REPLY

Please enter your comment!
Please enter your name here