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 ; ?>
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 ( ) ;
}
} ) ;
} ) ;
} ) ;
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 ();
}
$ 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>