bS5 Isotope

This plugin filters posts, isotope cpt, products or any custom post type by a parent-id of category / taxonomy with metafizzy isotope plugin. The filter grid can be displayed as equal-height, masonry, equal-height-overlay, masonry-overlay or products. It is well suited for example to create a portfolio, projects or simply to filter posts. Live preview

Installation

1. Download Plugin
2. In your admin panel, go to Plugins > and click the Add New button.
3. Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
4. Click Activate to use your new Plugin right away.
5. Go in Backend to Settings > Permalinks and click Save Changes

Usage

The items filtered by the id of a parent category or taxonomy. For example this structure

results in this output

by adding the id of the category / taxonomy animals into the shortcode. You will find the id of the category / taxonomy in the browser url in edit screen: category&tag_ID=72. In this case the id is 72.

Shortcode

Use a shortcode to display the grid. The shortcode has 2 parts.

Selecting the grid

• bs-isotope-equal-height (posts, isotope or any custom post type)
• bs-isotope-masonry (posts, isotope or any custom post type)
• bs-isotope-equal-height-overlay (posts, isotope or any custom post type)
• bs-isotope-masonry-overlay (posts, isotope or any custom post type)
• bs-isotope-product (only WooCommerce products)

Selecting the post type

• type=”” (“post”, “isotope”, “product” or any custom post type)
• tax=”” (type of category / taxonomy. “category”, “isotope_category”, “product_cat” or any custom post type taxonomy)
• cat_parent=”” (the id of the parent category / taxonomy)

Examples

Equal height

All cards have the same height. The Read more link line up at the bottom. Filtered by posts.

[bs-isotope-equal-height type="post" tax="category" cat_parent="YOUR ID"]

Masonry

Displays each card in a pinterest-style layout. Filtered by Isotope CPT.

[bs-isotope-masonry type="isotope" tax="isotope_category" cat_parent="YOUR ID"]

Overlay

All cards have the same height with the featured image as background. Card content appears on hover. All featured images should have the same size and the excerpt should be short as possible. Filtered by Isotope CPT.

[bs-isotope-equal-height-overlay type="isotope" tax="isotope_category" cat_parent="YOUR ID"]

Masonry Overlay

Displays each card in a pinterest-style layout with the featured image as background. Card content appears on hover. Filtered by Isotope CPT.

[bs-isotope-masonry-overlay type="isotope" tax="isotope_category" cat_parent="YOUR ID"]

Products

Filtered by WooCommerce products.

[bs-isotope-product type="product" tax="product_cat" cat_parent="YOUR ID"]

Overriding templates via theme

Template files can be found within the /bs5-isotope/templates/ plugin directory.

Edit files in an upgrade-safe way using overrides. Copy the template into a directory within your theme named /bs5-isotope keeping the same file structure but removing the /templates/ subdirectory. Path must be /your-theme/bs5-isotope/[file].php.

The copied file will now override the bS5 Isotope template file. Change grid, classes or HTML as you want.

Templates that can be overwritten so far:

• sc-equal-height.php
• sc-equal-height-overlay.php
• sc-masonry.php
• sc-masonry-overlay.php
• sc-product.php

Using the Isotope CPT

In the backend you will find the new custom post type bS Isotope below the Posts. Isotope is perfect to create a portfolio or something what differ from usual posts.

Use it like posts, create categories and Isotopes (posts). Filter them by id of a parent category (isotope_category). Don’t forget to save the permalinks in Settings > Permalinks > Save Changes.

The Isotope uses an own single.php and archive.php.

Change Isotope single slug

The url of the single item is yourdomain.com/isotope/item-name/. Paste following code into your functions.php:

// Change isotope single slug
function change_isotope_slug( $args, $post_type ) {
   
   /*isotope post type slug*/   
   if ( 'isotope' === $post_type ) {
      $args['rewrite']['slug'] = 'my-custom-slug';
   }

   return $args;
}
add_filter( 'register_post_type_args', 'change_isotope_slug', 10, 2 );

Change my-custom-slug in line 6 into for example projects and save. Save the permalinks in Settings > Permalinks > Save Changes. The new single url is now yourdomain.com/projects/item-name/.

Remove .btn-group on small devices

The filter buttons are wrapped in a btn-group.

Depending on how many categories are filtered, the btn-group can be too big for small screens and it is better to use single buttons for smaller screens instead.

Following js removes the btn-group on screen sizes below iPad portrait mode.

jQuery(document).ready(function ($) {
    if (window.matchMedia("(max-width: 767px)").matches) {
        $('.filter-buttons').removeClass('btn-group');
    }
});

Paste code in theme.js or child.js and adjust screen size in line 2.