June 05, 2018: Updated version of the tutorial here.
DO NOT follow the one below.
This is a
up-to-date tutorial on setting up a responsive filterable Portfolio grid in Genesis using Portfolio Post Type plugin and the latest Isotope (v2.2.2).
Screenshot of Portfolio CPT archive:
When featured image is hovered, we shall display Portfolio item's title centered on a dark translucent overlay.
Portfolio Category and Tag taxonomy archives will display the grid of paginated portfolio entries (pagination not shown in the screenshot below) but without the filters:
I will also share the code for a variation in which the filters are in the form of a select dropdown menu instead of horizontal buttons.
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Add the following in child theme's functions.php:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
What about multiple select ? Fruit AND nature
Set the data-filter using CSS-style selector like this:
<button class="special" data-filter=".fruits.nature"></button>
Full block: http://pastie.org/pastes/10548006/text
This is where a demo site would be helpful to see. I want to see what happens when a portfolio item is clicked. Does it go to a portfolio post? Or does it only have a hover behavior that offers a name on hover?
Here is the live demo URL: http://dev-filterable-portfolio.pantheon.io/portfolio/
> Does it go to a portfolio post?
Can you turn the demo back on?
I’ve altitude pro theme and I want to use this for post format type ‘video’. Is it possible to apply the same logic on non CPT posts or regular post types such as media and video?
Please let me know
As far as I know, no.
You may want to consider creating a video CPT with custom fields for video URL and any other associated meta data.
It’s possible to apply this kind of filter to any type of content in WordPress if you use the following plugin: https://github.com/robincornett/sixtenpress-isotope
Hope this is helpful,
I saw, you have separate tutorial listed for filterable content using altitude pro theme. Would this tutorial work on altitude pro? if not would you recommend changes needed for altitude pro theme?
Please let me know.
The following three tutorials are specifically written for Altitude Pro and I suggest you follow those instead of this tutorial for Altitude Pro:
There is nothing wrong in using earlier version of Isotope, which the above tutorials are based on.
As per your suggestion, I implemented this logic for custom post type “video”. Category page is listed with appropriate tabs. Isotop works fine, filters contents properly. However I am not able to get the styling correctly. I get list of all categories, no styling and in 1 column. Do you happen to see similar problems? I am using altitude pro theme.
Can you provide the URL of your site?
Looks fine to me. http://d.pr/i/1jyOK
Strange.. I’ve sent you screenshots on how it looks on safari, chrome and mobile device. It doesn’t seem to have picked up the style
Would you please send me a test email at [email protected]il.com? I will send you screenshots.
Meantime, i tried this on mac os x and ios 9 where i am not getting accurate styling.
You can email me via https://sridharkatakam.com/contact/
Try doing a hard refresh. Ctrl + F5 on PC or Cmd + Shift + R on Mac.
Also disable CloudFront and check.
It works now. Cloud was a problem. Stylesheet was not cached.
Thanks for your help and support.
I’ve followed a number of your tutorials and finally got isotope working, using the Toolset (Types and Views) plugins.
I have an example which uses a combination filter – three groups of buttons that work together to filter the results.
The isotope example here also helped me: http://isotope.metafizzy.co/filtering.html#combination-filters
My wish is to replicate this with select lists but I am having great difficulty in combining the filters from each select list.
This is probably child’s play for someone with your talent, and I’d be most grateful if you’d consider a tutorial on it, using Types/Views (you don’t seem to use that much these days?)
I’m interested in seeing this in action. I too use WP-Types and would love to see how you’ve done this!
I made some notes in a pastebin as I went through this, so hopefully this might help?
Let me know if not, as I have other working examples I could lift the code from. The crucial bit was the js code within the View. I spent hours figuring it out!
Satisfying when it finally works…
Thanks Alan – I’ll go through that ASAP!
At the moment I’m trying to work out what the best method is for showing a grid in an archive using Views and Genesis. What do you use?
Thank you again!!
What live sites can you send as examples?
Hey Sridhar, great tutorial again.
I am developing a site currently and implemented the script but have couple of questions and issues I have:
1. is there a way to control which categories showing?
2. how do you decide on the number of items showing?
1. You can specify (hard code) the categories you wish to filter by. Is this what you want to do?
2. Isotope does not have built-in pagination. There is no easy/straight forward method that I know of for this. See http://stackoverflow.com/a/26605726/778809.
Re-reading your question, I realize that you are asking about limiting the number of items and not necessarily showing pagination.
In the code added to functions.php, simply change -1 to whatever number you want to limit to in the following:
$query->set( 'posts_per_page', '-1' );
If you remove that line from the query arguments then the number of entries will be determined by what’s set in Settings > Reading.
One more thing,
How can i implement this script in a widgetized home page section? (I am using cafe pro and want to have this in section 4)
Here you go: https://sridharkatakam.com/filterable-portfolio-in-cafe-pro-using-isotope/
[…] the comments section of Filterable Portfolio in Genesis using Isotope tutorial a user […]
Thanks for this tutorial! For some reason it seems like the css is not quite right on the site I am working on. Do you have any suggestions? http://pixeluv.com/portfolio/
Thanks so much!!
How about integrating this with the new Maker Pro theme using the Genesis Portfolio plugin?
Also what about compatibility with v3x of Isotope?
Hi! This is a great tutorial, thank you! It works perfectly for me. I have one question though.
Is there a way to disable the link to the portfolio pages. I have a client that just wants to use it as a gallery to show her work but doesn’t want the images to be clickable. Is this possible? Thanks.
I’ve got the same Q…did you manage to get it working?
Another great tutorial. thanks! I am looking for a way to replace the featured image with an image loaded from a custom field. is that possible? I mean, it must be, i just can’t (yet) make it work! Any help appreciated.