12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Jun 25, 2018

Filterable Portfolio in Oxygen

Sridhar Katakam

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.

(tutorial has been updated since recording this screencast - so there may be some differences)
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:

This is a premium members-only content.

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

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right