Skip to content

Instantly share code, notes, and snippets.

@mohandere
Last active March 6, 2024 14:20
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
  • Save mohandere/8578ab2b26592536f4f4 to your computer and use it in GitHub Desktop.
Save mohandere/8578ab2b26592536f4f4 to your computer and use it in GitHub Desktop.
jQuery isotope plugin for wordpress posts filtering by category with pagination.
<?php
function get_isotope_item( $query_args = array() ){
$defaults = array(
'post_type' => 'post',
'posts_per_page' => -1,
'post_status' => 'publish',
);
// global isotope items per page
$items_per_page = 4;
$query_args = wp_parse_args( $query_args, $defaults );
$query = new WP_Query( $query_args );
$total_pages = absint( $query->found_posts / $items_per_page ) + 1;
//echo '<pre>';print_r($query_args);echo '</pre>';exit;
$yield = array(
'total_pages' => $total_pages,
'found_posts' => $query->found_posts,
'posts_per_page' => $items_per_page,
'output_items' => '',
'output_pagination' => ''
);
if ( $query->have_posts() ) {
$temp_counter = 0;
$page_counter = 1; // starting page number
ob_start();
while ( $query->have_posts() ){
$query->the_post();
$page_counter = absint( $temp_counter / $items_per_page ) + 1;
/*if( $temp_counter == 0 ){
echo '<div class="row">';
}*/
$image = get_field("image");
$img_url = '';
if( !empty( $image ) ){
$img_url = $image['sizes']['large'];
}
$classes = array();
$categories = wp_get_post_terms( get_the_ID(), 'category' );
if ( ! empty( $categories ) && ! is_wp_error( $categories ) ){
foreach( $categories as $key => $term ){
$classes[] = $term->slug;
}
}
?>
<div class="isotope-item <?php echo implode( ' ', $classes); ?>" data-page="<?php echo $page_counter; ?>">
<div class="isotope-item-inner">
<!-- <img class="isotope-item-featured-img" src="<?php echo $img_url; ?>"/> -->
<div class="isotope-item-featured-img" style="background-image:url(<?php echo $img_url; ?>);"></div>
<a class="isotope-item-title" href="<?php echo get_permalink(); ?>">
<?php echo get_the_title( get_the_ID() ); ?>
</a>
<div class="isotope-item-excerpt">
<?php echo wp_trim_words( get_the_content( get_the_ID() ), 80, '' ); ?>
<?php //echo wp_trim_excerpt( get_the_content( get_the_ID() ) ); ?>
<div class="isotope-item-read-more-wrap">
<a href="<?php echo get_permalink(); ?>" title="Continue Reading">Read More</a>
</div>
<div class="zigzag-divider"></div>
</div>
</div>
</div>
<?php
/*if( $temp_counter == 3 || $query->found_posts == $post_counter ){
echo '</div><!-- ./row-->';
$temp_counter = -1;
}
$post_counter++;*/
$temp_counter++;
}
$yield['output_items'] = ob_get_clean();
}
wp_reset_postdata();
if( $total_pages > 1 ): //pagination if more than one pages
ob_start();
?>
<div class="pagination" data-paged="1" data-total_pages="<?php echo $total_pages; ?>">
<div class="row">
<div class="col-sm-3 col-xs-6 pagination-lcol">
<a class="nav-previous inline-block btn disabled" title="Previous Page">Previous</a>
</div>
<div class="col-sm-6 col-xs-6 pagination-mcol">
<?php
for( $i = 1; $i <= $total_pages; $i++ ){
//$class = ( $i == 1 ) ? 'disabled' : '';
printf( __('<a class="numbered-page-nav inline-block btn" title="Go to Page" data-page_index="%d">%d</a>', 'roots'), $i, $i, $i );
}
?>
</div>
<div class="col-sm-3 col-xs-6 pagination-rcol">
<a class="nav-next inline-block btn" title="Next Page">Next</a>
</div>
</div>
</div><!-- ./pagination-->
<?php
$yield['output_pagination'] = ob_get_clean();
endif;
return $yield;
}
<?php
$args = array(
'orderby' => 'name',
'order' => 'ASC',
'hide_empty' => false,
'fields' => 'all',
);
$filters_html = '';
$product_filter_terms = get_terms( 'category', $args );
if ( ! empty( $product_filter_terms ) && ! is_wp_error( $product_filter_terms ) ){
foreach( $product_filter_terms as $key => $term ){
$filters_html .= wp_sprintf( '<a class="filter btn btn-link" data-filter=".%s" data-term="%s">%s</a>', $term->slug, $term->slug, $term->name );
}
}
$filters_html .= '<a class="filter btn btn-link active" data-filter="*" data-term="all">All</a>';
$query_args = array(
"post_type" => 'post',
"post_status" => 'publish',
'posts_per_page' => -1,
);
if( !empty( $page_term->slug ) ) {
$query_args["tax_query"] = array(
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => array( $page_term->slug ),
)
);
}
$yield = get_isotope_item( $query_args );
?>
<section id="posts-filter-section">
<h5>Filter</h5>
<div class="arrow-divider small"></div>
<div id="filters-grid">
<?php echo $filters_html; ?>
</div>
<div class="zigzag-divider"></div>
<div class="row posts-wrap">
<div class="col-sm-8 col-xs-12">
<div id="posts-grid" class="posts-container isotope">
<?php echo $yield['output_items']; ?>
</div>
<div class="clearfix"></div>
<div id="posts-pagination-wrap">
<?php echo $yield['output_pagination']; ?>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<?php
echo savi_get_find_store_widget();
?>
</div>
</div>
</section>
// JavaScript to be fired on the home page
var $grid = $('#posts-grid'),
$iso_obj = null;
var PostsFltr = {
__init_isotope: function() {
$iso_obj = $grid.isotope({
itemSelector: '.isotope-item'
});
},
__filter_isotope_items_by_category: function( cat ){
$grid.isotope({
filter: cat
});
},
__remove_items: function( items ){
$grid.isotope('remove', items );
},
__append_items: function( items ){
$grid.append( items )
// add and lay out newly appended items
.isotope( 'appended', items ).isotope('layout');
},
__insert_items: function( items ){
$grid.isotope('insert', $( items ) ); //.isotope('layout');
},
__filter_isotope_items_by_page: function( page_index ){
$grid.isotope({
filter: '[data-page="'+ page_index +'"]'
});
},
__getItemElements: function(){ //Returns an array of item elements.
return $grid.isotope('getItemElements');
},
};
var PaginationFltr = {
__go_to_page: function( index ) {
ProductsFltr.__filter_isotope_items_by_page( index );
},
__get_current_page_index: function() {
return parseInt( $('#posts-pagination-wrap').find('.pagination').attr('data-paged') );
},
__get_total_pages: function() {
return parseInt( $('#posts-pagination-wrap').find('.pagination').attr('data-total_pages') );
},
__set_current_page_index: function( new_paged ) {
$('#posts-pagination-wrap').find('.pagination').attr('data-paged', new_paged );
$('#posts-pagination-wrap .numbered-page-nav').removeClass('active');
$('#posts-pagination-wrap .numbered-page-nav:eq('+ ( new_paged - 1 ) +')').addClass('active');
},
__enable_disable_links: function( new_paged ) {
new_paged = parseInt( new_paged );
// console.log('new_paged='+new_paged);
// console.log('total_pages='+this.__get_total_pages());
if( new_paged === 1 ){
$('#posts-pagination-wrap').find('.nav-previous').addClass('disabled');
} else{
$('#posts-pagination-wrap').find('.nav-previous').removeClass('disabled');
}
if( new_paged === this.__get_total_pages() ){
$('#posts-pagination-wrap').find('.nav-next').addClass('disabled');
}else{
$('#posts-pagination-wrap').find('.nav-next').removeClass('disabled');
}
}
};
// On Page Init
PostsFltr.__init_isotope();
PostsFltr.__filter_isotope_items_by_page(1);
$(document).on('click', '#filters-grid > a:not(.active)', function(event) {
var _this = $(this),
term = _this.attr('data-term');
$('#filters-grid > a').removeClass('active');
_this.addClass('active');
$('#posts-grid').append( $ajax_loader );
var postData = {
'action' : 'posts_load_more',
'term' : term,
};
$.post( ajaxurl, postData, function( xhr_json_response ) {
xhr_json_response = jQuery.parseJSON( xhr_json_response );
PostsFltr.__remove_items( PostsFltr.__getItemElements() ); // Remove all
PostsFltr.__insert_items( xhr_json_response.output_items ); // Add New
$('#posts-pagination-wrap').html( xhr_json_response.output_pagination ); // Insert pagination Html
PostsFltr.__filter_isotope_items_by_page( 1 );
PaginationFltr.__set_current_page_index( 1 );
PaginationFltr.__enable_disable_links( 1 );
$ajax_loader.remove();
});
});
$(document).on('click', '.nav-previous', function(event) {
var old_paged = PaginationFltr.__get_current_page_index(),
new_paged = old_paged - 1;
PostsFltr.__filter_isotope_items_by_page( new_paged );
PaginationFltr.__set_current_page_index( new_paged );
PaginationFltr.__enable_disable_links( new_paged );
});
$(document).on('click', '.nav-next', function(event) {
var old_paged = PaginationFltr.__get_current_page_index(),
new_paged = old_paged + 1;
PostsFltr.__filter_isotope_items_by_page( new_paged );
PaginationFltr.__set_current_page_index( new_paged );
PaginationFltr.__enable_disable_links( new_paged );
});
$(document).on('click', '.numbered-page-nav', function(event) {
var _this = $(this),
new_paged = parseInt( _this.attr('data-page_index') );
PostsFltr.__filter_isotope_items_by_page( new_paged );
PaginationFltr.__set_current_page_index( new_paged );
PaginationFltr.__enable_disable_links( new_paged );
});
@sam3100
Copy link

sam3100 commented Jun 28, 2022

Category filter not working please let me know how to work

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