Filterable Portfolio in Oxygen

Updated on October 05, 2020

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.

Note: This tutorial only works with Easy Posts component, not a Repeater.
This tutorial can also be implemented for Easy Posts on a static Page or a static homepage. For the Easy Posts, select "custom" as the WP Query type, select your post type and for Count, tick "All" under "How Many Posts?".
In Step 4 you would need to change

if ( is_post_type_archive( 'portfolio' ) ) {

to something like

if ( is_page( 'sample-page' ) ) {

where sample-page is the static Page's slug or

if ( is_front_page() ) {

if you want to set it up on the static homepage.

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: