Simple infinite scroll for WordPress sites without plugin

Introduction :
In this article, I will give you a starting point to create an AJAX interaction with your WordPress site. Ajax has become a fury in recent years and for the cause. Ajax (Asynchronous JavaScript and XML) is a way to interact with the server and see the results without having to reload the page. In this article includes the enqueue scripts, the configuration of the of AJAX handler, create your own WordPress shortcodes, The features of WordPress and the access the database, and the Logic of Loading posts in the User Page.

Why do we use Ajax?
When loads the first page of WordPress site, it will load all the post data and used to loop to show the markup as we have added. Apart from navigation menus, widgets, graphics and other media, JavaScript files, style sheets and a lot of other things are loaded.

Suppose when we try to access the second page of our posts, everything happens again like above. It also burdens all the peripheral elements of the page. In Many cases (but not in all), this supposes a waste of bandwidth and damages the user’s experience. After all, nobody likes it Wait for a load of that page.

1. Create a Word Press short code (i.e [ajax_posts]) we are goin to use same on pages/templates :

Word Press shortcode API works very simply, first you need to create a callback function that will be executed every time you use the code, so you need to associate this function with a specific short code that makes it ready for use.

a). Short code callback function to display initial posts at WordPress active theme functions.php file. Ex : /wp-content/themes/twentyseventeen/functions.php

b). The WordPress hooks we used for add_shortcode ( tag, callable) Now Let’s call our action “script_load_more” function at  active theme functions.php file. Ex : /wp-content/themes/twentyseventeen/functions.php

2. Create WordPress custom handlers for your own custom AJAX requests:

The WordPress hooks we used for ajax calls wp_ajax_{action} and wp_ajax_nopriv_{action}. Now Let’s call our action “ajax_script_load_more”,

a). Create a callback function to to load posts at WordPress active theme functions.php file.Ex : /wp-content/themes/twentyseventeen/functions.php

b).Create a template “ajax-content.php” at active theme directory to format posts, we used same file in our ajax callback function “ajax_script_load_more”. Ex : /wp-content/themes/twentyseventeen/ajax-content.php

c).Create a ajax action hook to call “ajax_script_load_more” function to to load posts at WordPress active theme functions.php file. Ex : /wp-content/themes/twentyseventeen/functions.php

3. Create new file named “script_ajax.js” at WordPress active theme js directory nd enqueue the same file on WordPress active theme functions.php

Ex1 : /wp-content/themes/twentyseventeen/js/script_ajax.js.
Ex2 : /wp-content/themes/twentyseventeen/functions.php

Here i am giving two options with js code any one you can use the other one skip.
a). Load posts when user clicks the Load More button

b).Load more posts as the user scrolls the page.

Conclusion :
Shortcodes are great, we can use our shortcode “ajax_posts” to load more posts on wordpress pages or page templates.

a). On WordPress pages use following short code tag to load more posts ex : [ajax_posts]

b). On WordPress page templates use below code.

17 replies to Simple infinite scroll for WordPress sites without plugin

  1. Thank you for great job! This code was only working solution for me 🙂

    • Thanks Adam, please subscribe my blog for more interesting updates.

  2. It works perfectly! Thank you so much

    • Thanks Allsson, please subscribe my blog for more interesting updates.

  3. Hi, thanks for your article.
    My only question is in which file should I place the last code you give with the two available options (scroll or button).
    I’m sorry, I do not know much about this.
    PD Sorry for my bad English

    • Thanks Larii,

      place your javascript code on “script_ajax.js” file, i mentioned same on above point three.

      3. Create new file named “script_ajax.js” at WordPress active theme js directory and enqueue the same file on WordPress active theme functions.php

      Ex1 : /wp-content/themes/twentyseventeen/js/script_ajax.js.

      , please subscribe my blog for more interesting updates.

  4. Really thanks for a working code,
    I spent a lot of time to search “load more” related articles
    but this is perfectly working for me.

    • Thanks for your comment.
      Glad to help you.
      Keep visiting for more such informational posts.

  5. Dear Satvik !

    Your gadget is working fine for me . Only one problem after deploying above code is that I lost the functionality of an ajax based widget on the same page. When I hit the older or newer link of my widget the whole widget disappear rather than showing next posts. The complete code of that widget is as below:

    query(‘post_type=post&showposts=3′.’&paged=’.$paged);
    ?>

    have_posts()) : $new_query->the_post(); ?>

    max_num_pages) ?>

    jQuery(function($) {
    $(‘#content’).on(‘click’, ‘#pagination a’, function(e){
    e.preventDefault();
    var link = $(this).attr(‘href’);
    $(‘#content’).fadeOut(500, function(){
    $(this).load(link + ‘ #content’, function() {
    $(this).fadeIn(500);
    });
    });
    });
    });

    Interesting thing is that when I remove the short code of your widget from the page my widget works fine again.

    I want to use both snippets working on the same page.

    Please Share your experience.

    Thanks.

    • Hi Shahid,

      Thanks for your comment, it’s mostly JavaScript conflicts between your code and my code please check carefully both codes and change ids or events, you will find a solution. Keep visiting for more such informational posts.

  6. What if i would like to specify a category, how could i do this?

    excelente tutorial!

      • but if i would like it to be in the short code, i’ve been trying to do so but i get repeated post or i get a post from another category.

  7. Hi,

    Infinite scroll is working fine but same 3 posts is repeating again & again in an infinite scroll..can you please help me with this…asap!!!

    Thank you in advance…

    • Hi Parul,

      Glad to help you, Please check what value you get in “$ paged = $ _POST [‘page’] + 1;” here every time you press the “load more” value will increase to show the next post. If the value does not rise then your javascript may be broken or some error in code.

      Ex : /wp-content/themes/twentyseventeen/functions.php

      function ajax_script_load_more($args) {
      //code
      echo $paged = $_POST['page'] + 1; // or view the firebug console ajax call post parameters
      //code
      }

      However, if you are unable to fix this issue, then ping me scripthere.com FB page (https://www.facebook.com/blogscripthere/) I’ll help you out on it.

      • Thank you for your quick response…I will try to figure it out and will contact you in case its not done.

        Thanks

  8. Good thing !! this is absolutely helpful thanks for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.