This will create a filter system with Isotope automatically with your Post and Categories, or a Custom Post Type and a Custom Taxonomy. You’ll just have to fill in YOUR_CUSTOM_POSTTYPE and YOUR_CUSTOM_TAX. This also assumes you have Isotope pulling in correctly.
First, Start the Query:
<?php $customPostType = 'YOUR_CUSTOM_POSTTYPE'; $customTax = 'YOUR_CUSTOM_TAX'; $wp_query = new WP_Query(); $wp_query->query(array( 'post_type'=> $customPostType, 'posts_per_page' => 10, 'paged' => $paged, )); if ($wp_query->have_posts()) : ?>
The filter:
// Create Filter buttons from all Categories that have posts // create an array $filterLinks = array(); // an empty array to add to our previous array $newarray = array(); // Starter "Show All' Array $starter = array('name'=>'show all','slug'=>'*'); // put it into our array $filterLinks[] = $starter; $taxterms = get_terms( $customTax ); // loop through terms if not empty if ( ! empty( $taxterms ) && ! is_wp_error( $taxterms ) ){ foreach ( $taxterms as $taxterm ) { // show all is a little different, so we add a "." to the others $datafilter = '.' . $taxterm->slug; // create some $newarray = array( 'name' => $taxterm->name, 'slug' => $datafilter, ); // load it up $filterLinks[] = $newarray; } // endforeach } // if not empty // Filter Buttons output echo '<div id="filters" class="button-group">' ."\n"; // Create filter buttons from terms foreach ($filterLinks as $links) { echo '<div class="button" data-filter="' . $links['slug'] . '">' . $links['name'] . '</button>'."\n"; } echo '</div><!-- isotope filters -->';
Then, you can do your isotopes (your div items).
<div id="container"> <?php while ($wp_query->have_posts()) : ?> <?php $wp_query->the_post(); ?> <?php // Get the terms with each post $terms = get_the_terms( $post->ID, $customTax ); if ( $terms && ! is_wp_error( $terms ) ) : $cat_links = array(); foreach ( $terms as $term ) { $cat_links[] = $term->slug; } $mycats = join( " ", $cat_links ); ?> <?php endif; ?> <div class="item newsblock <?php echo $mycats; ?>"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?> <div class="news-content"> <div class="entry-content"> <h2><?php the_title(); ?></h2> <?php the_excerpt(); ?> </div><!-- entry content --> <div class="readmore">keep reading</div> </div><!-- news content --> </a> </div><!-- item --> <?php endwhile; ?> </div><!-- container --> <?php endif; ?>
Finally the jQuery to control the filter:
//Isotope with images loaded ... var $container = $('#container').imagesLoaded( function() { $container.isotope({ // options itemSelector: '.item', masonry: { gutter: 30 } }); }); // filter functions var filterFns = { // show if number is greater than 50 numberGreaterThan50: function() { var number = $(this).find('.number').text(); return parseInt( number, 10 ) > 50; }, // show if name ends with -ium ium: function() { var name = $(this).find('.name').text(); return name.match( /ium$/ ); } }; // bind filter button click $('#filters').on( 'click', 'button', function() { var filterValue = $( this ).attr('data-filter'); // use filterFn if matches value filterValue = filterFns[ filterValue ] || filterValue; $container.isotope({ filter: filterValue }); }); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); }); });
Pingback: traiteur rabat
Pingback: traiteur rabat maroc
Just what I looking for thanks! In ‘filter’ on line ’35’ ‘<div' should be '<button' and then it works.
hi,
is there a way to show a dropdown instead buttons and exclude some categories (uncategorized,…)
thanks