Sridhar Katakam

Genesis and WordPress Tutorials

Filterable Portfolio in Genesis using Isotope

by 35 Comments

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

Live Demo

Screenshot of Portfolio CPT archive:

filterable-portfolio-genesis-isotope

When featured image is hovered, we shall display Portfolio item's title centered on a dark translucent overlay.

filterable-portfolio-genesis-isotope-hover

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:

filterable-portfolio-genesis-isotope-taxonomy-archive

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.

filterable-portfolio-genesis-isotope-select

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

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.

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

    Reply

  • 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

    Reply

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

    Reply

  • Sridhar,

    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.

    Reply

  • Hi Sridhar,

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

    Many thanks
    Alan

    Reply

    • Hi Alan

      I’m interested in seeing this in action. I too use WP-Types and would love to see how you’ve done this!

      Thanks

      David

      Reply

      • Hi David,

        I made some notes in a pastebin as I went through this, so hopefully this might help?

        http://pastebin.com/C2U615QY

        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…

        Alan

        Reply

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

          Reply

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

    Reply

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

      Reply

  • 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)

    thanks again!!

    Reply

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

    Reply

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

    Reply
    • >