I check the other posts on this subject but I did not find the answer to my problem. I follow this tutorial : https://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/
But when I test and click on a filter, nothing happen... I return to the top of my website and that's it. Don't understand why My js :
jQuery(function ($) {
var $container = $('#isotope-list'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector : '.item',
layoutMode : 'fitRows'
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
And my php :
<section>
<ul id="filters">
<li><a href="#" data-filter="*" class="selected">Everything</a></li>
<?php
$terms = get_terms("category"); // get all categories, but you can use any taxonomy
$count = count($terms); //How many are they?
if ( $count > 0 ){ //If there are more than 0 terms
foreach ( $terms as $term ) { //for each term:
echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
//create a list item with the current term slug for sorting, and name for label
}
}
?>
</ul>
<?php $the_query = new WP_Query( 'posts_per_page=6' ); //Check the WP_Query docs to see how you can limit
// which posts to display ?>
<?php if ( $the_query->have_posts() ) : ?>
<div id="isotope-list">
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
global $post;
$termsArray = get_the_terms( $post->ID, "category" ); //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term
$termsString .= $term->slug.' '; //create a string that has all the slugs
}
?>
<div class="<?php echo $termsString; ?> item"> <?php // 'item' is used as an identifier ?>
<h3><?php the_title(); ?></h3>
</div> <!-- end item -->
<?php endwhile; ?>
</div> <!-- end isotope-list -->
<?php endif; ?>
</section>
thanks a lot for help
From the example i have provided to you - codepen.io/Igorxp5/pen/ojJLQE This is single term filter so keep that in mind.
For multi term filter you can check this one -https://codepen.io/TimRizzo/details/ervrRq
First prepare your template and query
<section>
<ul class="filters">
<?php
$terms = get_terms("category");
if($terms):
echo '<li><a href="javascript:void(0);" data-filter="*">All</a></li>';
foreach ( $terms as $term ):
echo '<li><a href="javascript:void(0);" data-filter="'.$term->slug.'">'.$term->name.'</a></li>';
endforeach;
endif;
?>
</ul>
<?php
$the_query = new WP_Query( 'posts_per_page=-1' ); // We need all posts
if ( $the_query->have_posts() ) :
echo '<div id="container" class="isotope">';
while ( $the_query->have_posts() ) : $the_query->the_post();
$terms = get_the_terms( get_the_ID(),'category');
// Filter is working with single term so i am getting first from array or keep posts with single category/tag or w/e.
echo '<div class="grid-item" data-filter="'.$terms[0]->slug.'">'.get_the_title().'</div>';
endwhile;
endif;
?>
</section>
From there in your js file add the following
jQuery(function ($) {
$(document).ready( function() {
var itemSelector = '.grid-item'; // Item class change if needed
var $container = $('#container').isotope({ // change ID of container if needed
itemSelector: itemSelector,
masonry: {
columnWidth: itemSelector,
isFitWidth: true
}
});
// Responsive pagination
var responsiveIsotope = [
[480, 2], // Bellow 480px wide 2 items per page
[720, 4] //Below 720px wide 4 items per page
];
var itemsPerPageDefault = 6; // Items per page unless responsiveIsotope . Over 720px wide 6 items per page
var itemsPerPage = defineItemsPerPage();
var currentNumberPages = 1;
var currentPage = 1;
var currentFilter = '*';
var filterAtribute = 'data-filter'; //Used for the filter
var pageAtribute = 'data-page'; // Used for the pagination
var pagerClass = 'isotope-pager'; // Class of the pagination container
function changeFilter(selector) {
$container.isotope({
filter: selector
});
}
function goToPage(n) {
currentPage = n;
var selector = itemSelector;
selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : '';
selector += '['+pageAtribute+'="'+currentPage+'"]';
changeFilter(selector);
}
function defineItemsPerPage() {
var pages = itemsPerPageDefault;
for( var i = 0; i < responsiveIsotope.length; i++ ) {
if( $(window).width() <= responsiveIsotope[i][0] ) {
pages = responsiveIsotope[i][1];
break;
}
}
return pages;
}
function setPagination() {
var SettingsPagesOnItems = function(){
var itemsLength = $container.children(itemSelector).length;
var pages = Math.ceil(itemsLength / itemsPerPage);
var item = 1;
var page = 1;
var selector = itemSelector;
selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : '';
$container.children(selector).each(function(){
if( item > itemsPerPage ) {
page++;
item = 1;
}
$(this).attr(pageAtribute, page);
item++;
});
currentNumberPages = page;
}();
var CreatePagers = function() {
var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);
$isotopePager.html('');
for( var i = 0; i < currentNumberPages; i++ ) {
var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAtribute+'="'+(i+1)+'"></a>');
$pager.html(i+1);
$pager.click(function(){
var page = $(this).eq(0).attr(pageAtribute);
goToPage(page);
});
$pager.appendTo($isotopePager);
}
$container.after($isotopePager);
}();
}
setPagination();
goToPage(1);
//When we click a filter grab value ,recalculate pagination, reset pagination
$('.filters a').click(function(){
var filter = $(this).attr(filterAtribute);
currentFilter = filter;
setPagination();
goToPage(1);
});
// On resize triger responsive pagination
$(window).resize(function(){
itemsPerPage = defineItemsPerPage();
setPagination();
goToPage(1);
});
});
});