How to Add Infinite Scroll to WordPress Site without plugin

Spread the love

In this post I am going to show how to add infinite scroll to WordPress Site without plugin

Table of Contents

Step 1. Create a template file

templates/template-scroll.php

<?php
/*Template Name: Infinite Scroll Template Page*/
get_header();
$args = [
    'post_type'=>'post',
    'posts_per_page' => get_option('posts_per_page'),
];
$posts = new WP_Query($args);
?>
<main>
<div class="container"><br>
    <h2 class="text-center"><?php the_title(); ?></h2>
    <div class="row">
    <?php while ($posts->have_posts()): $posts->the_post(); ?>
        <div class="col-md-4">
            <div class="card text-center" style="margin: 20px auto;">

                <img src="<?php the_post_thumbnail_url(); ?>" class="card-img-top" alt="<?php the_title(); ?>">
                <h2 class="text-center"><?php the_title(); ?></h2>
                <?php the_excerpt(); ?>
                <a href="<?php the_permalink();?>" class="btn btn-success">Read More</a>
            </div>
        </div>
    <?php endwhile; ?>
    </div>
</div>
</main>
<?php
get_footer();

PHP
​x
 
<?php/*Template Name: Infinite Scroll Template Page*/get_header();$args = [    'post_type'=>'post',    'posts_per_page' => get_option('posts_per_page'),];$posts = new WP_Query($args);?><main><div class="container"><br>    <h2 class="text-center"><?php the_title(); ?></h2>    <div class="row">    <?php while ($posts->have_posts()): $posts->the_post(); ?>        <div class="col-md-4">            <div class="card text-center" style="margin: 20px auto;">​                <img src="<?php the_post_thumbnail_url(); ?>" class="card-img-top" alt="<?php the_title(); ?>">                <h2 class="text-center"><?php the_title(); ?></h2>                <?php the_excerpt(); ?>                <a href="<?php the_permalink();?>" class="btn btn-success">Read More</a>            </div>        </div>    <?php endwhile; ?>    </div></div></main><?phpget_footer();

Step 2. Enqueue script

functions.php

add_action('wp_enqueue_scripts','da_load_more_scripts');

function da_load_more_scripts(){

    wp_enqueue_script('jquery');

    wp_register_script('scroll-more',get_template_directory_uri().'/assets/js/scroll-more.js',['jquery']);

    wp_localize_script('scroll-more','loadmore_params',[
       //'ajax_url' => admin_url('admin-ajax.php'),
        'ajax_url' => site_url().'/wp-admin/admin-ajax.php',
        'xyz'=>'hello from functions.php file'
    ]);

    wp_enqueue_script('scroll-more');

}

PHP
 
add_action('wp_enqueue_scripts','da_load_more_scripts');​function da_load_more_scripts(){​    wp_enqueue_script('jquery');​    wp_register_script('scroll-more',get_template_directory_uri().'/assets/js/scroll-more.js',['jquery']);​    wp_localize_script('scroll-more','loadmore_params',[       //'ajax_url' => admin_url('admin-ajax.php'),        'ajax_url' => site_url().'/wp-admin/admin-ajax.php',        'xyz'=>'hello from functions.php file'    ]);​    wp_enqueue_script('scroll-more');​}

assets/js/scroll-more.js

jQuery(function ($) {
   alert(loadmore_params.xyz);
});

JavaScript
 
jQuery(function ($) {   alert(loadmore_params.xyz);});

template-parts/loop-post.php

<div class="card text-center" style="margin: 20px auto;">

    <img src="<?php the_post_thumbnail_url(); ?>" class="card-img-top" alt="<?php the_title(); ?>">
    <h2 class="text-center"><?php the_title(); ?></h2>
    <?php the_excerpt(); ?>
    <a href="<?php the_permalink();?>" class="btn btn-success">Read More</a>
</div>

PHP
 
<div class="card text-center" style="margin: 20px auto;">​    <img src="<?php the_post_thumbnail_url(); ?>" class="card-img-top" alt="<?php the_title(); ?>">    <h2 class="text-center"><?php the_title(); ?></h2>    <?php the_excerpt(); ?>    <a href="<?php the_permalink();?>" class="btn btn-success">Read More</a></div>

templates/template-scroll.php

<?php
/*Template Name: Infinite Scroll Template Page*/
get_header();
$args = [
    'post_type'=>'post',
    'posts_per_page' => get_option('posts_per_page'),
    //'paged' => 2,
];
$posts = new WP_Query($args);
echo $max = $posts->max_num_pages;
?>
<main>
<div class="container"><br>
    <h2 class="text-center"><?php the_title(); ?></h2>
    <div class="row js-posts" data-max="<?php echo $max; ?>">
    <?php while ($posts->have_posts()): $posts->the_post(); ?>
        <div class="col-md-4">
            <?php get_template_part('template-parts/loop','post'); ?>
        </div>
    <?php endwhile; ?>
    </div>
</div>
</main>
<?php
get_footer();

PHP
 
<?php/*Template Name: Infinite Scroll Template Page*/get_header();$args = [    'post_type'=>'post',    'posts_per_page' => get_option('posts_per_page'),    //'paged' => 2,];$posts = new WP_Query($args);echo $max = $posts->max_num_pages;?><main><div class="container"><br>    <h2 class="text-center"><?php the_title(); ?></h2>    <div class="row js-posts" data-max="<?php echo $max; ?>">    <?php while ($posts->have_posts()): $posts->the_post(); ?>        <div class="col-md-4">            <?php get_template_part('template-parts/loop','post'); ?>        </div>    <?php endwhile; ?>    </div></div></main><?phpget_footer();

Step 3. Work with WordPress Ajax

funtions.php

<?php
  add_action('wp_enqueue_scripts','da_load_more_scripts');

function da_load_more_scripts(){

    wp_enqueue_script('jquery');

    wp_register_script('scroll-more',get_template_directory_uri().'/assets/js/scroll-more.js',['jquery']);

    wp_localize_script('scroll-more','loadmore_params',[
       //'ajax_url' => admin_url('admin-ajax.php'),
        'ajax_url' => site_url().'/wp-admin/admin-ajax.php',
        //'xyz'=>'hello from functions.php file'
    ]);

    wp_enqueue_script('scroll-more');

}

add_action('wp_ajax_loadmore','load_more');
add_action('wp_ajax_nopriv_loadmore','load_more');

function load_more(){

    $page = $_REQUEST['page'];
    $args = [
        'post_type'=>'post',
        'posts_per_page' => get_option('posts_per_page'),
        'paged' => $page,
    ];
    $posts = new WP_Query($args);
    while ($posts->have_posts()): $posts->the_post(); ?>
        <div class="col-md-4">
            <?php get_template_part('template-parts/loop','post'); ?>
        </div>
    <?php endwhile;
    wp_reset_postdata();
    wp_die();
}
?>

PHP
 
<?php  add_action('wp_enqueue_scripts','da_load_more_scripts');​function da_load_more_scripts(){​    wp_enqueue_script('jquery');​    wp_register_script('scroll-more',get_template_directory_uri().'/assets/js/scroll-more.js',['jquery']);​    wp_localize_script('scroll-more','loadmore_params',[       //'ajax_url' => admin_url('admin-ajax.php'),        'ajax_url' => site_url().'/wp-admin/admin-ajax.php',        //'xyz'=>'hello from functions.php file'    ]);​    wp_enqueue_script('scroll-more');​}​add_action('wp_ajax_loadmore','load_more');add_action('wp_ajax_nopriv_loadmore','load_more');​function load_more(){​    $page = $_REQUEST['page'];    $args = [        'post_type'=>'post',        'posts_per_page' => get_option('posts_per_page'),        'paged' => $page,    ];    $posts = new WP_Query($args);    while ($posts->have_posts()): $posts->the_post(); ?>        <div class="col-md-4">            <?php get_template_part('template-parts/loop','post'); ?>        </div>    <?php endwhile;    wp_reset_postdata();    wp_die();}?>

template-parts/loop-post.php

<div class="card text-center" style="margin: 20px auto;">

    <img src="<?php the_post_thumbnail_url(); ?>" class="card-img-top" alt="<?php the_title(); ?>">
    <h2 class="text-center"><?php the_title(); ?></h2>
    <?php the_excerpt(); ?>
    <a href="<?php the_permalink();?>" class="btn btn-success">Read More</a>
</div>

PHP
 
<div class="card text-center" style="margin: 20px auto;">​    <img src="<?php the_post_thumbnail_url(); ?>" class="card-img-top" alt="<?php the_title(); ?>">    <h2 class="text-center"><?php the_title(); ?></h2>    <?php the_excerpt(); ?>    <a href="<?php the_permalink();?>" class="btn btn-success">Read More</a></div>

assets/js/scroll-more.js

jQuery(function ($) {
    var canBeLoaded = true;
    var $max = $('.js-posts').attr('data-max'), $page = 2;

    $(window).scroll(function () {
        load_data();
    });

    function load_data() {

        var data = {
            'action': 'loadmore',
            'page': $page,
        };

        if($(window).scrollTop()+$(window).height()> $('#load_data').height()&& canBeLoaded === true){
            if($page<=$max){

                $.ajax({
                    url: loadmore_params.ajax_url,
                    data: data,
                    cache: false,
                    type:'POST',
                    beforeSend: function () {
                        canBeLoaded = false;
                        $('#load_data_message').show();
                    },
                    success: function (data) {
                        if(data==''){
                            //$('#load_data_message').hide();
                            canBeLoaded = false;

                        }else{
                            //$('#load_data_message').show();
                            canBeLoaded = true;
                        }

                        $('#load_data_message').hide();

                        $('.js-posts').append(data);

                        $page++;
                    }
                })

            }
        }

    }
});

JavaScript
 
jQuery(function ($) {    var canBeLoaded = true;    var $max = $('.js-posts').attr('data-max'), $page = 2;​    $(window).scroll(function () {        load_data();    });​    function load_data() {​        var data = {            'action': 'loadmore',            'page': $page,        };​        if($(window).scrollTop()+$(window).height()> $('#load_data').height()&& canBeLoaded === true){            if($page<=$max){​                $.ajax({                    url: loadmore_params.ajax_url,                    data: data,                    cache: false,                    type:'POST',                    beforeSend: function () {                        canBeLoaded = false;                        $('#load_data_message').show();                    },                    success: function (data) {                        if(data==''){                            //$('#load_data_message').hide();                            canBeLoaded = false;​                        }else{                            //$('#load_data_message').show();                            canBeLoaded = true;                        }​                        $('#load_data_message').hide();​                        $('.js-posts').append(data);​                        $page++;                    }                })​            }        }​    }});

templates/template-scroll.php

<?php
/*Template Name: Infinite Scroll Template Page*/
get_header();
$args = [
    'post_type'=>'post',
    'posts_per_page' => get_option('posts_per_page'),
    //'paged' => 2,
];
$posts = new WP_Query($args);
$max = $posts->max_num_pages;
?>
    <main>
        <div class="container"><br>
            <h2 class="text-center"><?php the_title(); ?></h2>
            <div id="load_data" class="row js-posts" data-max="<?php echo $max; ?>">
                <?php while ($posts->have_posts()): $posts->the_post(); ?>
                    <div class="col-md-4">
                        <?php get_template_part('template-parts/loop','post'); ?>
                    </div>
                <?php endwhile; ?>
            </div>
            <div id="load_data_message" class="text-center" style="display: none;">
                <img height="150" width="150" src="<?php echo get_template_directory_uri(); ?>/assets/images/loading.gif">
            </div>
        </div>
    </main>
<?php
get_footer();

PHP
 
<?php/*Template Name: Infinite Scroll Template Page*/get_header();$args = [    'post_type'=>'post',    'posts_per_page' => get_option('posts_per_page'),    //'paged' => 2,];$posts = new WP_Query($args);$max = $posts->max_num_pages;?>    <main>        <div class="container"><br>            <h2 class="text-center"><?php the_title(); ?></h2>            <div id="load_data" class="row js-posts" data-max="<?php echo $max; ?>">                <?php while ($posts->have_posts()): $posts->the_post(); ?>                    <div class="col-md-4">                        <?php get_template_part('template-parts/loop','post'); ?>                    </div>                <?php endwhile; ?>            </div>            <div id="load_data_message" class="text-center" style="display: none;">                <img height="150" width="150" src="<?php echo get_template_directory_uri(); ?>/assets/images/loading.gif">            </div>        </div>    </main><?phpget_footer();

Step 4. Work with custom post type

Only two change on given two files

templates/template-scroll.php

add_action('wp_ajax_loadmore','load_more');
add_action('wp_ajax_nopriv_loadmore','load_more');

function load_more(){

    $page = $_REQUEST['page'];
    $args = [
        'post_type'=>'movie',
        'posts_per_page' => get_option('posts_per_page'),
        'paged' => $page,
    ];
    $posts = new WP_Query($args);
    while ($posts->have_posts()): $posts->the_post(); ?>
        <div class="col-md-4">
            <?php get_template_part('template-parts/loop','post'); ?>
        </div>
    <?php endwhile;
    wp_reset_postdata();
    wp_die();
}

PHP
 
add_action('wp_ajax_loadmore','load_more');add_action('wp_ajax_nopriv_loadmore','load_more');​function load_more(){​    $page = $_REQUEST['page'];    $args = [        'post_type'=>'movie',        'posts_per_page' => get_option('posts_per_page'),        'paged' => $page,    ];    $posts = new WP_Query($args);    while ($posts->have_posts()): $posts->the_post(); ?>        <div class="col-md-4">            <?php get_template_part('template-parts/loop','post'); ?>        </div>    <?php endwhile;    wp_reset_postdata();    wp_die();}

templates/template-

<?php
/*Template Name: Infinite Scroll Template Page*/
get_header();
$args = [
    'post_type'=>'movie',
    'posts_per_page' => get_option('posts_per_page'),
    //'paged' => 2,
];
$posts = new WP_Query($args);
$max = $posts->max_num_pages;
?>
    <main>
        <div class="container"><br>
            <h2 class="text-center"><?php the_title(); ?></h2>
            <div id="load_data" class="row js-posts" data-max="<?php echo $max; ?>">
                <?php while ($posts->have_posts()): $posts->the_post(); ?>
                    <div class="col-md-4">
                        <?php get_template_part('template-parts/loop','post'); ?>
                    </div>
                <?php endwhile; ?>
            </div>
            <div id="load_data_message" class="text-center" style="display: none;">
                <img height="150" width="150" src="<?php echo get_template_directory_uri(); ?>/assets/images/loading.gif">
            </div>
        </div>
    </main>
<?php
get_footer();

PHP
 
<?php/*Template Name: Infinite Scroll Template Page*/get_header();$args = [    'post_type'=>'movie',    'posts_per_page' => get_option('posts_per_page'),    //'paged' => 2,];$posts = new WP_Query($args);$max = $posts->max_num_pages;?>    <main>        <div class="container"><br>            <h2 class="text-center"><?php the_title(); ?></h2>            <div id="load_data" class="row js-posts" data-max="<?php echo $max; ?>">                <?php while ($posts->have_posts()): $posts->the_post(); ?>                    <div class="col-md-4">                        <?php get_template_part('template-parts/loop','post'); ?>                    </div>                <?php endwhile; ?>            </div>            <div id="load_data_message" class="text-center" style="display: none;">                <img height="150" width="150" src="<?php echo get_template_directory_uri(); ?>/assets/images/loading.gif">            </div>        </div>    </main><?phpget_footer();

Step 1. Create a template file

Step 2. Enqueue script

Step 3. Work with WordPress Ajax

Step 4. Work with custom post type

Leave a Reply Cancel reply