Displaying a filterable portfolio on your website is a really professional way of showing off your content, design, photography, etc Many people think creating a portfolio involves a lot of hard work that should be left to the professionals, but did you know it’s actually relatively simple to create your own? In this tutorial I will show you how to create your own filterable portfolio built into your WordPress theme.
Note: In order to create a filterable portfolio, you must be using a child theme of the Genesis Framework. This coding will not work otherwise.
Step 1: Creating the Portfolio Page
Log-in to your file manager via Cpanel or FTP and locate your theme directory > yourwebsite.com/wp-content/themes/yourthemename/
Create a new file called archive-portfolio.php
Copy and paste the following into the archive-portfolio.php page and click save.
Step 2: Creating the Isotope File
Log-in to your file manager via Cpanel or FTP and locate your js directory folder > yourwebsite.com/wp-content/themes/yourthemename/js
Create a new file called isotope_init.js
Copy and paste the following into the isotope_init.js page and click save.
Step 3: Editing the Functions.php File
In your WordPress dashboard, navigate to Appearance > Editor > Theme Functions (functions.php)
Copy and paste the following into the functions.php file and click save.
Note: It is very important that you add this code AFTER the opening <?php sequence. Otherwise you will break your website!
Step 4: Editing the Style.css File
In your WordPress Dashboard, navigate to Appearance > Editor > Stylesheet (style.css)
Copy and paste the following to the very bottom of the style.css file and click save.
And voila! You now have your very own filterable portfolio. Feel free to leave me a comment with a link showing off your gorgeous galleries!