Get Your License
First things first. If you haven’t done so already, pick up your Isotope license. If you are using Isotope for a non-commercial, personal, or open-source project then Isotope is free to use and falls under the terms of the MIT license. For commercial uses you have two options:
Developers License ($25): This is a per-developer fee for use in commercial projects.
Organization License ($90): This license covers a team of developers using Isotope for commercial projects.
Add jQuery Links
Add a link to Google’s latest jQuery library into your theme. Ideally, Javascript links should be placed inside your closing body tag.
Next, download the jQuery Isotope library and embed it into your theme; placing the link underneath your jQuery link.
Building the Portfolio Custom Post Type
Register the Custom Post Type
The following code should be placed in functions.php.
Add Categories for Filtering
Add a Custom Icon For the Dashboard
The Portfolio Page Structure
Create a Portfolio Page Template
Open your text editor and create a file named “template-portfolio.php”.
Your template structure will depend on what your current site layout looks like. My advice is to copy your page.php file, add in the required template comment at the top of the page (as seen below), and replace the page loop with the portfolio custom post loop we are going to write in the next section.
Your portfolio template should follow this general structure:
Adding Filters
Next we add in our category filters. The following loop displays our portfolio categories that we registered with our Portfolio Custom Post Type. Isotope uses the data-filter attribute to link to the corresponding class of each category.
The Portfolio Page Loop
We begin by using WP Query to pull our portfolio posts. I have set ‘posts_per_page’ to -1, which will pull all posts since Isotope does not support pagination. You can change this to your desired amount if you’d like to add in pagination but keep in mind Isotope will only filter the items on the current page.
Next we are summoning the chosen categories linked to each unique post using the post ID. We’ll use this to link each individual portfolio post with the corresponding filter.
Finally we output our post with the category assigned as a class to our containing div tag. It is up to you to choose what you’d like to display and in what order for each post. Here we are pulling the thumbnail, title and excerpt since that is what we instructed our Portfolio Custom Post Type to support.
The End Result
All said and done, your Portfolio Page Template should look something like this:
The Portfolio Single Page Structure
Create a Portfolio Single Template
In order to pull your single custom posts, open your text editor and create a file named single-(post-type).php. So in this case our single page would be named “single-portfolio.php”.
Your template structure will depend on what your current site layout looks like. My advice is to copy your single.php file and restyle it accordingly.
The jQuery
Below is the required jQuery to make our Filterable Portfolio We’ve calculated the column width here so our projects actively resize when we change the width of the browser. Be sure to alter the columnWidth to your desired amount of columns.
The CSS
The following CSS is used for Isotope transitions. It has been slightly altered from the default CSS required for Isotope Filtering under the Isotope Documentation in order to fix a bug that causes the portfolio items to assume a single column and slightly overlap when resizing the browser.
Add the following CSS into your theme’s stylesheet.
See a Working Demo
The post How to Build a Filterable Portfolio in WordPress Using jQuery Isotope appeared first on red vine web studio.