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!)
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.
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?
Hey there,
I haven’t used Smart Archive Reloaded. Feel free to test it out though. Let me know how it goes!
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.
Hey this is awesome.
I highly recommend adding filter so users can use them to add support for cpt.
That’s not so hard to do.
Hey Rudd
Your site, WP Speak ,is loaded with everyone else’s work man!
Why you steal fro everyone in the WordPress community?
Whenever I click on the Get The Plugin button it takes me to a page that says Oops… Can’t find that page. Where can I download the new plug-in from?
We are working out a bug in our permalinks here. In the meantime you can download it here:
http://mintthe.me/isotopes-wp
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
I updated it today. Test it out and let me know if it works. There are some options in the Isotopes settings page for the custom slugs of your custom post type.
You can download it here or on the plugin page:
http://mintthe.me/isotopes-wp
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
Make sure you put the code before the loop on your home page:
Also, did you fill out the slug options on the Settings > Isotopes page in the WP admin area?
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! 🙂
I did something right and got one category of 4 to show up! Yipee. I’ll keep playing around it. I’m very excited…(Can I do a parent category with children categories?)
Please add this functionality!
I’d also liked to utilize parent and children category filtering. Here is a fiddle with this accomplished outside of wordpress, http://jsfiddle.net/wiktoratgmail/wH7N7/2/
Hi! Thank you for this awesome plugin! It’s exactly what I’m looking for, I installed it and it’s working great.
Hi there,
This plugin in exactly what I’m looking for. Unfortunately, I can’t make it work. As a result I get empty ul:
Here is my code http://d.pr/i/EePO
I hope you can help?
Thanks
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.
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
Hey Phil,
Thanks for the great plugin. I was just wondering if there’s any way I can customize isotope with its methods and layout modes after installing your plugin.
http://isotope.metafizzy.co/docs/methods.html
http://isotope.metafizzy.co/docs/layout-modes.html
Don’t need to request any help on my project, just wondering if this is possible since I had a bit of trouble finding those standard bits of code.
Thanks!
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
this error in my site.
http://hdemialab.org/wordp/?m=201302
ERROR:
Fatal error: Call to undefined function mintthemes_isotopes() in /home/www/hdemialab.org/wordp/wp-content/themes/twentyeleven/archive.php on line 39
THE CODE
I got this error too. I wonder if it’s an issue with the latest build of WordPress.
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?
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.
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!
Justin (and all),
I have the same problem! I need to reorder the isotopenav. Help?!
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.
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
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.
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.
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.
Hello,
Who speaks French, help me please! :'(
Thank you. 🙂
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?
@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!
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
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!
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?
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
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
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
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
if you made it work on the archive.php page (which is the only page it will work on, as far as I understand) why don’t you just change your the home-page-template to use archive.php? Cheers
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
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.
Hay guys
Looks like a really great plugin! Do you guys assist with the setup and installation of the plugin? Well at least the foundation?
Cheers, Carl
Sorry, what I meant was “Do you guys assist in getting it up and running on a theme?” Plugin has been installed…just battling to get it working…
Cheers, Carl
I have a questions:
Is there a way to have a direct url link to a pre-sorted view of the gallery?
Hi,
Was wondering how to make it work with custom taxonomies?
Same here! Very excited about this plugin, but having trouble activating it.. Is it possible to use it with (multiple) custom taconomies?
Post are overlapping due to image load I think. Mostly on Safari. Any solution???
This needs better usage instructions and a demo. Not working at all and can’t find out why, so I’m just going to start with Isotopes without a plugin.
Where abouts in EDD do you put the usage code, please?
for me no work, i have actived MP Isotopes
in my website i have 2 category… but i have a page in wordpress with a template (isotope)
in my template and nothing appear…
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! 🙂
You’ve mentioned WooCommerce & Easy Digital Downloads but I am considering using Membership to manage my customer subscriptions for digital downloads. Will this plugin play nicely with Membership too?
– Chris
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
Can you help us how to use it with commerce have you create any guide lines using those with woo commerce. Please help
Hello.
Please, help me.
I use the DIVI Theme for WordPress (elegantthemes.com/gallery/divi/) and I need put this plugin in my Portfolio Page.
Thank you for your support.
You can’t use this on your homepage or on any custom template, so it’s not really helpful unless you ONLY want sorting on your archive pages.
Hey Evan,
You can definitely use it on your homepage. We did it in the Armonico Theme as seen here:
http://demo.mintthemes.com/armonico
You just have to follow the same process you would when setting up your archive page and make sure to use the post_class function correctly inside your loop on your homepage or page template.
Pingback: Isotope and Isotope for WordPress
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
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
Hey Adrian,
That was a temporary bug with the site – it should work now though.
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?
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!!
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.