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.

(tutorial has been updated since recording this screencast - so there may be some differences)

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


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


This is a premium members-only content.

To view the rest of the content, please sign up for membership ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: