How To Load More Posts Using Ajax With A Button Or On Scroll In WordPress

How to Load More Posts using Ajax with a Button or on Scroll in WordPress

In this article we will show you how to create a load more button to show more posts or custom post types using AJAX. In this way we can show more post without loading a page. Loading speed of the page will be increased

Follow the step by step process to implement Ajax based load more option

Step 1: Create a Template file

Create a Template file in wordpress where you can add client code

<div id="ajax-load-posts" class="row">

        <?php

            $postsperpage = 3;

            $args = array(

                    'post_type' => 'post',

                    'posts_per_page' => $postsperpage,

            );

 

            $loop = new WP_Query($args);

 

            while ($loop->have_posts()) : $loop->the_post();

        ?>

 

         <div class="col4">

                <h1><?php the_title(); ?></h1>

                <p><?php the_content(); ?></p>

         </div>

 

         <?php

                endwhile;

        wp_reset_postdata();

         ?>

    </div>

    <div id="load_more_posts">Load More</div>

Step 2:  Add Ajax script in Template file

Add the ajax call function in Template file. Use the ajax call in Document ready function

$document.ready(function({
var p = 3; // Post per page

var pageNo = 1;

 

 

function load_posts(){

    pageNo++;

    var str = '&pageNo=' + pageNo + '&p=' + p + '&action=more_post_ajax';

    $.ajax({

        type: "POST",

        dataType: "html",

        url: ajax_posts.ajaxurl,

        data: str,

        success: function(data){

            var $data = $(data);

            if($data.length){

                $("#ajax-load-posts").append($data);

                $("#load_more_posts").attr("disabled",false);

            } else{

                $("#load_more_posts").attr("disabled",true);

            }                 

        },

        error : function(jqXHR, textStatus, errorThrown) {

            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);

        }

 

    });

    return false;

}

 

$("#more_posts").on("click",function(){ // When btn is pressed.

    $("#more_posts").attr("disabled",true); // Disable the button, temp.

    load_posts();

    $(this).insertAfter('#ajax-posts'); // Move the 'Load More' button to the end of the the newly added posts.

});

});         

Step 3: Add following in Function.php file

Then you want to add the following code in your functions.php

wp_localize_script( 'core-js', 'ajax_posts', array(

                  'ajaxurl' => admin_url( 'admin-ajax.php' ),

                  'noposts' => __('No older posts found', 'blazingcoders'),

              ));

After adding wp_localize_script load the default admin-ajax.php so that we can use in our ajax call and also add code.js function to register the script.                       

wp_register_script( 'core.js', get_template_directory_uri() . '/assets/js/core.js');

wp_enqueue_script( 'core.js' );

At last add the following code in functions.php file, you need to add the function that will load your posts:-

 

function more_post_ajax(){

 

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;

    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;

 

    header("Content-Type: text/html");

 

    $args = array(

        'suppress_filters' => true,

        'post_type' => 'post',

        'posts_per_page' => $ppp,

        'paged'    => $page,

    );

 

    $loop = new WP_Query($args);

 

    $out = '';

 

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();

        $out .= '<div class="small-12 large-4 columns">

                <h1>'.get_the_title().'</h1>

                <p>'.get_the_content().'</p>

         </div>';

 

    endwhile;

    endif;

    wp_reset_postdata();

    die($out);

}

 

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');

add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

 

Step 4: Infinity Scroll

 

Add the infinity scroll function below function is used to load infinity scroll

 

$(window).on('scroll', function(){

    if($('body').scrollTop()+$(window).height() > $('footer').offset().top){

        if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))){

                load_posts();

        }

    }

});

 

 

Related Posts
Create Wikipedia Page For Your Company

Blazingcoders is a digital marketing company. well experienced in Wikipedia page creation for corpor

How to Send Email in Laravel using SMTP

Today we are going to explain how to send email in Laravel using STMP. Laravel is PHP based fra

Best Travel Website Design Ideas And Inspirations

In this article, we are going to discuss Travel Website Design Ideas And Inspirations. Everyone gath

ECommerce website maintenance and support services

Blazingcoders Good maintenance of eCommerce website will helps establish your brand and uses full fo

Get free quote for

How to Load More Posts using Ajax with a Button

Ajax infinity Load More in WordPress without plugin

Contact us