Sridhar Katakam

Genesis and WordPress Tutorials

Filterable Portfolio in Centric Pro

by 62 Comments

The other day I published a tutorial on setting up Portfolio Grid in Centric Pro. In this article I will take it up a step further and share the details on how we can make it filterable. What do I mean by filterable? We are going to display the Portfolio categories at the top of grid. Clicking on any Portfolio category name will only show Portfolio items that belong to that category while hiding the others in a nice smooth animation.

Check it out in action by watching this video in full screen:

While this tutorial is written for Centric Pro, the overall code works with any Genesis child theme.

To help you from keeping two tabs open and switching back and forth, I am going to list all the steps in this tutorial rather than saying "do that first from the other article, then come back here and do the rest". In other words, follow Portfolio Grid in Centric Pro when you want a 'static' Portfolio and this one when you want to make it filterable. If you have already followed the earlier article and want to make it filterable now, just delete the php files and css code added per that article and use the ones in this one.

Install Portfolio plugin and add CPT entries

Install and activate Portfolio Post Type plugin.

Go to Portfolio > Add New Item and add your Portfolio items. Make sure to set a Featured image for each.

edit-portfolio-item-centric-pro

Add Archive Settings option, define image sizes and set Portfolio Category term pages to use archive template

Add the following in functions.php:

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

Already a member? Log in below or here.

  • I’d played a bit with a previous tutorial you wrote on using Isotope but had to abandon it because of how I’d set things up on my end. When I changed my setup, I considered revisiting but decided not to because it had taken some real wrestling on my part. When this post came up in Twitter, I thought I’d try it again and whatever is different has made it much simpler. Great tutorial and I’m totally using it. Thank you!

    Reply

  • Thank you for the tutorial. I am trying to use this tutorial with the parallax pro theme. I can’t seem to get it working right. Any specific changes for a different theme? The isotope_init.js goes into the js file?
    Thanks so much!

    Reply

  • This is working perfectly for me, but now I have a followup question. My layout has a second div element in it, floated right–similar to inserting an image at the beginning of a paragraph. In a paragraph, of course, the text wraps right around the image and keeps on going. The isotope items don’t, though–they’re rolling right over my floating div.

    So far I cannot get the two to coexist the way I’m wanting them to and I’m thinking it’s because that’s just how Isotope works. Is this true, or do you know if it’s possible to make this happen? If you know how to make it so, I’d love to hear your thoughts. Thanks!

    Reply

      • It does look like just the thing! Unfortunately, it isn’t working for me. There is a flash when the images initially load where they are wrapping around the corner element, but something seems to maybe be happening after the initial load which is sending them across the full width and over it again. I wonder if I were to email you a link, would you be willing to look at what I’m doing? I shoehorned your tutorial to work with my existing setup so I might be missing something key. If I can’t get the corner element to work, it’s not the end of the world, because I can live without it, but it would be nice.

        Reply

  • Can this tutorial be applied to the Enterprise Pro theme? If so, are there any special notes I would need to make it work properly?

    Reply

  • Love this tutorial. Thank you, Sridhar.
    I’m trying to figure out how to only show the image in the portfolio view without the image title and portfolio category name.

    Reply

    • Figure out how to remove the post meta information (category info) by restoring “remove_action( ‘genesis_entry_footer’, ‘genesis_post_meta’ );” on archive_portfolio which was previously commented out. This still leaves the image title.

      Reply

  • This is awesome, very useful, thank you so much! Still I have one questions: is this working with pagination?

    Reply

  • Great tut, thanks, your advice really does rock. I’m trying to use it with the Parallel Pro theme, but running into the small problem that I only have one single column showing no matter how many portfolio items I put in.

    Any clues as to what I’m doing wrong?

    Reply

    • Sorry!

      1st. Comment line 10 in single-portfolio.php:

      add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ );

      2nd. Add one line to your functions.php:

      add_post_type_support( ‘portfolio’, ‘genesis-simple-sidebars’ );

      Reply

  • Is there a way to tweak the archive-portfolio file to show all items, without pagination? It appears now that, when you filter, the number of items is still paginated based on all items. That means, I can filter to a category that has two or three items, but the page only shows one, then pagination…

    Thanks

    Reply

  • Incredible tutorial, thankyou.

    I’m using it with Parallax Pro and cant seem to get the portfolio page working like a couple of others. Any tips you can offer me? Thanks again.

    Reply

  • This is a great tutorial! Thank you so much! So one question. I’m trying to figure out how to change the image that is pulled in the meta for the archives page so if the archive page is shared on a social network, say LinkedIn, I can control the thumbnail image that the network uses to go with the url. Any advice?

    Reply

  • Thanks Sridhar for the great tutorial. I was surprised that Studiopress does not have any posts re this or a plugin for it. I got mine working on Parallax Pro like Stephanie.

    Reply

    • Hey Sridhar,
      Could you kindly offer any advice to make this suit Parallax Pro? My exceprts do not show and I cannot get more than 2 portfolio items to show side by side.

      Reply

  • Thanks for th great information in this tutorial. I was wondering if it is possible to enter the portfolio and have a specific catergory active? So I enter via e,g, a menu item called “cat 1” and it opens the portfolio page and “cat 1” is active.

    Thanks in advance

    Reply

  • Thanks for the great tutorial! Your step by step instructions are very easy to follow. Everything is working with my first set up of this,except for the categories or is it tabs are not correctly displaying underneath each portfolio item.

    Also, I don’t have the excerpts showing up, but that is something I can live without for now, the Filed under: not showing up is more important.

    I’m using the Centric Pro theme, the site is still under construction, but is about to go live – I can send login info, if you have a few minutes or would love any pointers. Thanks!

    Reply

  • Many thanks for your advice you have helped me a lot in getting my head around customising Genesis themes. I am contemplating migrating my website to the Centric theme now but hate the way the blog page looks. I would like to use the effect that you have detailed in this tutorial but on the main blog loop rather than the portfolio plugin. Do you know if this would be possible and do you have any advice on achieving this.

    I would really appreciate any advice you can give and think that this would turn this theme in to something much better.

    Reply

  • I’d love to get this layout to work using column classes rather than hard-coding the widths and negative margins into the CSS. I’ve been playing with the code in this example:

    http://www.billerickson.net/genesis-portfolio/

    to try to add column_classes to the entries, but I’m not having any luck yet. I’d love to get a one-third class added to each item. Then, I may also need to adjust the jquery to change the “first” class dynamically depending on how many items appear in a row.

    Has anybody else tried something like this?

    Thanks

    Reply

    • I’ve managed to get the column class references integrated into your code! But now I’m trying to figure out how to re-apply the “first” class when the results are filtered or when resizing the browser changes the number of items per row.

      Here’s the snippet I added to archive-portfolio.php, right after $classes[] = $term->slug;


      global $wp_query;
      if( !$wp_query->is_main_query() )
      return $classes;
      $columns = 3;
      $column_classes = array( '', '', 'one-half', 'one-third', 'one-fourth', 'one-fifth', 'one-sixth' );
      $classes[] = $column_classes[$columns];
      if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % $columns )
      $classes[] = 'first';

      Reply

  • Brilliant tutorial, just one issue I can’t get the excerpts to display below the portfolio titles on archive pages.

    Reply

  • I have followed your other tutorials and usually get the same result you described. However, with this tutorial I am having some issues getting the excerpts to show. I have copied the tutorial step-by-step but I still cannot get it to display correctly as shown in Addendum 1 (added on March 08, 2014). Please can you tell me where I am going wrong? Does the code need to be entered between a specific set of existing code, or does it need to be pasted in another file and not archive-portfolio.php?

    Reply

  • Sridhar,

    You are amazing. Your tutorials are some of the best I’ve seen in my career. Thank you very much. I just implemented this one on a new site I’m working on (URL forthcoming upon launch).

    Two questions:

    1. In the single item view, how can I have the “After Entry” widget show in the portfolio CPT entries? In Centric theme, these show by default everywhere else. Would be nice to have for calls-to-action.

    2. I’m using the “Related Posts” feature of Jetpack. How can I get it to work with these CPTs?

    Thanks,

    NandoJourneyman

    Reply

  • Thank you for detailed tutorial to create awesome portfolio!

    Could you please suggest a simple way to change URL “\portfolio” to another URL, for instance, “\experience”in order to implement the filterable portfolio to the existing indexed pages with some rank? I certainly could use 301, but it seems to me there should be a simpler way to manage this.

    Thank you again,

    Vitaly

    Reply

  • Hi Sridhar- I really appreciate your tutorials. Having an issue with this one that I know others have fixed, but did not post the solution to their comments!

    I’ve implemented this tutorial in Parallax Pro and cannot get the portfolio display in three columns… it’s mostly showing in one column, sometimes two upon resizing the window. I know it is a a padding issue with the .full-width-content class but what selector do I use to only adjust for the portfolio? Have tried everything I can think of.

    Thanks!

    Reply

  • Hello Sir,

    I have applied this tutorial and got done with all.

    Please Check The Live Here http://www.bloggersideas.com/deals/

    Now the problem I am facing in this is I got Pagination at the bottom of the Deals Page.

    I have total 9 Post on Hosting Deals. But when I click on Hosting Tag Button It shows only 7 Post. Because rest 2 Posts are on second page.

    So Is there any solution to load all post dynamiclly when user click or Getting all post loaded on same Deals Page ?

    I hope you got my point.

    Please Provide me some solution regarding this.

    Thank You!

    Surendra Soni

    Reply

    • Hello Sir,

      Is there any Possible solution Available For this ?

      Please reply.

      Regards,
      Surendra Soni

      Reply

  • I am using the Altitude Pro theme and I got most everything to work and was able to make some modifications. What I did not get to work is having the “ENTRY META” show up on the archive-portfolio or the single-portfolio? Any ideas? http://www.smbpress.com/portfolio

    Reply

  • Thanks a lot for the tutorial, I am trying to implement it to the digital pro theme, and its working fine but i had a strange duplicate image on items, the featured image is showing inside the div twice,
    link http://techana.com/portfolio/

    Maybe i messed somewhere or it theme incompatible ,
    any help

    thanks a lot

    Reply
    • >