Filter Custom Post Type Archive Using Isotope

This code uses isotope with masonry to display custom post type items in a filterable grid using Genesis. No plugins required.

In this example we create a custom post type named portfolio and custom taxonomy terms which are automatically displayed in the filter menu on creation, as seen in the demo video.

Demo Video

Shows you how to create a new CPT term and add new item to the grid using isotope in the Genesis Sample child theme by StudioPress.

• Includes Genesis pagination.
• Creates terms dynamically and adds them to the filters menu.
• For use with other CPT’s, in the PHP code, search and replace all instances of portfolio with the name ( slug ) of your custom post type.

Will work in any other WordPress theme if you remove the genesis functions from the start of the archive-portfolio.php file.

Code Installation

There’s 3 simple steps :

1. Copy and paste the PHP code to the end of your child themes functions.php file. Then resave your permalinks.

2. Upload the archive-portfolio.php and iso-settings.js to your child theme folder.

3. Copy and paste the CSS to the end of your child themes style.css file and clear caching. Include the following CSS if you have many terms.

Download Code

You can then create your terms at Portfolio Items > Portfolio Types in your WordPress Dashboard.

In this case, the taxonomy terms are portfolio types, where portfolio is the custom post type :

2 Columns on Mobiles

Use this CSS to display your items in 2 columns on mobile screens :