Isotopes for WordPress

I just finished up a neat little plugin that utilizes the Isotope JS script developed by David DeSandro and Metafizzy. What it does is outputs a list of tags within any specific category and allows your user to filter those posts on-the-fly. It’s really cool. And we’re actually using it on our own website! Check it out in action here: http://mintthemes.com/themes/ (Notice the area that says “Filter”. Try clicking on a few of those and watch the themes fly around perfectly into place!)

You can easily set this up for your own website project using the Isotopes for WordPress plugin I referred to above. Simply download it here, install it in your WordPress account, and then place the following template tag just above “The Loop” on any WordPress archive-based theme page. Most likely you’ll be looking for  archive.php, tag.php, or category.php.

Here’s the code you’ll need to add:

<?php mp_isotopes(); ?>

We even coded in support for the Easy Digital Downloads and WooCommerce plugins so that you can use this to filter products if you’re using either of those shopping cart plugins on your website. I had some help from Pippin from Easy Digital Downloads on this one so go show him some love too :)

P.S. Keep in mind that while my plugin is free to use as much as you want, the Isotope JS script (which we don’t own) is free to use for personal and/or non-commercial projects only. If you need it for commercial projects you should pick up a licence from David DeSandro and Metafizzy (the creators of the JS script).

So go ahead and try it out!

Get The Plugin

What if it doesn’t work for me?

The first thing to check is that your theme is using the WordPress standard post_class on it’s loop items. This plugin uses that to identify which items belong to which tag or category.

The second thing would be to check if you are trying to make this work for a Custom Post Type. if so, that custom post type would need to be coded into the plugin – which I am willing to do if it would be helpful to enough people. So let me know if there is a Custom Post Type you’d like to see added to the plugin!

chat78 Comments

  1. Hi, I was wondering if it can be used with smart archive reloaded.. I have this plugin run to sort every post in list manner, and would like isotope to sort them based on the category chosen, is it possible to do that?

  2. I’m really excited about finding this. I have been searching far and wide for a filtering mechanism based on a user’s category selection.

    Questions:
    Is it possible to do this on categories from custom post types?
    Do all the pages need to be present on the homepage? I was hoping to have the user treat the “filter” like a category selection.

    Please see this linked image with a wireframe, where “marathon” (in the drop-down) is the category, and “Day 1, Day 2, and Day 3 are widgets with post excerpts categorized as “marathon.” http://cl.ly/image/0B3e1L1A1A2F

    I’m hoping that this Isotope for Worpress does the trick! Although I would like to have it as a drop-down, I am perfectly fine treating it like a filter and can list all the categories on one page for the user to filter, to keep with this code structure.

    Thanks,
    Catharine

    p.s., my apologies if this only works in Mint Themes. I’m a WP newbie and having a lot of fun learning!

    • Hey there,

      Absolutely this will do what your wireframe is looking for. The plugin comes with an option to use a dropdown instead of a list of links.

      The only thing is that it isn’t programmed with every Custom Post Type out there so there’s a good chance it won’t work for your custom post type.

      It is made to use normal posts and it also has support for the Easy Digital Downloads and WooCommerce post types.

      You just gave me an idea for an option to fill in your own Custom Post type though. I might try and work on that later today.

  3. Excellent, Phil. Thanks so much! Let me know if I can provide you with any additional code / details / information for my Custom Post type.

    I cannot emphasize enough how excited I am to have found this solution and I’m really excited to get it working!

    Catharine

  4. Hi Phil,

    Thanks for your quick effort and reply! I’ve installed this updated plugin. I’m wondering if I’ve missed a step, as I do not see the drop-down menu on the homepage. Is there anything I should be doing to the home.php or templates.php file, especially in regard to my custom post?

    Here is my Home.php code: http://pastebin.com/Y13tmkrZ
    and Functions.php code: http://pastebin.com/D997Wrdr
    and my custom post: http://pastebin.com/BALrLTBe

    On the plugin, I set Custom Post Slug as: “Workout”
    Set Category Slug as “workouts” where “workouts” is the parent for multiple categories.

    Any pointers greatly appreciated!
    Catharine

      • Thanks, Do I put it in my home.php file, in the line before

        And is, ” the only code I put in?

        And does it make a difference that my site is not built on mint themes? Would I replace it with the Responsive Theme ID name?

        Yes, I did fill out the slug options in Settings > Isotopes.

        Thanks,
        Catharine

        • It doesn’t matter who the theme is made by as long as it is up to WP standards and uses the post_class functionality – which is also WP standard.

          You have to put that code before the loop which looks like this:
          < ?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

          • I’ve added that and this time did not get an error on the homepage, which was great.

            The filters are still not showing. I’m getting embarrassed because I’m sure it’s really simple but there’s just something not coming through properly. :\ I am happy to share with you my admin login if you’d like. You can email me if that is easiest.

            Seriously, I am taken aback by this incredible customer service, Phil. Thank you for all of your patience!

            Catharine

          • I finally got the drop-down menu to appear on the homepage when I did not enter a custom post slug or category, so I am guessing something’s a bit off about how my custom categories are set up. Even when I was on the standard post, I only got “All” categories. Interestingly, going to list of links, I got 0 links to display.

            Feels so close, yet seems so far away! :)

  5. Phil,

    Great plugin. I need the plugin to run on an array of Custom Post Types.

    If I were willing to edit the code where would you suggest starting.

    FWI all of my custom post types for the sake of isotope are identical in structure to a standard post.

    Thanks!

    Michael

  6. hi phil, very cool isotope for wordpross, but I can not figure out where I need to enter could help me, I installed the plugin correctly and I’m using version 3.5.1 of wordpress. tnx

  7. I am using a child theme based on twenty-twelve. I have had no luck with this so far.

    All I have to to do is install the plugin and add ” to my archive page template right?

    Am I missing something?

  8. Is there any way I can change the order of the isotopenav li items (The sort/filter list)? It seems to default to alphabetical order no matter how I rearrange categories, tags in wordpress. Otherwise it’s working beautifully.

  9. Phil:

    I have been looking for something like this for months -ever since I found isotope – have tried many plugins but none do what i need just yet. I’m going to give yours a try – fingers crossed!

  10. I have fund the every template I used that line above the loop comes up with a blank page. with further digging around i found thefollowing div was created.

    HEIGHT:0;

    That was very interesting. Even in FireBug, when I create the hieght to work and allow me to see, non of the filters do anything. Perhaps this was not as easy as I thought.

    Im using WordPress with the Genesis Framework and the Minimum Child Theme.

  11. Hello guys!
    I was trying your plugin… I installed it and I put the code
    *if ( function_exists( ‘mintthemes_isotopes’ ) ):
    mintthemes_isotopes();
    endif;*

    and
    **

    before
    **

    in loop-single.php and loop-page.com (I have nothing likely archive.php, tag.php, or category.php)

    and nothing changed… so I missing something :(

    Could you help me?

    Thanks a million in advance

  12. Hi Phil, I install your plugin and set my custom post type slug in the settings. What should I further to do to get the plugin work. I have also edit categories to my portfolio items… Thank you in advance.

  13. Phil,

    To start, thanks for building the isoptope plugin and sharing it with everyone – very generous. Unfortunately I’ve been struggling to get things working. I have done the following:

    1. installed the plugin per the readme file
    2. wrapped the loop with <div id="post-” >
    3. added directly above the loop
    4. added category and tag slugs in the plugin settings (not sure if these are correct though)

    You can view a category page with all this at – http://freeandairpistol.com/?cat=6

    I was odd that it displays differently on our public server than locally on my dev environment. Locally the filter links are styled and appear as buttons. Not sure why as I copied the exact same files into the wpcontent/themes/themename directory.

    Any direction or assistance you could provide would be greatly appreciated. I’ve been struggling with this for an entire day and really made no headway. Thanks in advance!

    Best regards,

    -T.

  14. Phil – this is a fantastic little deal you’ve built here and it was a piece of cake to install: activate, insert tag. Done.

    I’ve been reading the Isotope docs and I’m wondering if you’ve played around with the ability to sort the items at all. I’m assuming the WP query pulls in the posts by date/desc but then we’re stuck with that sort order.

    For WordPress use, that makes sense, and there’s probably little need to sort any other way, UNLESS you want Isotope to rearrange your items to fit in a masonry grid. For example, I show nothing but the featured image in my archive lists and I set .hentry.tag-red to be half the size of the normal .hentry elements. Technically this should produce a grid where some elements are full-size and then others are just 1/4… and that’s exactly what happens, but because Isotope cannot re-sort the posts, I’m getting gaps in my layout. Does that make sense?

    I’m curious if you’ve looked into this and know how to do it… even if it means adding properties to the .isotope function in the jQuery. Not super skilled there myself so any insights you have would be great.

    • Sorry… just a little clarification… it *is* using the masonry layout when you hit the category, but when you filter, it appears to switch to fitColumns, leaving gaps. I have a working example if you want to see it. Just let me know.

  15. Hello when I download the plugin and open the zip file it creates a new .zip.csgz file. If I go into the interface and upload the original zip file it gives me and error The package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature.

    Is there something wrong with the file?

  16. @Phil – Any update on the custom post type option?

    In a previous post you said:
    “You just gave me an idea for an option to fill in your own Custom Post type though. I might try and work on that later today.”

    I look forward to your reply! So Excited! Thank you!

  17. Hi!
    Thanks for this plugin!
    My question: how can we combine filters?

    For example, i’d like to filter items from Category 1 and amoung this category filter items from Category 2…

    On the Isotope’s website; it’s sait that’s possible by puting .category1.category2 but i don’t know where in the plugin…

    Thx again

  18. No fucking way – this bullshit does not work at all or the lazy author forgot to attach usage instruction – one of thousands pointless garbage polluting worldwide net. The tiny demo would be good enough, but the author feels great enough sharing his shit as a new Jesus. Poor weirdo!

  19. Thanks for doing so much of the legwork for us with converting Isotope to WordPress! After a bit of wrangling, I’ve got the plugin working with my custom theme. Just two issues I’m running into that hopefully someone can help with please:

    1. When a page loads, not all the blocks are correctly aligned initially and only adjust to their correct place when you resize the browser or click a category/tag filter button. This happens even if I use the plugin in the TwentyTwelve theme.

    2. I’ve tried adding this to my main index.php page and it displays as Isotope but without any category or tag filter buttons.

    Keep up the great work.
    Vaughan

    • Okay managed to solve this finally. For anyone reading this who encountered a similar issue, be sure to configure the .hentry style in your CSS (I was configuring article). Apply a width preferably (even if it’s just percentage). Awesome plugin!

  20. I’m using a child theme to Twenty Eleven. I placed ” in the Showcase template. I creates a post for the first portfolio item and set a featured image.

    I’ve tried a number of things and nothing works. Obviously I’m not doing something right. I tried using the archive.php I’m just hitting brick walls. How do I get this thing to work?

  21. Hi there,

    I am using the Feather theme for WordPress which has this isotope already coded with it which is great.

    On the Portfolio page (where the isotope is implemented), you can see it in action with the 3 categories at the top:

    http://www.coffeeandtest.co.uk/goldcrest/portfolio/

    If you click one of the portfolio items, you will see a ‘Back to Portfolio’ button at the top which takes you back one step.

    Is it at all possible to go back to the last category/filter that was viewed? At the moment it just takes you back to the portfolio page but if you were on ‘Past Successes’, I would like to be taken back to that filter if possible.

    Any help would be greatly appreciated.

    Many thanks

    Jack

  22. Hi!,

    Do you have any idea how to load more post using ajax in your plugin?

    I installed your plugin and im currently using it in my homepage but the problem is the loading more post using ajax, i got no idea on how to do it.

    Your tips/help will greatly appreciated.

    BTW Great plugin you got there.

    Ali

  23. Hello

    Thanks in advance for making this pluggin for Isotope.

    I am using the Twenty Twelve WordPress theme for a client

    I would like the use the Isotope functionality to filter different child categories of a parent category called ‘Portfolio’.

    * I have installed and activated the pluggin
    * Added above the loop on the category.php, archive.php & tag.php files..

    i.e

    ……………

    ……………

    But am unclear how your pluggin generates a navigation and displays thumbnails for the categories.

    Please can you advise where I need to upload/create the thumbnails, and where I would put any code to show the isotope filter navigation.

    And if I require any other files for the Isotope script to work.

    Cheers,
    Carlos

  24. I’m having problems with getting this plugin to work. I’m trying to get this to work on my home.php to sort different posts by category.

    I’ve read through the installation instructions and it sounds very straight forward, however, I’ve been unable to get the plugin to work correctly on this particular page. I’d seen people mention it could be a lack of post class support from the theme, but I’ve tested this on the archive.php page and it works. I’m not exactly sure why it doesn’t want to work on the home.php page though. I looked into the code and its throwing the isotope classes into the posts on the home.php page, but the list for categories are not showing up.

    Does anyone have any ideas about this or possibly had similar issues? Some help on this would be greatly appreciated it! I feel like I’m really close to getting this to work, but I feel like maybe I’m missing something small somewhere?

    http://www.saviorcustomdrums.com/beta/

    Thanks a bunch in advance for the help!

    Derek

  25. Hi,
    thank you for this awesome plugin. Isotope is not so easy to implement in WP.
    Just wondering is it posible to have multiple filtering,
    like by tags and categories.
    It works if I add filter nav directly in code. What about shortcode?
    And where to choose if it’s going to filter tags or cats? Tags are default.

    thanx,
    Dragan

  26. I’m trying to implement isotope in a woocommerce shop page, where each product would be a isotope item. So far it’s been a chore and a half trying to get the 2 to play nice, and since yesterday it is completely broken.

    Any insight or tutorial how to set it up with woocommerce would be great.

  27. Hi,

    A guide to getting this working with Woocommerce would be really really appreciated! I’ve tried embedding the php tag, setting the customer category slug to product_cat. No joy whatsoever!

    Please! :)

  28. Hi,

    Ive just updated Woocommerce from 2.1.2 to 2.1.3 and the Isotope filtering of my products has stopped working. The filter (tag) buttons are there and the products appear for a moment but then they disappear.

    Any thoughts ?

    Greg

  29. Pingback: Isotope and Isotope for WordPress

  30. Hi there,
    Very cool plugin! Just wondering if there’s a way to specify tags or categories? I have this on my home page in a custom query, and it shows *all the tags* when all I want are categories? Browsed comments and didn’t see this addressed, tho maybe I missed it :)

    thnx!
    -jennyb

  31. I read a lot of interesting articles here. Probably
    you spend a lot of time writing, i know how to save you a lot of time, there is an online tool that
    creates readable, SEO friendly posts in minutes, just search
    in google – laranitas free content source

  32. Hello,

    I am working on a site with a custom post type created through the Custom Post Type UI plugin. Is there a way to get a custom post type created through the CPT UI plugin to work with the Isotopes for WordPress plugin? Please advise.

    Thank you,

    JH

  33. Pingback: Isotope für Magento, WordPress und Typo3 « eCommerce für KMUs

  34. Excellent goods from you, man. I have bear in mind your stuff previous to and
    you are just extremely fantastic. I really like what you’ve got right here, certainly like what you’re saying and the best way during which you say it.
    You are making it enjoyable and you still take care of to
    keep it smart. I can not wait to read far more from you.
    That is actually a tremendous site.

  35. I do agree with all the ideas you’ve presrnted tto your post.
    They’re really convincing and will certainly work. Nonetheless,
    the posts are too quick for novices. Could you
    plrase lengthen them a little from nextt time? Thank you for the post.

Leave a Reply

Send