How to set up a Filterable Portfolio in WordPress

I was going through my Twitter feed and came across a free theme called Adapt. It has a custom Page template for showing entries from Portfolio CPT in a grid layout with filtering option. I really liked how it works and decided to implement the same in a test site. While the Page template in Adapt can certainly be adapted to work in any WP theme, I thought it would be a fun and learning experience to do this using Views.

In this article I detail the process of setting up a filterable portfolio that works in any WordPress theme. We will use Types for creating and CPT & Views for displaying the filter links row and below that, the clickable portfolio images that link to single entries.

Video Demo:

Step 1

Go to Types > Custom Types and Taxonomies and create a new CPT.

Enable featured image support by ticking Thumbnail under Display Sections.

Uncheck has_archive as we do not want WordPress to take control of the CPT archive page.

Step 2

Go to Types > Custom Types and Taxonomies again and create a new Taxonomy.

Make sure to select Portfolio Item as the Post Type that will use this custom taxonomy. In the Advanced section select Hierarchical so this taxonomy will behave like post categories, with parent / children relationship and checkboxes.

Step 3

Go ahead and add your Portfolio items and categorize them under the custom Portfolio Category taxonomy. Make sure to set a Featured Image for each.

Step 4

Create a new View called say, Portfolio Category List. Set it up like this:

Customize the generated HTML like so:

Step 5

Create another View called say, Portfolio Entries and configure it like this:

Customize the generated HTML like so:

where portfolio-image is the custom post thumbnail size that you can define in child theme’s functions.php like so:

add_image_size('portfolio-image', 217, 170, true);

Step 6

Create a folder named js under the child theme. Download the latest Isotope script, jquery.isotope.min.js from http://isotope.metafizzy.co/ and upload it to js directory. Also upload another file isotope_init.js having this code in the same js directory.

Step 7

Add the following in child theme’s functions.php:

function filterable_portfolio() {
	if (is_page('25')):
		wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/jquery.isotope.min.js', array('jquery'), '1.5.25',true);
		wp_enqueue_script('isotope_init', get_stylesheet_directory_uri() . '/js/isotope_init.js', array('isotope'), '', true);
	endif;
}
add_action('wp_enqueue_scripts', 'filterable_portfolio');

Change these to suit your needs: a) if conditional b) Portfolio CPT featured image custom size.

Step 8

Add this code at the end of child theme’s style.css (WP dashboard -> Appearance -> Editor).

You may want to adjust the width for .portfolio-item so it’s the same as width set in add_image_size function call earlier.

Step 9

Now wherever you want your filterable portfolio to appear, edit that Page/Post/widget and paste the shortcodes for both the Views created above like this:

That’s it!

This can easily be re-used for displaying entries from any kind of CPT like Staff members, Testimonials, Coupons in a nice filterable grid fashion.

Credit: A large portion of code is inspired by/taken from Adapt theme by AJ Clarke of WP Explorer.