I just finished up some neat little plugins which utilize the Isotope JS script developed by David DeSandro and Metafizzy. 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!)

Get The Plugin

The general premise behind these Isotope integration plugins is showing a “grid” of posts. A grid being X number of posts-per-row and Y number of posts-per-page. You can choose how many posts you wish to show and at which size.

By having the plugin create the “grid” of posts, we are easily able to integrate Isotope JS to filter those posts by category, tag, or any other taxonomy. It also makes it so that our “grid” can transition from theme to theme without ever breaking.

All of this can be done without any coding on your part. You simply install the plugin, tweak a couple of settings, and you’re done! I wanted to make integration of Isotope with WordPress completely seamless and require no extra coding.

There is a plugin for each type of post you might have. So for regular WordPress “Posts” (think blog), you can use the forever-free “PostGrid” plugin. For Easy Digital Downloads “downloads”, you can use the “DownloadGrid” plugin. For WooCommerce, you can use the “WooGrid”. And I also developed a special grid for showing your Social Media posts from Instagram, Twitter, and YouTube right on your website! (Im super excited about this one because it really amps up people’s websites and ties it together with their social media accounts.) You can find all of these grid plugins on our Plugin website here: https://mintplugins.com/isotopes-for-wordpress/

PostGrid WordPress Plugin Demo (showing Isotope Filtering)

 

SocialGrid WordPress Plugin Demo (showing Isotope Filtering)

Update: I noticed a lot of people are asking for support here in the comments. I am more than happy to help you out but the best way to contact is by emailing support@mintplugins.com.

73 thoughts on “Isotopes for WordPress

  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! 🙂

    • To make it more clear, empty list result is list where category links should appear (ul class=”isotopenav” data-option-key=”filter”), and post type is default wordpress post.

  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. 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?

  7. 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.

  8. 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!

  9. 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.

  10. 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

  11. 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.

  12. 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.

  13. 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.

  14. 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?

  15. @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!

  16. 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

  17. 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!

  18. 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?

  19. 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

  20. 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

  21. 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

  22. 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

  23. 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

  24. 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.

  25. 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! 🙂

  26. 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

  27. Pingback: Isotope and Isotope for WordPress

  28. 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

  29. 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

  30. Hello,

    I am having hard time implementing isotope in my blog posts and portfolio. I am creating a completely new theme and when I try to insert in index.php before the loop nothing happens. Could you please explain detailed, why is that?

  31. Hi,

    Cool work!! my site already has some dynamic filtering but I am not very satisfied with it. I was wondering if your plugin can do the dynamic filtering with checkboxes? Aim is to be able to show the result for combined tags selection for example..

    Thanks in advance!!

  32. Cool plugin. I do have one quick question though. Do you happen to know if there is a way to go directly to a pre-filtered view?

    Imagine one of my portfolio categories is “architecture”. I am looking for a way to set up a URL / link that sends users directly to the grid view that is pre-filtered to that category.

Leave a Reply