Sridhar Katakam

Genesis and WordPress Tutorials

Filterable Portfolio Archive in Minimum Pro

by 15 Comments

In this tutorial I show how the default 2-column Title + Featured image Portfolio CPT archive grid in Minimum Pro can be replaced with a dynamic 3-column grid with Title and Excerpt appearing on top of featured images on hover. Additionally there will be a row of Portfolio Type custom taxonomy's terms above the images to filter and show Portfolio entries that only belong to a particular Type.

Screenshot:

filterable-portfolio-minimum-pro

Screencast:

What's covered:

  • Registering a custom Portfolio Type custom taxonomy
  • Adding support for the Portfolio Type taxonomy to Portfolio CPT.
  • Adding support for Archives Settings for Portfolio CPT so that Archive Headline and Archive Intro Text can be entered.
  • Adding Portfolio Type Taxonomy to columns when viewing the list of Portfolio CPT entries in the WP admin.
  • Using pre_get_posts hook to display all Portfolio items on the archive pages.
  • Using archive-portfolio.php for Portfolio Type taxonomy archives using Template Redirect via
    template_include filter.
  • Using Isotope to set up filtering.
  • Showing Portfolio Type hyperlinked terms on Portfolio single entry pages.

Let's begin.

Step 1

In functions.php

a) replace

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Thank you Sri! This is just what I was looking for. Is it possible to apply this to a different CPT, like for Event Expresso, for example?

    Reply

      • So I can just change the slug of the cpt from portfolio to espresso_events, right? The cpt already exists, so the changes will have to be made only to the archive file and the css?

        Reply

  • Hi Sridhar,

    I tried using one of your filterable tutorials before, but I couldn’t get it to work. As a result I started using Go Portfolio, which worked fine until a WP update completely destroyed it. I’m going to attempt using this tutorial, but before I proceed I do have a question.

    Will using a coded solution, like you’ve posted here, be more resistant to WP updates that tend to break plugins?

    Reply

  • Thanks for this! If I wanted to keep the two column layout, but otherwise keep all the functionality provided here, what would I need to do?

    Reply

  • Hi. Great tutorial. One thing: as soon as I add more than 6 portfolio items, everything starts to break! The portfolio archive page only displays 6 items, but there are pagination buttons hidden underneath the images. Any idea how to fix this?

    Thanks

    Reply

  • Figured it out! You need to remove the code from the original functions.php file, from line 170 – 178 (before you paste the new code from step 1 above):


    //* Change the number of portfolio items to be displayed (props Bill Erickson)
    add_action( 'pre_get_posts', 'minimum_portfolio_items' );
    function minimum_portfolio_items( $query ) {

    if ( $query->is_main_query() && !is_admin() && is_post_type_archive( 'portfolio' ) ) {
    $query->set( 'posts_per_page', '6' );
    }

    }

    And that fixes it!

    Reply

    • Hi, I have the same problem. I did as you suggest but the problem is still there, if I remove this function it shows only 4 posts. In both cases, in some categories (Logos, Illustrations) it shows nothing or lesser items than it should and the pagination remains hidden under the portfolio items.

      I appreciate any help.

      Reply

  • Hi Sridhar!
    The new code works perfect, I just need to limit the portfolio items per page so it doesn’t show all of them on one page, is that possible?

    Thanks!

    Reply

    • There is no built-in/easy/straight forward way as far as I know to have pagination when using Isotope for filterable items. Thinking about it, this makes sense because the filtering happens based on class names present on all the items on the page at that moment.

      Reply
    • >