1
2
3
4
5
6
7

<h2>Filter the Content</h2> 
<ul class="filter" data-filter-group="color"> 
	<li><a href="#filter-color-any" data-filter-value="" class="selected">All</a> 
	<li><a href="#filter-color-red" data-filter-value=".red">red</a> 
	<li><a href="#filter-color-blue" data-filter-value=".blue">blue</a> 
	<li><a href="#filter-color-yellow" data-filter-value=".yellow">yellow</a> 
</ul>

1
2
3
4
5
6
7
8
9
10
11
12

<h2>Filter the Content</h2> 
<ul class="filter" data-filter-group="color">
	<li><a href="#filter-topic-any" data-filter-value="" class="selected">All</a></li>
	<?php
		//Grab the child categories
		$categories=get_categories('child_of=XX');
		foreach($categories as $category) {
			//and format them for use as isotope filters
			echo '<li><a href="#filter-topic-' . $category->slug . '" class="" data-filter-value=".category-' . $category->slug . '" ' . '>' . $category->name . '</a></li>';
		} 
	?>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

$(document).ready(function () {
 
	//Set your isotope area
	var $container = $('#yourContainer'),
	filters = {};
 
	//Set our items to be filtered, .post will work if you're using the post_class(); function
	$container.isotope({
		itemSelector : '.post'
	});
 
	//Set the buttons to filter the content
	$('.filter a').click(function(){
		var $this = $(this);
		// don't proceed if already selected
		if ( $this.hasClass('selected') ) {
		return;
	}
 
	var $optionSet = $this.parents('.option-set');
	//change selected class
	$optionSet.find('.selected').removeClass('selected');
	$this.addClass('selected');
 
	//store filter value in object
	//i.e. filters.color = 'red'
	var group = $optionSet.attr('data-filter-group');
	filters[ group ] = $this.attr('data-filter-value');
 
	//convert object into array
	var isoFilters = [];
	for ( var prop in filters ) {
	isoFilters.push( filters[ prop ] )
	}
	var selector = isoFilters.join('');
	$container.isotope({ filter: selector });
 
	return false;
	});
 
});

15 Responses to Isotope.js filtering with WordPress Categories

1. Atlante says:

   September 23, 2011 at 5:07 PM

   Well what is the loop supposed to look like?

   Reply
   • Atlante says:

     September 23, 2011 at 5:07 PM

     Also thanks for the post really got it to work except, I’m not really sure what the loop is supposed to look like.

     Thanks!

     Reply
   • Vanessa says:

     November 5, 2011 at 5:23 PM

     this is great and really helped a lot, but i’m wondering the same, i’m having a big trouble to implement it on the loop. seems nothing works :\
     If anyone has been successfully doing it can you please share the files?

     Once again Thanks a lot :)

     Reply
     • Merlin says:

       November 7, 2011 at 5:43 PM

       You can use any loop you like, it’s not really important. The key parts are to have a container for the all the posts and for each post to have a class. You use these to tell Isotope what you want to filter (this is on lines 4 & 9 of the jQuery I posted above).

       I’d suggest doing some experimentation with the Isotope library first using their documentation, once that makes sense it fairly straight forward to adapt it for WordPress.

       Reply
2. Merlin says:

   September 26, 2011 at 12:31 AM

   Well, it doesn’t really matter! The key thing is using post_class() which will pull through the category name for each individual post as a class, this is what we’re actually using to filter everything.

   This is basically what I was using on the project I was using, wordpress seems to struggle when posting PHP, here’s a… Screengrab

   So you pull through all the posts under a certain category, show a title, an excerpt and a read more link.

   Hope that helps!

   Reply
3. Adriana says:

   September 28, 2011 at 1:42 AM

   Hi, thanks for your post, but what about if you want to filter the post titles per category but also you would need to reflow the elements within days as well as hiding empty days in a sort of calendar?

   Reply
   • Merlin says:

     September 28, 2011 at 2:30 AM

     Hmmm not sure entirely what you mean… Perhaps you could use the category rows method and create categories for days of the week?

     Or maybe use sorting methods to sort things calendar events chronologically and then add filters for event types?

     Can’t really say much more without knowing more about what you’re trying to do. Hope that helps, good luck!

     Reply
4. Adriana says:

   October 21, 2011 at 10:06 PM

   Hi Merlin,

   I would like to know if I can get some help from you to develop a calendar with isotope.

   What I would like to do is to filter events by:
   All Dates
   Today
   This Week
   This Month

   Could you please give me any advice or maybe contact me to my email, so maybe we can make an exchange or a small discussion?

   Thanks

   Reply
5. Tmoore says:

   February 2, 2012 at 6:29 PM

   Great tut – thanks – so far i’ve got everything working but i’ve detected an interest bug. As i cycle between my different category filters, i can only click on each one once – after that it stops functioning. I’ve located this to the “selected” class that gets added to to the active category link. When i click to a new link, the old .selected class stays on the previous link, while also adding to the new. Eventually they’re all classed selected and no filter works. Any thoughts on how to fix this?

   Reply
   • Merlin says:

     February 2, 2012 at 7:07 PM

     Ahh, you made need to tweak your jQuery slightly. As you mentioned, the script only proceeds if the button doesn’t have a class of selected.

     You’ll need to switch the classes on the click like this — http://jsfiddle.net/92C7Y/

     Reply
     • Tmoore says:

       February 2, 2012 at 7:27 PM

       ah – yep.
       Thanks – i knew it was going to be easy when i finally figured it out. forgot to replace the .option-set call for my parent UL (for cats) thanks!

       Reply
       • Merlin says:

         February 2, 2012 at 7:31 PM

         Awesome, glad you got it fixed!

         Reply
       • Graeme says:

         February 3, 2012 at 12:10 AM

         I couldn’t see the source code or snippit of code for this please. I really cant get it working and have no idea why! this is what I have so far http://pastebin.com/pJyEaWp4

         Reply
6. Yafes says:

   February 8, 2012 at 10:28 PM

   @Graeme, are you sure that your code is working? add an alert(“test”) into the .click functino to see if its working anyway.

   if you have the working site for it too somewhere online, someone could debug it better. see ya.

   Reply
7. RHO says:

   February 9, 2012 at 8:02 AM

   Thank you very much for this great tutorial. It helped me alot! After a while i figured out that i made the same mistake like “tmoore” above, but now i`m glad to figured that out!

   Reply