In this post I am going to show how to add infinite scroll to WordPress Site without plugin
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();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');
}assets/js/scroll-more.js
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>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();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();
}
?>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>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++;
}
})
}
}
}
});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();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();
}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();
Leave a Reply