Last active
March 6, 2024 14:20
-
-
Save mohandere/8578ab2b26592536f4f4 to your computer and use it in GitHub Desktop.
jQuery isotope plugin for wordpress posts filtering by category with pagination.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 ); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Category filter not working please let me know how to work