Replacing WordPress Pagination Link With Ajax Call

I Have A Custom Page With Working Code Where I Want To Replace The “Older Posts” Link With Ajax Call That Loads The Next Set Of Pages On Clicking The Link. I Have Read A Lot About It Online But I Cannot Get It To Work. Any Kind Of Help Or Lead Is Appreciated

<?php ob_start(); ?>
<?php get_header(); ?>

<?php
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$the_query = get_posts( 'cat=3&posts_per_page=5&fields=ids&paged=' .$paged);
$loop = new WP_Query( $the_query );
?>

<div class="col-lg-3 col-md-3 col-sm-3">
</div>
<div class="col-lg-6 col-md-6 col-sm-6" style="margin:0 0 0 0;font-size:1.2em;color:#f4511e;font-weight:900;text-align:center;">
<?php  
if($the_query)
{
foreach($the_query as $post_id) 
{
echo "<div>";
$post_author_id = get_post_field( 'post_author', $post_id); 
$user_info = get_userdata($post_author_id);
$user_info->user_email; 
wp_reset_postdata();
$title = get_the_title($post_id);
setup_postdata($post_id);
echo "<div style="border-style:solid;border-color:#f4511e;border-width:1px;margin:1em 0 0 0;padding:0 0.5em 0 0.5em;background-color:#f9f9f9;">";
echo "<div>";
echo "<div class="col-lg-3 col-md-3 col-sm-3" style="margin:1em 0 0 0;">";
echo "<div>";
echo get_avatar($user_info->user_email, 60 );
echo "</div>";
echo "</div>";
echo "<div class="col-lg-9 col-md-9 col-sm-9" style="margin:1em 0 1em 0;">";
echo "<div style="text-align:left;font-weight:900;font-size:1.0em;color:#000000;">";
echo " Posted By ";echo $user_info->first_name;
echo "</div>";
echo "<div style="text-align:left;font-weight:900;font-size:0.8em;color:#000000;">";
echo " Date : "; echo get_the_time('d-m-Y', $post_id); echo " | Time : "; echo get_the_time('h:i A', $post_id);echo ' | Post Ref Id :' , $post_id ;
echo "</div>";
echo "</div>";
echo "<div style="text-align:left;font-weight:900;font-size:1.07em;margin:1em 0 0 0;line-height:1em;">";
echo '<a href="' . get_post_permalink($post_id) . '" target="_blank"> '.$title.' </a>';
echo "</div>";
echo "<div style="text-align:left;font-weight:900;font-size:0.85em;margin:1em 0 0 0;line-height:1em;">";
echo the_content();
if( is_user_logged_in() )
{
echo "</div>";
}
echo "</div>";
echo "</div>";
echo "</div>";
}
}
next_posts_link(' Older Posts » ', $loop->max_num_pages); // i wish to replace this part with ajax call that loads posts in the same page on clicking this link
?>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
</div>

Read more here: Replacing WordPress Pagination Link With Ajax Call

Leave a Reply

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