Tag: Isotope

Categories
Genesis Tutorials

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 :

Categories
Free Tutorials Genesis Tutorials

Register Portfolio Custom Post Type With Taxonomy Support

Added to your child themes functions file, this code creates a custom post type named portfolio.

The code also includes support for creating custom taxonomy types for your portfolio CPT.

This code is useful when you need to modify the default labels and parameters for your CPT and Taxonomies, otherwise, you can install the Genesis Portfolio Pro plugin by StudioPress which does exactly the same thing but doesn’t enable you to modify the parameters.

Code Overview

Let me give you a brief overview of how the functions in this code work :

1. Custom Taxonomy Registration :

  • register_taxonomy('portfolio-type', 'portfolio', ...) registers a taxonomy called “portfolio-type” for the custom post type “portfolio.”
  • It includes various labels for the taxonomy, defines its behavior (hierarchical, having an archive), and sets the URL structure.
  • The taxonomy is set to be shown in the admin UI but excluded from search and tag cloud.

2. Custom Post Type Registration :

  • register_post_type('portfolio', ...) registers a custom post type named “portfolio.”
  • Similar to the taxonomy registration, it includes labels for the post type, defines its behavior (hierarchical, having an archive), sets the URL structure, and specifies supported features.
  • The post type is set to be public, with a specified menu icon.

3. Adding Filter for Portfolio Columns :

  • add_filter('manage_taxonomies_for_portfolio_columns', 'genesis_portfolio_columns') adds a filter to manage the taxonomies for the columns of the “portfolio” post type.
  • The associated function genesis_portfolio_columns adds the “portfolio-type” taxonomy to the columns.

The code essentially creates a portfolio system where items can be categorized under different types using a custom taxonomy, and these items are managed as a custom post type with specific features and behaviors.

Related Tutorials

Categories
WordPress Themes

Basic Isotope Image Filter for Clickable Links

This tutorial shows you the most basic way to use isotope with simple clickable links rather than checkboxes.

isotope-portfolio

Here’s the short video showing you exactly what the code in this post produces:

All the code is already included in the Genesis Sample child theme so you only need to install it and add the HTML to your WordPress editor.

You’ll also need to change the image links in the HTML but thats all the coding you’ll need to do.

The theme also includes a custom page template named page_demo which you can select from the drop down menu under the page attributes box on any Edit Page screen.

Register for full access

Related Tutorials

Categories
WordPress Themes

Shuffle & Filter Portfolio Items Using Isotope Checkboxes

This tutorial produces exactly what you see in the following video.

Includes all the jQuery, PHP, CSS and HTML which filters a portfolio style columns of images using the isotope effect.

There’s 4 simple steps involved:

  1. Upload the jquery.isotope.min.js & isotope-set.js files to your child themes js folder.
  2. Enqueue the js in your child themes functions file
  3. Add some basic CSS which you can tweak and add to in your child themes style sheet.
  4. Add the sample HTML to a new page in WordPress and swap out the image URL’s with your own.

Very easy to install all the code in a new full width page, directly in a template file or text widget.

Step 1

Register for full access

Related Solutions