Integrate Isotope with WordPress, Part 2 (Categories)

A few months ago I wrote a post on how to integrate Isotope with WordPress. Since then, I’ve received some requests on showing how to limit it to one category. In this tutorial I will show how to add the Isotope code and scripts to a  template, filtering the posts that belong to one category by it’s sub-categories.

You will notice that most steps are the same as with the original tutorial, but I have left them here, so people won’t have to go back and forth between articles. I’ll highlight the lines of code that differ from the first article.

  1. Download the script from the Isotope repository, and upload it to your theme’s folder (for example /js/libs/jquery.isotope.min.js)
  2. Add a list of sub-categories of  my category 37 (here’s a tutorial on how to find the ID for your category). This list will serve as filters (following the filtering instructions in istotope):
  3. Make a custom  loop to load all the posts that match the sub-categories. Each blog posts must share a class (in my case, I used ‘item’), and additional classes to filter (from the list of categories from Setp 2):
  4. Go check. At this point your page should have a list with all your categories, and a bunch of posts. View the page source to make sure the blog posts have the proper classes (‘item’, plus all the categories it belongs to).
  5. Create a file with the necessary JavaScript to launch and set up Isotope, and place it in your theme folder (for example, /js/isotope.js):
  6. There is some optional, but recommended CSS that you should add to animate the filtering. Place a CSS file with the code in your theme folder (for example /css/isotope.css). Feel free to add additional styles to make your posts look nice:
  7. In functions.php, load the scripts and CSS:

That’s it!

8 Responses to “Integrate Isotope with WordPress, Part 2 (Categories)”

  1. Santi Pose

    Hi Alicia
    It works for me, thanks a lot. But I have a little problem, the first subcategory listed don’t shows the content, I change the first subcategory for another one and is allways empty (only for the first). The other subcategories works fine for listing and filter. I don’t understand what is the problem, I think it’s all as you explained.
    Thanks.

    • Santi Pose

      Hi again Alicia.
      Solved!! In this line:
      $the_query = new WP_Query( 'posts_per_page=50&cat='.$terms_ID_string );
      I’d written the category number after cat= and it causes the problem.
      Thanks a lot again for the tutorial.

  2. Rocio Santillana

    Hi Alicia,
    Your post Integrate Isotope with WordPress, Part 2 (Categories) is excellent! It helped me getting that working. I have one question, I tried to edit your code to change the layoutmode to “cellsByRow” and it did not work. When I did that all the posts ended up on top of one another.

    Do you have any advice?

    Thanks!
    Rocio

    • Alicia Ramirez

      It’s hard to tell without looking at your code, but make sure that the item divs don’t have margins. I had a problem with that once.

  3. Guy

    Thanks so much for this. It works perfectly!

    Just one question though.. is it possible to have 2 instances of the above code on the same page? I’m trying to add a second category and I duplicated the JavaScript making sure to use different variable names but the filtering won’t work for the second instance. Any advice you can give would be awesome!