Skip to content

Instantly share code, notes, and snippets.

@raazon
Last active April 7, 2023 10:41
Show Gist options
  • Save raazon/1b76d8962e7035c395e6c088b4426d83 to your computer and use it in GitHub Desktop.
Save raazon/1b76d8962e7035c395e6c088b4426d83 to your computer and use it in GitHub Desktop.
Wordpress custom post type ajax pagination
<?php
/*
* Custom Post Pagination
* @since 1.0.0
* return
*/
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="fas fa-angle-double-left"></i> ',
'next_text' => ' <i class="fas fa-angle-double-right"></i> ',
'end_size' => 1,
'mid_size' => 1
)));
$pagination = "<div class=\"col-sm-12 text-center\"><div class=\"ic-pagination\"><ul><li>";
$pagination .= join("</li><li>", (array)$items);
$pagination .= "</li></ul></div></div>";
echo apply_filters('ic_posts_pagination', $pagination, $items, $the_query);
}
}
endif;
// AJAX PAGINATION
$('.ic-pagination a').live('click', function(e){
e.preventDefault();
var properties_wrapper = $('.properties-wrapper');
var link = jQuery(this).attr('href');
// opacity and disable on click
properties_wrapper.css({
'opacity' : '0.5',
'pointer-events' : 'none'
});
$.get(link, function(data, status) {
//console.log(status);
var properties = jQuery(".properties-wrapper .row", data);
properties_wrapper.html(properties); // load properties
// scroll in top of wrapper section
$('html,body').animate({
scrollTop: properties_wrapper.offset().top - 150
}, 'slow'
);
// opacity and disable on click
properties_wrapper.css({
'opacity' : '1',
'pointer-events' : 'all'
});
});
//pagination.load(link+' .ic-pagination ul');
// update url
//window.history.pushState('obj', 'client', link);
//return false;
});
<?php
$property_per_page = 6;
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' => 'property',
'posts_per_page' => $property_per_page ? (int)$property_per_page : 6,
'paged' => $paged,
);
// the query
$property_query = new WP_Query( $args );
if ( $property_query->have_posts() ) : ?>
<div class="properties-wrapper">
<div class="row">
<!-- the loop -->
<?php while ( $property_query->have_posts() ) : $property_query->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php endwhile; ?>
<!-- end of the loop -->
</div>
<!-- pagination here -->
<div class="row">
<div class="col-md-12">
<?php ic_custom_posts_pagination($property_query, $paged); ?>
</div>
</div>
</div><!-- .properties-wrapper -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p class="text-warning"><?php esc_html_e( 'Sorry, no property matched your criteria.', 'ichelper' ); ?></p>
<?php endif; ?>
@abbaty48
Copy link

Nice Work @raazon, this worked 100%, but I had to make some little adjustments.

With PHP version 8.+ and WordPress 5.8 made these changes.
instead of

if ( get_query_var( 'paged' ) ) { 
  $paged = get_query_var( 'paged' ); 
} elseif ( get_query_var( 'page' ) ) { 
  $paged = get_query_var( 'page' ); 
} else { 
  $paged = 1; 
}

just use: $paged = get_query_var('paged') ?? get_query_var('page') ?? 1;

And in the Jquery, use .on() rather than the .live() function as it's deprecated from version 1.7+, and uncomment these line
//pagination.load(link+' .ic-pagination ul');
//window.history.pushState('obj', 'client', link);

for the pagination to refresh, change the
pagination.load(link+' .ic-pagination ul');
to
$('.ic-pagination ul').load(link+' .ic-pagination ul');

HOPE THIS HELP

@eyalbin
Copy link

eyalbin commented Oct 3, 2022

Hi, I tried to use this code but AJAX is only working once, on the next click the page is being reloaded, maybe you had a similar issue and solved it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment