Filterable Portfolio in Startup Pro

This tutorial provides the steps to create a Filterable Portfolio in Startup Pro.

Preview:

While the tutorial is tested with Startup Pro, It will work with any child theme based on the Genesis Framework.

Prerequisite:

1. Create a Page Called "Portfolio" and add featured image to use it as Hero image. It will work like same as we have Custom Homepage and Blog in Settings > Reading.
2. Make sure we have Portfolio CPT is available. Install and Activate the Genesis Portfolio Pro Plugin or use any other plugin like Pods to create a custom post type called "portfolio".
3. Create some Portfolio Items, we are using 4 columns layout so a minimum of 8 items is recommended. Image size should be the same for all.
4. Create folders following path /assets/scripts/ under your child-theme (if not present).

STEP 1

Create a file isotope.pkgd.min.js under /assets/scripts/ folder and add the following code:

Find the code https://raw.githubusercontent.com/metafizzy/isotope/master/dist/isotope.pkgd.min.js

You can also download this file from here https://github.com/metafizzy/isotope/tree/master/dist

STEP 2

Create a file isotope-init.min.js under /assets/scripts/ folder and add the following code: