Adding Infinite Scroll to WordPress Theme Without Plugin

In this article, I'll explain how to add infinite scroll to a WordPress theme without using a plugin. This article is the most accurate one. Because when I first researched how to add infinite scroll myself, I found articles explaining how to use a plugin or index.php working in the file but category.php or author.php I've found articles explaining methods that don't work correctly in files like these. They don't work correctly in other files. For example, when loading articles from page 2 and beyond in the category file, it wasn't loading them by category. It was loading all pages.

While performing these operations AdminLteWpThemeYou can look at the source code of . The code for its working version is available there.

First of all, the following codes functions.php We add it to the file.

//Infinite Scroll function wp_infinitepaginate(){ $loopFile = $_POST['loop_file']; $paged = $_POST['page_no']; $action = $_POST['what']; $value = $_POST['value']; if($action == 'author_name'){ $arg = array('author_name' => $value, 'paged' => $paged, 'post_status' => 'publish' ); }elseif($action == 'category_name'){ $arg = array('category_name' => $value, 'paged' => $paged, 'post_status' => 'publish' ); }elseif($action == 'search'){ $arg = array('s' => $value, 'paged' => $paged, 'post_status' => 'publish' ); }else{ $arg = array('paged' => $paged, 'post_status' => 'publish'); } # Load the posts query_posts( $arg ); get_template_part( $loopFile ); exit; } add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // for logged in user add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // if user not logged in

When an Ajax request arrives, this function will run, create a loop, and call our loop file. In our function, we receive some POST data.

“loop_file” is the name of our loop file. This file will generate the HTML codes. Then, JavaScript We will append with .

“page_no” This is the page number. This determines which page we will pull the text from.

“what” is based on what we want the pages to be based on, such as category, author, or search.

“value” If the requests include category, author, etc., the category slug includes data such as name and author nicename.

According to what we want here with the if query query_posts We create our parameters for . Then query_posts loop is created with get_template_part We call our loop file with .

add_function with its functions wp-admin/wp-ajax.phpWe ensure that our function is executed when an Ajax request is sent to . When sending an Ajax request action in the pelt infinite_scroll We send it. So, you can create different Ajax operations with different names and functions.

Next, we'll create our loop file. You can name it whatever you like, but remember: “loop_file” You must send its name in your post. I named it loop.php. You can copy your loop directly from the index.php file here. I AdminLteWpThemeI'm putting it here as an example from the inside.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <!-- timeline time label -->
<li class="time-label">
 <span class="bg-green"><?php the_time('d.m.Y ') ?></span>
 </li>
 <!-- /.timeline-label -->
 <!-- timeline item -->
<li>
 <i class="fa fa-newspaper-o bg-blue"></i>
<div class="timeline-item">
 <span class="time"><i class="fa fa-clock-o"></i> <?php the_time('H:i') ?></span>
<h3 class="timeline-header"><a href="/en/</?php the_permalink() ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?> "><?php the_title(); ?></a></h3>
<div class="timeline-body">
<div class="row">
<div class="col-lg-3 col-sm-4 col-xs-6">
 <a href="/en/</?php the_permalink() ?>" title="<?php the_title(); ?>">
 <?php $resim_yolu = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium'); if ( has_post_thumbnail() ) { ?>
 
 <img src="<?php echo $resim_yolu[0]; ?>" class="img-responsive" alt="<?php the_title(); ?>" title="<?php the_title() ?>" />
 <?php } ?>
 </a>
 </div>
<div class="col-lg-9 col-sm-8 col-xs-6">
 <?php the_excerpt_rss(); ?>
<div style="margin-top: 10px">
 <a class="btn btn-primary btn-xs" href="/en/</?php the_permalink() ?>" title="<?php the_title(); ?>">Read more</a>
 </div>
 </div>
 </div>
 </div>
<div class="timeline-footer">
 <i class="fa fa-user"></i> <a href="/en/</?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" title="<?php the_author(); ?>"><?php the_author(); ?></a> | <i class="fa fa-folder-open"></i> | <i class="fa fa-comments"></i> <?php comments_number('0 comment', '1 comment', '% comments' );?>
 </div>
 </div>
 </li>
 <!-- END timeline item -->

Finally, we need to write our javascript codes in files such as index.php and category.php.

<script type="text/javascript">
 jQuery(document).ready(function($) {
 var count = 2;
 var total = <?php echo $wp_query->max_num_pages; ?>;
 $(window).scroll(function(){
 if ($(window).scrollTop() == $(document).height() - $(window).height()){
 if (count > total){
 return false;
 }else{
 loadArticle(count);
 }
 count++;
 }
 });
 
 function loadArticle(pageNumber){
 $('a#inifiniteLoader').show('fast');
 $.ajax({
 url: "<?php echo admin_url(); ?>admin-ajax.php",
 type:'POST',
 data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop',
 success: function (html) {
 $('li#inifiniteLoader').hide('1000');
 $("ul.timeline").append(html);
 }
 });
 return false;
 }
 
 });
</script>

Count The variable is our page number. Initially, it's 2 because the text on page 2 will be loaded first. The number is incremented with each Ajax request. Total Our variable is the total number of pages. This way, we'll configure it so that it doesn't run every time we scroll down a page.

$(window).scroll(function(){} ); We will send an Ajax request when the page scrolls down with the function and count We will increase the variable by one. Of course count our variable total We write an If query so that it does not run more than necessary, as long as it is greater than our variable.

loadarticle() With our function, we first make the upload icon appear. Then, we send the Ajax request. You can examine the post data by sending it in the data. You can also view the post data in places like category and author. what And value We don't forget to add the data. For example, I'm writing the one in the category.php file. There what And value you can see the data.

I hope this article was useful to you.

<script type="text/javascript">
 jQuery(document).ready(function ($) {
 var count = 2;
 var total = <?php echo $wp_query->max_num_pages; ?>;
 $(window).scroll(function () {
 if ($(window).scrollTop() == $(document).height() - $(window).height()) {
 if (count > total) {
 return false;
 } else {
 loadArticle(count);
 }
 count++;
 }
 });
 
 function loadArticle(pageNumber) {
 $('a#inifiniteLoader').show('fast');
 $.ajax({
 url: "<?php echo admin_url(); ?>admin-ajax.php",
 type: 'POST',
 data: "action=infinite_scroll&page_no=" + pageNumber + '&loop_file=loop&what=category_name&value=<?php echo $yourcat->slug; ?>',
 success: function (html) {
 $('li#inifiniteLoader').hide('1000');
 $("ul.timeline").append(html);
 }
 });
 return false;
 }
 
 });
</script>