Creating a Responsive, Filterable Portfolio in WordPress That’s Actually Good.

Something I’ve always been frustrated with in the WordPress world is the lack of a simple, filterable portfolio plugin. There are hundreds of gallery and portfolio plugins, but they’re all either outdated, heavily locked down with little freedom to change the design, or they’re based on the freemium model and invade your WordPress Dashboard with ads to buy the premium version.

Until I found Jetpack’s fantastic Portfolio custom post type option. Don’t get me wrong, you can very easily create your own custom post type and use this tutorial in the exact same way, but since I already have Jetpack installed, it’s counter productive to do otherwise.

View Demo

1. Getting Started

Here’s our setup checklist:

  1. Setup Post Type – Install Jetpack, (For advanced users, you can create your own custom post type)
  2. Filtering – Download Isotope, or use a CDN if you prefer.

 

Activating the Portfolio on Jetpack

If you’re creating your own custom post type, keep a note of the Post Type Key that you create and skip to the next section. For this tutorial we’ll be using the jetpack-portfolio custom post type key that comes as standard with Jetpack.

Go to Jetpack > Settings and click on the Writing tab on the right. Scroll right down to the bottom and activate the Custom Content Types module. Then tick the checkbox ‘Enable Portfolio Projects for this site’

Add theme support

We need to make sure that your theme supports this custom post type. Simply copy this into your Theme’s functions.php

Now we’re all set up you’ll notice the Portfolio Tab on the WordPress Dashboard.

 

2. Setting up Isotope

Isotope is the part that’s responsible for filtering your items.

Download Isotope from their website, or use a CDN like this.

Note: If you’re using Isotope for a Commercial project, please consider purchasing a commerical license.

Move the downloaded file to your /js/ folder in your theme.

If you don’t have a JS folder, you can create one.

Create a new JS file in the same folder and call it portfolio.js

Copy and paste this into the file:

Here, we are telling Isotope that when a link is clicked in our  .portfolio-filter  container, filter the results in our .portfolio container.

Enqueue your scripts in functions.php

Back into your functions.php file again, this time we’re going to add the scripts to enqueue both Isotope and portfolio.js.

You may need to change the paths to your files depending on how you’ve setup your theme file structure. You’ll see I’ve decided to use a CDN for Isotope, but you can host it on your own server if you prefer. 🙂

 

3. Creating your Page Template

Here comes the fun part, we’re going to be creating a page template that will contain your portfolio. This comes in two parts.

Copy your page.php template and name it page-portfolio.php

Everybody will have a slightly different setup, and so the easiest way to make sure you keep all your theme styling intact is to copy your page.php template and edit the new file.

Tell WordPress to register your new page template

You will need to add this to the top of your newly created page-portfolio.php

 

Query WordPress to show your Portfolio Items

We need to ask WordPress to show us only our portfolio items.

Here, we’re using WP_Query to query our jetpack-portfolio custom post type. For those who’ve decided to create their own Custom Post Type, you will need to query your own Post Type Key that you’ve created.

Add the structure for your portfolio items

Create a blank file in the base of your theme directory and call it content-portfolio.php. This is going to be where we create the structure for your portfolio items. Add this code into content-portfolio.php

You can edit the HTML in this to suit your needs. You’ll see on my Projects page I have added a few nice effects and a logo for each project using Advanced Custom Fields.

We have now created all the elements we need to be able to display our portfolio items on our newly created page template. You’ll now need to create your Portfolio page from the WordPress Dashboard if you haven’t already, and then remember to set the page template to Portfolio!

4. Adding CSS

The final step here is to add some CSS to make it pretty and responsive. I’ve already added a bit to get you going.

Note: If you have any issues with the CSS, let me know in the comments and I will be able to help.

Hopefully you found this tutorial helpful, please leave a comment and let me know how you got on!

View Demo

Did you like this post?

Leave a comment, or follow me on Instagram & Twitter

🙃

Have something to say? Leave a reply :)