Loading...

bs Isotope

| 63 Comments on bs Isotope

This plugin utilizes Metafizzy’s Isotope to filter posts or custom post types, perfect for creating portfolios, projects, or filtering content.

Installation

  1. Buy plugin
  2. Download bs-isotope-unzip1rst.zip and unzip file
  3. In your admin panel, go to Plugins > and click the Add New button.
  4. Click Upload Plugin and Choose File, then select the Plugin’s bs-isotope.zip file. Click Install Now.
  5. Click Activate to use your new Plugin right away.

Shortcode

Use shortcodes to display the grid. The shortcode has 4 parts plus additional options.

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-search-list – posts, isotope or any custom post type
  • bs-isotope-product – WooCommerce products
[bs-isotope-equal-height]

Selecting the post type

  • type="" – post, isotope, product or any custom post type
[bs-isotope-equal-height type="post"]

Selecting the taxonomy

  • tax="" – category, post_tag, isotope_category, product_cat or any custom taxonomy
[bs-isotope-equal-height type="post" tax="category"]

Selecting the terms

Terms can be entered directly in the shortcode or by the ID of a parent term.

  • terms="" – terms-slug, multiple terms separated by comma
[bs-isotope-equal-height type="post" tax="category" terms="cats, dogs, birds"]

Instead of writing each term directly into the shortcode, the ID of a parent term can also be used if terms are wrapped in parent. For example following category structure:

  • Animals (ID)
    • Cats
    • Dogs
    • Birds
  • terms_parent="" – the ID of the parent term
[bs-isotope-equal-height type="post" tax="category" terms_parent="111"]

Both methods results in the same output:

Options

Even though Isotope is designed to filter an unordered list, there is the option to sort items in the shortcode, similar to bs Swiper and bs Grid. Additionally, you can limit the number of displayed items:

  • orderby="" – date, title, or rand
  • order="" – ASC or DESC
  • posts="" – amount of posts to show
[bs-isotope-equal-height type="post" tax="category" terms="cats, dogs, birds" orderby="title" order="DESC" posts="20"]

Additional options for bs-isotope-equal-height, bs-isotope-masonry and bs-isotope-search-list:

  • excerpt="false" hide excerpt
  • tags="false" hide tags
  • categories="false" hide categories

Additional options for bs-isotope-equal-height-overlay and bs-isotope-masonry-overlay:

  • excerpt="false" hide excerpt
[bs-isotope-equal-height type="post" tax="category" terms="cats, dogs, birds" orderby="title" order="DESC" posts="20" excerpt="false" tags="false" categories="false"]

Examples

Equal height

All cards have the same height. The read more link line up at the bottom.

Posts filtered by tags

[bs-isotope-equal-height type="post" tax="post_tag" terms="Lorem, Ipsum, left-sidebar" orderby="title" order="ASC"]

Isotopes filtered by isotope_category

[bs-isotope-equal-height type="isotope" tax="isotope_category" terms_parent="111"]

Masonry

Displays each card in a pinterest-style layout.

Isotopes filtered by isotope_category

[bs-isotope-masonry type="isotope" tax="isotope_category" terms="colorful, colorless"]

Overlay

All cards have the same height with the featured image as background. Card content appears on hover.

Note that all featured images must have the same ratio, and custom excerpts should be as short as possible. Overlay templates use card image overlays, and long content will be displayed outside the image.

Isotopes filtered by isotope_category

[bs-isotope-equal-height-overlay type="isotope" tax="isotope_category" terms_parent="111"]
blue-red

Blue Red

This Isotope is blue and red

yellow

Yellow

This Isotope is yellow

red

Red

This Isotope is red

green

Green

This is a green Isotope

Masonry Overlay

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

Isotopes filtered by isotope_category

[bs-isotope-masonry-overlay type="isotope" tax="isotope_category" terms="colorful, colorless"]
green-vert

Green

This Isotope is green

light-darker

Light / Darker

This Isotope has a light/darker image

lighter-vert

Light

This Isotope has a light image

darker-vert

Darker

This Isotope has a darker image

dark-vert

Dark

This Isotope has a dark image

blue-red

Blue Red

This Isotope is blue and red

yellow

Yellow

This Isotope is yellow

red

Red

This Isotope is red

green

Green

This is a green Isotope

Search list

This template uses an additional search form that scans in real-time through the entire content of the cards. When “All” is selected in the buttons, it searches through all the cards. If a different filter button is clicked, only the results of that button are searched. This is well suited for creating large directories with filter buttons from A-Z and cards with more information. Advanced Custom Fields might a useful helper to create more complex cards with additional content.

Posts filtered by category

[bs-isotope-search-list type="post" tax="category" terms="post-demos, post-demos-2" orderby="title" order="ASC"]

Type something into the search field. If the search term exists, it will be found. For example search for “jul” and click the filters. All items are filtered which have “July” in meta information.

Nothing found

Products

WooCommerce products filtered by product_cat.

[bs-isotope-product type="product" tax="product_cat" terms="plugins, t-shirts" orderby="rand"]

WooCommerce products filtered by product_tag.

[bs-isotope-product type="product" tax="product_tag" terms="plugin, t-shirt, dark mode, button" orderby="rand"]

Pages

Pages cannot filtered this way, because they have nothing what Isotope can select and search for. A quick workaround is to add categories and tags to pages with a few lines of code in your functions.php:

/**
 * Add taxonomy to pages
 */
function category_tags_page() {  
  // Add tag metabox to page
  register_taxonomy_for_object_type('post_tag', 'page'); 
  // Add category metabox to page
  register_taxonomy_for_object_type('category', 'page');  
}
add_action( 'init', 'category_tags_page' );

Now it’s possible to filter pages as well.

Pages by category

[bs-isotope-masonry type="page" tax="category" terms="cats, birds"]

Pages by tags

[bs-isotope-masonry type="page" tax="post_tag" terms="bananas, garlic"]

Filters

The plugin includes filters to edit grid columns and buttons without overriding templates in the child theme. These filters can be applied to all templates at once or to a single template file. Add filters to your child’s functions.php.

Grid

Columns in a single file:

/**
 * Change isotope col classes in a single file
 */
function isotope_col_class($string, $location) {
  if ($location == 'equal-height') {
    return "col-6 col-xl-2";
  }
  return $string;
}
add_filter('bootscore/class/isotope/col', 'isotope_col_class', 10, 2);

Columns in all templates:

/**
 * Change entire isotope templates col classes
 */
function isotope_col_class() {
  return "col-6 col-xl-2";
}
add_filter('bootscore/class/isotope/col', 'isotope_col_class', 10, 2);

Buttons

Button wrapper

Changing the text-center mb-4 class in a single file:

/**
 * Change isotope filter wrapper classes in a single file
 */
function isotope_filter_wrapper_class($string, $location) {
  if ($location == 'equal-height-overlay') {
    return "mb-5";
  }
  return $string;
}
add_filter('bootscore/class/isotope/filter/wrapper', 'isotope_filter_wrapper_class', 10, 2);

Changing the text-center mb-4 class in all template files:

/**
 * Change entire isotope filter wrapper classes
 */
function isotope_filter_wrapper_class() {
  return "mb-5";
}
add_filter('bootscore/class/isotope/filter/wrapper', 'isotope_filter_wrapper_class', 10, 2);

Button group

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.

Remove btn-group class in a single template file:

/**
 * Remove isotope filter btn-group in a single file
 */
function isotope_filter_remove_btn_group($string, $location) {
  if ($location == 'equal-height-overlay') {
    return "";
  }
  return $string;
}
add_filter('bootscore/class/isotope/filter/btn_group', 'isotope_filter_remove_btn_group', 10, 2);

Remove btn-group class in all template files:

/**
 * Remove entire isotope filter btn-group
 */
function isotope_filter_remove_btn_group() {
  return "";
}
add_filter('bootscore/class/isotope/filter/btn_group', 'isotope_filter_remove_btn_group', 10, 2);
“Responsive” btn-group

Bootstrap does not have a responsive version of the btn-group. jQuery can be used to add or remove the btn-group class based on screen size. The following jQuery code removes the btn-group class on screen sizes below iPad portrait mode. Code goes to child’s assets/js/custom.js:

$(window).resize(function () {
  if (window.matchMedia("(max-width: 767px)").matches) {
    $('.filter-buttons').removeClass('btn-group');
  } else {
    $('.filter-buttons').addClass('btn-group');
  }
}).trigger("resize");

Button classes

Change btn class in a single template file:

/**
 * Change isotope filter btn class in a single file
 */
function isotope_filter_btn_class($string, $location) {
  if ($location == 'equal-height-overlay') {
    return "btn btn-sm btn-danger";
  }
  return $string;
}
add_filter('bootscore/class/isotope/filter/btn', 'isotope_filter_btn_class', 10, 2);

Change btn class in all template files:

/**
 * Change entire isotope filter btn class
 */
function isotope_filter_btn_class() {
  return "btn btn-sm btn-danger";
}
add_filter('bootscore/class/isotope/filter/btn', 'isotope_filter_btn_class', 10, 2);

Overriding templates via theme

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

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

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

Templates that can be overridden:

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

Using the Isotope CPT

bs Isotope CPT is a Gutenberg-ready custom post type plugin, well suited to create a portfolio or something what differ from usual posts. But of course, plugin can be used as a blueprint to create your own CPT as well.

Since Isotope v6, the CPT is decoupled from the filter and an optional plugin. It has nothing to do with the filter anymore.

Installation

  1. Download bs-isotope-unzip1rst.zip and unzip file
  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 bs-isotope-cpt.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

The new custom post type “Isotope” appears now in the backend below the posts. Use it like posts, create categories (isotope_category) and Isotope posts (isotope). Don’t forget to save the permalinks in Settings > Permalinks > Save Changes.

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

Filters

Change Isotope category badge

/**
 * Change Isotope CPT badge class
 */
function custom_isotope_category_badge_classes($classes, $term) {
  // Replace the existing classes with new ones
  $classes = 'badge text-bg-success rounded-0 text-decoration-none';
  return $classes;
}
add_filter('bootscore/class/badge/isotope', 'custom_isotope_category_badge_classes', 10, 2);

Change Isotope single slug

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

// Change isotope single slug
function change_isotope_slug( $args, $post_type ) {
     
  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 5 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/.

Changelog

Currently bs Isotope v6.3.2

A detailed changelog can be found in the plugin’s readme.txt file. It can also be accessed in the WordPress backend by navigating to Plugins > bs Isotope > View details > Changelog tab.