***Wp Ajax Pagination***

***Wp Ajax Pagination***

***Wp Ajax Pagination***

Description: Here are three files one is portfolio.php where you will get your Blog Posts / CPT and at the end you will call your function which is in pagination file you can copy and paste pagination.php code directly in function.php file. And at the end of this you can copy and paste the theme.js code in your js file.
Video Link: https://www.loom.com/share/c2c4bd693f4b41c6b86868f3c4373f96?sid=3f6c1006-0de1-4b5b-adcd-8ba91e07748c
Video Link 2: https://www.loom.com/share/869cae5ca7a741e281276dae15d8cc6a?sid=5235cdb0-c038-4e3f-a18d-28c8ef06f375

pagination.php

<?php
    /* Custom Post Pagination */
    if (!function_exists('ic_custom_posts_pagination')) :
    function ic_custom_posts_pagination($the_query=NULL, $paged=1){
    
        global $wp_query;
        $the_query = !empty($the_query) ? $the_query : $wp_query;
    
        if ($the_query->max_num_pages > 1) {
            $big = 999999999; // need an unlikely integer
            $items = paginate_links(apply_filters('adimans_posts_pagination_paginate_links', array(
                'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
                'format' => '?paged=%#%',
                'prev_next' => TRUE,
                'current' => max(1, $paged),
                'total' => $the_query->max_num_pages,
                'type' => 'array',
                'prev_text' => ' <i class="fa fa-angle-double-left"></i> ',
                'next_text' => ' <i class="fa fa-angle-double-right"></i> ',
                'end_size' => 2,
                'mid_size' => 1
            )));
    
            $pagination = "<div class=\"col-sm-12 text-center\"><div class=\"ic-pagination\"><ul class='list-unstyled d-flex justify-content-center gap-3'><li>";
            $pagination .= join("</li><li>", (array)$items);
            $pagination .= "</li></ul></div></div>";
    
            echo apply_filters('ic_posts_pagination', $pagination, $items, $the_query);
        }
    }
    endif; ?>

portfolio.php

<!--CPT Ajax Pagination-->
<section class="cst_our_work py-5 my-4">
	<div class="container">
		<h2 class="text-center mb-4">Tech Ajax Pagination</h2>
		<?php
			if ( get_query_var( 'paged' ) ) { 
			$paged = get_query_var( 'paged' ); 
			} 
			elseif ( get_query_var( 'page' ) ) { 
			$paged = get_query_var( 'page' ); 
			} 
			else { 
			$paged = 1; 
			}
			$args = array(
			'post_type'        	=> 'portfolio',
			'posts_per_page'  	=> 6,
			'paged' 		=> $paged,
			);
			// the query
			$post_query = new WP_Query( $args );
			if ( $post_query->have_posts() ) : ?>
		<div class="cst_post_wrapper">
			<div class="row post_row cst_data">
				<?php while ( $post_query->have_posts() ) : $post_query->the_post(); ?>
					<div class="col-4 mb-4">
						<div class="card h-100">
							<div class="card-img-top">
								<img src="<?php echo get_home_url(); ?>/wp-content/uploads/2023/06/pagination.jpg" alt="" class="img-fluid">
							</div>
							<div class="card-body">
								<h5 class="card-title"><?php the_title(); ?></h5>
								<p class="card-text"><?php the_excerpt(); ?></p>
								<a href="<?php the_permalink();?>" class="btn btn-primary">Read More</a>
							</div>
						</div>
					</div>
				<?php endwhile; ?>
			</div>
			<div class="cst_data d-flex gap-4 align-items-center justify-content-center cst_pagination">
				<?php ic_custom_posts_pagination($post_query, $paged); ?>
			</div>
		</div>
		<?php wp_reset_postdata(); ?>
		<?php else : ?>
			<p class="text-warning"><?php esc_html_e( 'Sorry, no property matched your criteria.', 'ichelper' ); ?></p>
		<?php endif; ?>
	</div>
</section>

Style.css

.ic-pagination .page-numbers.current,
.ic-pagination .page-numbers:hover {
    background: #294d5c;
    color: #ffffff;
}

.ic-pagination .page-numbers {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border:1px solid;
    background: transparent;
    color: #294d5c;
    text-decoration: none;
}

.loader1 {
    display:inline-block;
    font-size:0px;
    padding:0px;
 }
 .loader1 span {
    vertical-align:middle;
    border-radius:100%;
    
    display:inline-block;
    width:10px;
    height:10px;
    margin:3px 2px;
    -webkit-animation:loader1 0.8s linear infinite alternate;
    animation:loader1 0.8s linear infinite alternate;
 }
 .loader1 span:nth-child(1) {
    -webkit-animation-delay:-1s;
    animation-delay:-1s;
   background:rgba(245, 103, 115,0.6);
 }
 .loader1 span:nth-child(2) {
    -webkit-animation-delay:-0.8s;
    animation-delay:-0.8s;
   background:rgba(245, 103, 115,0.8);
 }
 .loader1 span:nth-child(3) {
    -webkit-animation-delay:-0.26666s;
    animation-delay:-0.26666s;
   background:rgba(245, 103, 115,1);
 }
 .loader1 span:nth-child(4) {
    -webkit-animation-delay:-0.8s;
    animation-delay:-0.8s;
   background:rgba(245, 103, 115,0.8);
   
 }
 .loader1 span:nth-child(5) {
    -webkit-animation-delay:-1s;
    animation-delay:-1s;
   background:rgba(245, 103, 115,0.4);
 }
 
 @keyframes loader1 {
    from {transform: scale(0, 0);}
    to {transform: scale(1, 1);}
 }
 @-webkit-keyframes loader1 {
    from {-webkit-transform: scale(0, 0);}
    to {-webkit-transform: scale(1, 1);}
 }
 

theme.js

$( document ).ready(function() {
  /*Ajax Pagination */
$(document).on('click', '.ic-pagination a', function(e) {
e.preventDefault();
var properties_wrapper = $('.cst_post_wrapper');
var properties_wrapper_post = $('.cst_post_wrapper .post_row');
var cst_pagination = $('.cst_pagination');

var link = $(this).attr('href');

// Show loader
var loader = '<div class="loader1"><span></span><span></span><span></span><span></span><span></span></div>';
cst_pagination.append(loader); // Append the loader

// opacity and disable on click
properties_wrapper_post.css({
  'opacity': '0.2',
  'pointer-events': 'none',
});

// opacity and disable on click

$.get(link, function(data, status) {
  var newPosts = $(".cst_post_wrapper .cst_data", data);

  // Remove loader and update properties
  setTimeout(function() {
    properties_wrapper.empty(); // Clear existing posts
    properties_wrapper.append(newPosts); // Append the new posts

    // scroll to the top of the wrapper section
    $('html,body').animate({
        scrollTop: properties_wrapper.offset().top - 150
      }, 'slow'
    );

    // opacity and disable on click
    properties_wrapper_post.css({
      'opacity': '1',
      'pointer-events': 'all',

    });

  },2000); // Add delay to simulate loading time (remove this in actual implementation)
});

});
});

It is very useful, Thank you sir