Filterable Portfolio in Genesis

I wrote an article in July on using Views plugin to incorporate filterable portfolio in any WordPress theme. In that I wrote:

While the Page template in Adapt can certainly be adapted to work in any WP theme..

That is what I did this weekend and chose Genesis as that’s the theme I have been thinking about day and night. In this article I provide the code needed to turn your simple Portfolio archive page of any Genesis theme into a awesome filterable portfolio with fluid animations without using a plugin.

I selected Minimum Pro for this article as it already comes with Portfolio CPT (Custom Post Type). If your Genesis child theme does not have that CPT built-in, you can just use a free plugin like Types to create it and use the method in this article.

As a bonus, I also provide a ready-made custom page template that can simply be applied to any static Page and have the filterable portfolio appear on that Page. This means in addition to having your fancy portfolio appear on http://site.com/portfolio/, you can also have it on say, http://site.com/showcase/

Screenshot:

Screen-Shot-2013-09-29-at-7.13.40-PM

Live Demo

Summary

  1. If the active Genesis child theme does not come with a Portfolio CPT, create it using a plugin like Types. Ensure that slug is portfolio. This step is not needed when using Minimum Pro
  2. Create a custom portfolio-category taxonomy
  3. Assign Portfolio items to the custom taxonomy
  4. Upload Isotope and the initialization .js files
  5. Add custom CSS
  6. Change the image size for portfolio handle
  7. Replace archive-portfolio.php and optionally add page_filterable-portfolio.php if you wish to use custom page template

Details

Create Portfolio CPT

Ensure that featured image support is set.

Screenshot if using Types:

Screen Shot 2013-07-31 at 6.41.00 PM

Enable featured image support by ticking Thumbnail under Display Sections.

Create Portfolio Category custom taxonomy

Set it a) so its slug is portfolio-category b) to be used with Portfolio taxonomy c) as Hierarchical, similar to post categories.

Screenshot of custom taxonomy creation screen using the Types plugin:

Add New Taxonomy ‹ My Minimum Pro Demo — WordPress

Assign your Portfolio items to the custom taxonomy

Add New Page ‹ My Minimum Pro Demo — WordPress

jQuery

Create a folder named js under the child theme. Download the latest Isotope script, jquery.isotope.min.js from http://isotope.metafizzy.co/ and upload it to js directory. Also upload another file isotope_init.js having this code in the same js directory.

CSS

Add the following at the end of child theme’s style.css:

To change the number of images (columns) that appear in each row, you will have to change the width of .portfolio-item.

Here’s the formula for calculating this width:

[main element width - (number of columns - 1)*20] / number of columns

where 20 is .portfolio-item‘s left margin.

main element width can be obtained using Firebug. It is the available width of the content area in the viewport. Note that in the PHP that follows we are going to make the content area full width.

Make sure that width of .filterable-portfolio is same as that of .portfolio-item but with a negative value.

If the above is not clear, you can safely ignore. The code provided already has the values to get the same look and functionality as in the demo site.

PHP

functions.php

Replace (if present, otherwise add)

add_image_size( 'portfolio', 540, 340, TRUE );

with

add_image_size( 'portfolio', 270, 220, TRUE ); /* width = [main element width - (number of columns - 1)*20]/number of columns  height = up to you */

and change the width and height values to your liking. Note that this step is not mandatory but just ensures that optimum sized images are shown vs letting the browser upsize/downsize thereby making it a little efficient.

Regenerate thumbnails.

archive-portfolio.php

Take a backup of archive-portfolio.php (if present) in your current active child theme and replace it with this:

By default the number of posts will be limited to what’s set at Settings > Reading (10 is the default). If you wish to change it, use this sample code instead of the above. In the sample code, unlimited i.e., all posts are set to appear.

page_filterable-portfolio.php

If you wish to have the filterable portfolio appear on a separate URL of your choice, use this page template. Upload page_filterable-portfolio.php to child theme, create a Page and apply Filterable Portfolio template to it.

Credit

All portfolio images in the demo site and a large portion of code is inspired by/taken from Adapt theme by AJ Clarke of WP Explorer.

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 305 other subscribers

Donate

Found this article helpful?

Comments

  1. says

    Thanks so much Sridhar for this useful post. Interesting to know you can do this using the Types Plugin. I personally love what StudioPress have done with their theme selector tool over at http://my.studiopress.com/themes/

    Do you know how we can achieve a functionality like that, using multiple Custom Taxomomies?

    Thanks again for your help…

      • Pam says

        I do not see jquery.isotope.min.js on the metafizzy site… all I see is isotope.pkgd.min.js. Is this what we want? I believe I found an older version of jquery.isotope.min.js on the web, but it is not working for me. If we do need this new file, in what places will we need to change the file path?

        • says

          I can’t seem to find the jquery.isotope.min.js either. I can only find the isotope.pkgd.min.js. Am I looking in the wrong place?

          Thanks so much for the post by the way!

          • Pam says

            Chris, I went ahead and included isotop.pkgd.min.js in /js and suddenly everything started working for me. I don’t know if there is a problem with having both files in that folder, but apparently, it was needed for my installation.

          • Pam says

            Hi, Chris, yes I did a search for jquery.isotope.min.js on the web and found what is probably an older version. I don’t remember where I found it, otherwise I would share the url with you. I tried that file first, and when it didn’t work I also put the newer file in the js folder. However, I do not see how the newer file could be effectively working because I have changed no paths in the code calling that file.

  2. John says

    I dont understand how I can create multiple portfolio categories by using the Minimum Pro theme. If I use a plugin yes but not when using Minimum Pro. Can you shed some light on that?

    Much appreciated!!

  3. says

    Hi Sridhar,

    Thank you very much for the post. I do have a question. I want to make a portfolio of news items that link to external sites. So when you click the thumbnail, it would link to an external site, (not the post). The post will not have much information.

  4. says

    Hi Sridhar,

    I’ve followed your excellent guide and I’ve nearly got it except that I can’t get the isotope features to work. This is a test site which I’m using to get it set up http://leehughes.staging.wpengine.com/portfolio/.. I have uploaded the files into the js folder of the theme but they still aren’t showing.

    Do you know what’s wrong? Thanks again for the guide. Subscribed!

  5. says

    Thanks for this tutorial. I’m coming to your site here every day and always find something I want to try.

    Could you write a tut on incorporating this or using masonry for a front page of posts/pages that are filterable by categories or tags?

  6. Bill says

    Very helpful post Sridhar. I am testing this on a genesis child theme that did not have a portfolio in the original theme. I followed everything you did, and here is what I got:

    two questions.

    1) how do I get the images to position below the filter buttons if I only have two buttons like in this example,

    2) Do you have a page template that resembles this type of layout by chance?

  7. says

    hi Sridhar,

    first of all great tutorial and it’s exactly what i need. i am adding this to the modern portfolio child theme but can’t get the portfolio images to display. the filter categories appear, but no images. i’ve followed it exactly but can’t figure out what i’ve done wrong…

    i am using the portfolio thumbnail images already in modern portfolio and going with a 3 column layout.

    i am developing locally so can’t post a link…any ideas?

  8. says

    Great tutorial. I have it working on the sample child theme.

    I do have a question, I have set the portfolio page to use the filterable portfolio template you provided. I would like the front page to be the portfolio page, but in Settings – Reading if I use “portfolio” as front page, no images show up. If I set the front page to any other page, the portfolio page shows up fine. What am I missing?

    Thanks for your help

    • says

      Hi Lynne,

      Follow this:

      1) Copy page_filterable-portfolio.php as front-page.php

      2) Edit front-page.php and delete

      < ?php genesis_do_post_title(); ?>

      Tested in Genesis Sample successfully.

  9. says

    Thanks but that didn’t work at all.

    I have 3 files page-portfolio.php, archive-portfolio.php and single-portfolio.php. If I delete archive-portfolio.php, the filterable portfolio does not show up at all only the single-portfolio. If I set the static front page Settings-Reading to Portfolio, which is the name of page-portfolio.php, all that shows is the title it does not pull in the images. If I set the static page to another page, the Portfolio link in the menu shows the portfolio page with images. The test is on http://emasai.com/emasai/
    Please take a look, I don’t understand what I’m missing here. if you need login details I can send privately.

  10. David says

    Hi Sridhar, thanks for writing this tutorial. I hope you don’t mind me asking a question?

    I followed the above on my site (Dynamik/Genesis), however I didn’t have any success.
    Would the steps be different for a site using Dynamik?

    Many thanks,
    David

  11. says

    I am wondering if anyone has been able to setup a light-box popup when clicking on the portfolio items. I remember I had this setup perfectly but then I added a new theme to my site and changed hosting servers and the feature was gone. If anyone knows of a plugin to easily implement light-boxes for the portfolio items I would appreciate it!

  12. says

    This seems to be working EXCEPT that it isn’t filterable (I can’t see the categories on the page I setup as Filterable Portfolio.

    Can you tell me what I am missing?

  13. jeooee says

    Great stuff! Thanks for the work.

    How would I make it so that the sidebar shows up when I visit one of the portfolio item pages, not on the main portfolio page itself?

    I can get it working on the main portfolio page by commenting out:
    “add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ );”
    in archive-portfolio.php

    But can’t seem to get it working with the individual portfolio page. Any ideas?

  14. says

    I’m using Executive Pro (genesis child theme) and it has “types” under my portfolio tab. Do I need the “types” plugin? I tried it without it but it didn’t work. I tried the filterable page template and nothing showed up on that page. I then tried to follow the instructions with the “Types” plugin but when I get to here http://sridharkatakam.com/wp-content/uploads/2013/09/Add-New-Taxonomy-%E2%80%B9-My-Minimum-Pro-Demo-%E2%80%94-WordPress.png There is no option for choosing “portfolio”. Any help would be appreciated.

    Thanks!

  15. Nimitz Batioco says

    Hello, how if I would like to change the post types from portfolio to tea towels, how can I can change the archive-portfolio.php?

    I have the following set-up

    Plural Tea Towels
    Singular Tea Towel
    slug tea-towel

  16. says

    this tutorial is great! it took me a few tries to get it right, but it’s working beautifully.

    the only thing i have yet to figure out is how to add some space between the rows and columns. i’ve changed the width as recommended, but that is making everything smaller, not spacing things out.

    any advice is appreciated.

  17. says

    Thank you so much Sridhar for this tut. I’ve set everything up on the minimum pro theme just as you instructed, and it worked beautifully.

    Now I can display all my custom woodworking photos just as I’d dreamed!

    Very well written tutorial! Thanks for all your hard work.

    Regards,
    Matt Vaden

  18. says

    Let’s say I want to use this feature to showcase “recipes” not my “portfolio”.
    Do I need to change all references of “portolfio” in the code to “recipes”?

  19. says

    Hi Sridhar,

    Thanks a lot for al your helpful posts! Everything I wanted to know about genesis is on your blog!
    However, I’m trying to show certain parts from my portfolio on specific pages.

    So Category 1 on Page 2 and Category 3 on Page 4.

    I tried to do it with the template you provided but I couldn’t get it to work. Could you please help me?

    • says

      You might find it easier to use Views (commercial plugin) to create multiple Views. One for pulling entries from a specific taxonomy of your CPT and another from another taxonomy etc. Then you can just place the views’ shortcodes wherever you need them (in the static Pages).

      • says

        Whoaw thanks for the quick reply, didn’t expect that!

        The views plugin is pretty expensive for me, is there another, more free way to do this?

        Thanks,

        Rick

      • says

        Or can I make 3 filterable portfolio page templates? Where every template only filters one category. Any thoughts on how to do that Sridhar? Thanks for all your help.

  20. says

    This is awesome, if only I could get it to work. I am on localhost so cannot show an example.

    I am using News Pro Theme.

    My method thus far:
    1. I followed your Portfolio Post Type in Genesis article to create my ‘portfolio’ CPT.

    2. I then followed Portfolio Post Type; Devin’s suggestions to rename the CPT slug. I called it ‘project’.
    I also renamed the ‘portfolio_category’ and ‘portfolio_tag’ from the above tutorial in the ‘single-portfolio.php’ file to match ‘project_category’ and ‘project_tag’.
    All worked perfectly thus far, exactly as in the tutorial, just with my edited CPT name.

    3. I then spotted this tutorial and followed it as closely as possible with no joy.
    I receive an ERROR: ‘Fatal error: Cannot use object of type WP_Error as array in archive-portfolio.php on line 34′. I tried renaming ‘portfolio’ to ‘project’ in different and all posibilities. I just could not get it to work.

    I presume it has something to do with replacing the ‘archive-portfolio.php’ file created from the previous tutorial on adding the Portfolio CPT.

    This filterable feature would be perfect for my site. Could you please point me in the right direction.

  21. says

    Thank you Sridhar for an excellent tutorial! I will be putting this to good use. I don’t like using plugins, so this is certainly my preferred option.

  22. Travis says

    Great article, clear and concise. Is there a way to change the slug to not use ‘portfolio’. I used the custom template you provided and that works great to change the URL but the breadcrumbs still show ‘portfolio’. I would like to change that. Any ideas?

    Thanks!

  23. Damien W says

    Hi,

    Thanks for this post.

    I have a problem with the isotope file.
    I saw some messages but no answer. I only find the isotope.pkgd.min.js on your link, so I’ve change the :
    wp_enqueue_script(‘isotope’, get_stylesheet_directory_uri() . ‘/js/jquery.isotope.min.js’, array(‘jquery’), ’1.5.25′, true);
    in
    wp_enqueue_script(‘isotope’, get_stylesheet_directory_uri() . ‘/js/isotope.pkgd.min.js’, array(‘jquery’), ’1.5.25′, true);

    But it doesn’t work. What is the solution?

    Thanks!

  24. Dani says

    Thank you Sridhar for this awesome tutorial. I really enjoyed rebuild the portfolio.
    I also have an issue with the isotrope. The console displays an error in your isotope_init.js file. Saying the wpexPortfolioIsotrope is not a function. If I delete the wpexPortfolioIsotope(); on line 13 in your file. The filter works somehow. But I’m sure this isn’t the correct way to fix it :-).

    Thank you!

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>