Wordpress custom load more

README.md

Add the load more button within custom loop

<?php
$args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => '2',
    'paged' => 1,
);
$blog_posts = new WP_Query( $args );
$counter = 1;
?>
<?php if ( $blog_posts->have_posts() ) : ?>
<div class="row blog-posts">
    <?php while ( $blog_posts->have_posts() ) : $blog_posts->the_post(); 
      $class = ($counter%2 == 0) ? '' : "all-posts--left"; ?>
      <?php set_query_var( 'class', $class ); ?>
      <?php  get_template_part( 'content', 'homepage' ); ?>

    <?php $counter+=1; endwhile; wp_reset_postdata(); wp_reset_query();?>
</div>

 <!-- Ajax Pagination -->
 <button class="btn btn-primary loadmore">Load More</button>
 <!-- End Ajax Pagination -->

<?php endif; ?>

loadmore.js

var page = 2;
jQuery(function($) {
    $('body').on('click', '.loadmore', function() {
        var button = $(this);
        var down_arrow = $('.down-arrow');
        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': blog.security
        };
        button.text('Loading...');
        $.post(blog.ajaxurl, data, function(response) {
            if($.trim(response) != '') {
                button.html('Load More');
                $('.blog-posts').append(response);
                page++;
            } else {
                $('.loadmore').hide();
            }
        });
    });
});

functions.php

function blog_scripts() {
    // Register the script
 	wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/loadmore.js', array('jquery'), false, true );
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'load_more_posts' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
 
    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );

add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');

function load_posts_by_ajax_callback() {
    check_ajax_referer('load_more_posts', 'security');
    $paged = $_POST['page'];
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => '2',
        'paged' => $paged,
    );
    $blog_posts = new WP_Query( $args );
    $counter = 1;
    ?>
 
    <?php if ( $blog_posts->have_posts() ) : ?>
        <?php while ( $blog_posts->have_posts() ) : $blog_posts->the_post(); 
        	 $class = ($counter%2 == 0) ? '' : "all-posts--left"; ?>
        	 <?php set_query_var( 'class', $class ); ?>
           <?php  get_template_part( 'content', 'homepage' ); ?>
        <?php  $counter+=1; endwhile; wp_reset_postdata(); ?>
        <?php
    endif;
 
    wp_die();
}

content-homepage.php

$class = get_query_var( 'class' );
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<div class="col-md-6 <?php echo $class;?>">
	<div class="sep-outer">
	    <div class="blog--all-post all-posts--left-right">
	       <a href="<?php the_permalink(); ?>" class="relative read-more--link">
	          <div class="read-more sm-headline sm-headline--bold caps">Read<br>More</div>
	          <img src="<?php echo $url;?>" class="image-read-more">
	       </a>
	       <div class="blog--post-content">
	          <!-- <div class="post--meta d-flex flex-wrap">
	             <div class="post--category post--meta-detail sm-headline sm-headline--bold caps">
	                <a href="#category/health-wellness/fitness/index.html">fitness</a>
	             </div>
	          </div> -->
	          <div class="read-more sm-headline sm-headline--bold caps">Read<br>More</div>
	          <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	          <div class="excerpt"><?php echo substr(get_the_excerpt(), 0, 110); ?></div>
	       </div>
	    </div>
	 </div>
</div>