Filterable Portfolio in Oxygen

June 25, 2018    Sridhar Katakam    10 Comments
Favorited by: 
4

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

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 ($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?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

10 comments on “Filterable Portfolio in Oxygen”

  2. Hi Sridhar, nice toturial but I have a problem – when I inspect portfolio site, there are 2 error:

    “Uncaught SyntaxError: Unexpected token <”

    in isotope.pkgd.min.js?ver=3.0.6

    “Uncaught TypeError: $(…).isotope is not a function
    at isotope-init.js?ver=1.0.0:4
    at isotope-init.js?ver=1.0.0:36”

    in isotope-init.js?ver=1.0.0

    Do you know what is that? I tested on Oxygen 2.2 beta
    Thx

    Reply

  4. Hey, Tried to implement your tut using CPT and ACF, but I get the error:

    Warning: count(): Parameter must be an array or an object that implements Countable in /home/produktf/domains/rankwell.uk/public_html/wp-content/plugins/my-custom-functionality-master/plugin.php on line 110

    url: http://www.rankwell.uk/portoflio-filtered/

    Would you mind sparing some time to try to get it working with CPT/ACF plugins?

    Reply

    1. As far as I know, this can not be done with Repeater because it is not possible to add the needed <?php echo wpdd_get_terms( "portfolio_category" ); ?> to each div’s class.

      Reply

  • Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new tutorials by email.

    Join 210 other subscribers

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