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 Isotope script, jquery.isotope.min.js from http://isotope.metafizzy.co/v1/jquery.isotope.min.js 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.

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 616 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

  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!

    • says

      Possible.

      Using the code from my above article you can see that we specify the image hyperlink in http://pastebin.com/raw.php?i=UET3Vgvm. You can replace “the_permalink()” function call with genesis_get_image() that would display the full sized image. Then using one of the many Fancybox plugins available you can add a custom “lightbox” kind of class to the “a” element to show the full image in a lightbox popup.

      Refer to http://designsbynickthegeek.com/tutorials/genesis-explained-image-functions.

      • Robert says

        Thanks a lot for your help on this, incredibly helpful. I got a question. I have modified the code to use Magnific Popup (a lightbox…). I got it working for opening the individual featured images instead of pages, but I wonder if there would be a way to treat this Filterable Isotope Portfolio as a gallery? If it is possible, it would be so awesome, so that a user can just click on the first image and move around from there with the lightbox.

  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://www.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!

  25. says

    Sridhar,
    Awesome tutorial as always. Getting stuck on having the custom taxonomies show as filterable links on the portfolio page. Not sure if I installed Isotope correctly (I downloaded the packaged file as others have in the comments above.)

    http://riverso.marketplicity.com/portfolio/

    Your help is appreciated as always!

    Thanks,
    Chris

  26. says

    Hi. Thanks for the tutorial! Everything works great, except I don’t see the filter categories/headers above the images. I can’t figure out what I did wrong. Please help.

  27. Robert says

    Does anyone knows if there is a way to put a preloaded on all the images on this isotope portfolio? I have a gallery with many images, and when Isotope starts I want it to load in random order. The problem is that since it takes a while to load, the user will see images in one order and then suddenly isotope kicks in and moves everything around. If there was a way to fix this.

    I got magnific Popup working: http://bit.ly/1kUkcuC

  28. David Hedley says

    Hi Sridhar,

    Thanks for this fantastic tutorial. I’m trying to display the applicable categories and tags for each item within the loop (underneath the title) on the archive page but cannot get this working. I need to do this manually without a plugin such as Views. Wondered if you could help me to expand on your loop above?

    Thanks
    David

  29. says

    Hi Shridhar!

    Thanks for the awesome tutorial and welcome to Melbourne! I live in Sydney so we’re almost close. ;)

    Anyway, I am trying to have two of these filterable portfolio on different pages – so one for exercises and one for recipes. How do I go about doing that assuming I followed the steps above for my exercises page.

    Hope to hear a reply! Thanks again :)

  30. says

    Hi Shridhar, Thanks for this work – it’s awesome. I have one (i hope) small problem. There seems to be a clash with the header/page title in my child theme and I just can’t figure out how to fix. I thought it might be related to this from the template but have the same problem is I use the WP core “portfolio” – http://jaydesignsinc.com/portfolio/ – it works beautifully, it just looks bad!

    I’ve tried turning page titles on and off both globally, and locally on the page when using the template, and it doesn’t make a difference.

    Thanks for any advice – J

  31. 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?

    I’m utilizing Parallax Pro. Followed the steps a couple times now but to no avail.

    Appreciate your help.

  32. Brian says

    I’ve been using this great tutorial to build a filterable portfolio, and everything was working as promised.

    However, I did some updates yesterday, and now the filtering is no longer working. I updated the following: WordPress to 3.9.2, Genesis to 2.1.2, and Dynamik Web Builder (the child theme I’m using) to 1.6.2. All updates were from the immediately preceding versions.

    The site is not yet public so I can’t share a link to the page. But I’m wondering whether anyone else has experienced this problem?

  33. Toon says

    Thank you Sridhar for a wonderfull post.

    I tried to get this to work with the Executive Pro Theme, and after some trial and error (mostly nothing showing up on the portfolio archive page…), I found out that in the new ‘archive-portfolio.php’ file you just have to change the name ‘portfolio-category’ (lines 34 and 52) to ‘portfolio-type’ because the Executive Pro Theme uses ‘Types’ instead of ‘Categories’ for the Taxonomy.
    You could also change the functions.php where the Taxonomy declaration begins with line
    //* Create Portfolio Type custom taxonomy
    But I found the first option, changing ‘portfolio-category’ to ‘portfolio-type’ a lot easier and more foolproof.
    After that change, it worked beautifully.

    Maybe Sridhar, you can add this to your post for all users of the Executive Pro theme.

  34. says

    Thanks for the tutorial, it worked perfectly. I’m curious if there is a way to have the filterable portfolio I built following this tut, to display in the “home-middle” widget area of the Agency Pro theme. So instead of the 6 images that are shown under “our work” the filterable portfolio in it’s entirety would show there. Any ideas?

  35. says

    My site is not live so I can show an example but two things after following the tutorial exactly (using Executive Pro Theme)

    1. Everything can be seen in the Archive Portfolio Page and in a new Page created with Filtered Page template applied. Both pages display the same with the ‘filter buttons’ – except when you click the filter (eg. Advertising) – it doesn’t do anything – all the images stay the same – no animation, no change of category?? Any clues as to why this is happening?

    2. You state in your tutorial:

    “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.”

    But if you are using a theme such as Executive Pro (or Minimum Pro) that have the built in Portfolio – then you cannot select Posts from Settings>Reading otherwise you trigger the WordPress/Jetpack Portfolio version which creates a conflict. So in copying your other sample code as you suggest here, then its defaulting for all posts to appear. This seems a bit conflicting?

    This seems to limit the whole tutorial to using this filtering just one time on one page.

    Also the isotope idea doesn’t work at all – no animation happening?

    Any clues?

  36. JD says

    There are various bugs in page_filerable-portfolio and archive-portfolio.php:

    Notice: Use of undefined constant size – assumed ‘size’ in /themes/genesis/page_filterable-portfolio.php on line 67

    If you fix that it throws the following:

    Notice: Trying to get property of non-object in /themes/genesis/page_filterable-portfolio.php on line 65

Trackbacks

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

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>