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

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

Already a member? Log in below or here.