Filterable Portfolio in Oxygen

Updated on August 24, 2019

This tutorial provides the steps to set up entries of a portfolio custom post type that can be filtered by the terms of associated portfolio_category custom taxonomy using Isotope in Oxygen.

Live Demo

We shall

• create a Template that applies the portfolio CPT archive page
• edit the template and add an Easy Posts element
• use pre_get_posts filter hook to show all the entries on the CPT archive
• load and initialize Isotope in a custom plugin
• add a custom callback function to output space-separated terms of the specified taxonomy for the current entry
• echo the space-separated terms for div.oxy-post by editing the template's PHP for Easy Posts
• add a custom callback function that displays buttons with specified taxonomy terms as values of custom data-filter attribute
• add a Code Block element, move it above the Easy Posts element and call the above function to display the filtering buttons row
• define and use a custom image size for the images in the output of Easy Posts

This technique can also be applied to posts of any post type and any taxonomy.

Step 1

Install and activate Portfolio Post Type plugin.

Add your portfolio entries and set featured images. Images should ideally be 800 x 800.

Create portfolio categories as needed and assign the entries to their corresponding portfolio categories.

Step 2

Install and activate Code Snippets plugin.

a) Go to Snippets > Add New.

Title: Custom Image Sizes

Code:

add_image_size( 'portfolio_thumb', 800, 800, true );

If there are any portfolio posts that already have featured images of dimensions other than 800 x 800, regenerate thumbnails.

b) Add another Snippet.

Title: Set number of entries on portfolio CPT archive

Code: