Documentation Plugin

bS Isotope

| 31 Comments on bS 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.

Contents
Installation
Usage
Shortcode
Selecting the grid
Selecting the post type
Examples
Equal height
Masonry
Overlay
Masonry Overlay
Products
Overriding templates via theme
Using the Isotope CPT
Change Isotope single slug
Remove .btn-group on small devices
Changelog

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

categories

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.

find-parent-id

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"]
blue-red
Blue Colorful Red

Blue Red

This Isotope is blue and red

Read more »
yellow
Colorful Yellow

Yellow

This Isotope is yellow

Read more »
red
Colorful Red

Red

This Isotope is red

Read more »
green
Colorful Green

Green

This is a green Isotope

Read more »

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"]
green-vert
Colorful

Green

This Isotope is green

Read more »
light-darker
Colorless

Light / Darker

This Isotope has a light/darker image

Read more »
lighter-vert
Colorless

Light

This Isotope has a light image

Read more »
darker-vert
Colorless

Darker

This Isotope has a darker image

Read more »
dark-vert
Colorless

Dark

This Isotope has a dark image

Read more »
blue-red
Blue Colorful Red

Blue Red

This Isotope is blue and red

Read more »
yellow
Colorful Yellow

Yellow

This Isotope is yellow

Read more »
red
Colorful Red

Red

This Isotope is red

Read more »
green
Colorful Green

Green

This is a green Isotope

Read more »

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"]
blue-red

Blue Red

This Isotope is blue and red

Read more »
yellow

Yellow

This Isotope is yellow

Read more »
red

Red

This Isotope is red

Read more »
green

Green

This is a green Isotope

Read more »

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"]
green-vert

Green

This Isotope is green

Read more »
light-darker

Light / Darker

This Isotope has a light/darker image

Read more »
lighter-vert

Light

This Isotope has a light image

Read more »
darker-vert

Darker

This Isotope has a darker image

Read more »
dark-vert

Dark

This Isotope has a dark image

Read more »
blue-red

Blue Red

This Isotope is blue and red

Read more »
yellow

Yellow

This Isotope is yellow

Read more »
red

Red

This Isotope is red

Read more »
green

Green

This is a green Isotope

Read more »

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 /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-main keeping the same file structure but removing the /templates/ subdirectory. Path must be /your-theme/bs-isotope-main/[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 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(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.

Changelog

  • [IMPROVEMENT] Gutenberg support for Isotope CPT

  • [IMPROVEMENT] Fix product star rating

  • [IMPROVEMENT] Reformat all files

  • [READDED] isotope-init.js
  • [IMPROVEMENT] Moved filter buttons .btn .btn-outline-primary from jQuery to .php files

  • [CHANGED] GPL-2.0 to MIT License
  • [IMPROVEMENT] Fixed a.badge color by text-* class instead of CSS (cpt-isotope.php)
  • [REMOVED] Folder inc with duplicate templates

  • [BUGFIX] Added d-inline to read more button sc-equal-height-overlay.php and sc-masonry-overlay.php (MacOS Safari)

  • [NEW] Override templates in child-theme
  • [SEO] Merged jquery.isotope.min.js and isotope-init.js to one file to reduce HTTP requests
  • [SEO] Load js in footer

  • Initial release

31 Comments on “bS Isotope”

  • Arran Hearn

    says:

    Hi Bastian,

    Just getting an jQuery error trying to use isotope with the latest Bootscore 5.0.2.0

    Uncaught ReferenceError: jQuery is not defined
    at isotope-init.js?ver=5.7.2:4

    I’m trying to use isotope to display all posts with the overlay, all are in category ‘General’ (ID=4)
    [bs-isotope-equal-height-overlay type="isotope" tax="isotope_category" cat_parent="4"]
    As of now, nothing is showing up – Do I need to add anything to the Isotope CPT? Perhaps it the jQuery problem causing this?

    Cheers, love bootscore btw ; )

    • Basti

      says:

      Hi Arran,

      the isotope-init.js was removed in February. So that means you use an older version. Maybe there is a conflict with 3rd party plugin or something with your child.

      You wrote that you filter by a category id 4 which contains all posts? This won’t work because Isotope does not know what to filter. The parent category must have subcategories. Subcategories are then used for filtering and posts must be in subcategory, not in parent category.

      This are just ideas, but I cannot say something without checking your code.

      If that not fix the issue, please share a site link and admin details, so I will fix that. You can send details here: https://bootscore.me/support/

      Best regards

      Basti

  • Arran Hearn

    says:

    Ah ha, I see. I was using the plugin from github (I guess the old version). No problem – solved the issue now, but thank you for your prompt response.

    Cheers

  • Dominik Cipriano

    says:

    Hi Basti,
    i have a problem with the plugin.

    I get the following error message in a bootstore child theme and also main theme:

    [bs-isotope-masonry type="post" tax="category" cat_parent="4"]

    Notice
    Trying to get property ‘ID’ of non-object in
    /var/www/html/web/wp-content/plugins/bs5-isotope/templates/sc-masonry.php
    on line
    93

    The plugin as well as the installation is out of the box on an apache environment with php 8.0. The error is also displayed with php 7.4.

    Is there a solution for this?

    Thanks for your help

    Best regards
    Dominik

    • Basti

      says:

      Hi Dominik,

      I need access to your site to check. For purchased plugin you get direct support. Please fill admin and ftp data here https://bootscore.me/support/

      Best regards

      Basti

    • Eirik Høyme Rogn

      says:

      Did you resolve this issue? I have encountered the same problem.

      • Basti

        says:

        Hi Erik,

        you have a message in your inbox. Please check your spam folder as well.

    • Nam Nguyen Ba Hoang

      says:

      Hi Basti,
      I also have the same problem, despite of it, plugin work fine

  • Vladislav Khusainov

    says:

    I still don’t understand how to use “category”, “isotope_category”. How do I add entries to “isotope_category”? When writing to a blog, I can only add new entries to the “category”

    • Basti

      says:

      Hi Vladislav,

      for example if yo want to filter posts:

      Create a parent category and some child categories and assign posts to child categories.

      Animals (parent category)
      – Birds (child category)
      — Bird 1 (post)
      — Bird 2 (post)
      – Fishes (child category)
      — Fish 1 (post)
      — Fish 2 (post)

      Now check the id of parent category (Animals) and paste it in shortcode.

      [bs-isotope-equal-height type="post" tax="category" cat_parent="ID-OF-CATEGORY-ANIMALS"]

      Posts are now filtered by Birds and Fishes.

      Using custom post types:

      If you want to use custom post types, there is a taxonomy instead of category. For example Isotope uses “isotope_category” instead of “category”.

      Create in backend in isotope category (isotope_category) structure like above:

      Food (parent isotope_category)
      – Breads (child isotope_category)
      — Bread 1 (isotope post)
      — Bread 2 (isotope post)
      – Cakes (child isotope_category)
      — Cake 1 (isotope post)
      — Cake 2 (isotope post)

      Now change the type to isotope check the id of parent isotope_category (Food) and paste it in shortcode.

      [bs-isotope-equal-height type="isotope" tax="isotope_category" cat_parent="ID-OF-ISOTOPE-CATEGORY-FOOD"]

      Isotopes are now filtered by Breads and Cakes.

      You can send me backend access to your site https://bootscore.me/support/. I will help you to create some sample conrent.

      Does that help?

      Basti

  • Massimo Matteazzi

    says:

    Hello,

    if I create a parent category then my categories are going to change.
    for example if before I wasn’t using parent categories, and I have:
    – cars
    – bikes
    – boats
    with permalinks:
    mydomain.com/category/cars
    mydomain.com/category/bikes
    mydomain.com/category/boats

    If now I want to use the plugin and create an isotope menu with all|cars|bikes|boats I need to create a new parent category called for example “vehicles”. But in order to make it work the permalinks now become:
    mydomain.com/category/vehicles/cars
    mydomain.com/category/vehicles/bikes
    mydomain.com/category/vehicles/boats

    how can I avoid that?

    thanks

    • Basti

      says:

      Hi Massimo,

      do you use Posts or Isotopes? Think doing exactly this is not possible without a hack or plugin.

      But you can do some settings in Backend > Settings > Permalinks to hide category complete if that helps.

      For paid products you get email support here https://bootscore.me/support/. You can send admin details and we can check.

      Basti

  • Pavel Lazarev

    says:

    Hi!
    Awesome plugin, but how can I sort products not by IDs? Maybe, sort by name or manually with woocommerce tool.
    Thank you!

    • Basti

      says:

      Hi Pavel,

      unfortunately it’s not possible to sort them by names. Items must be placed in subcategories and plugin uses the subcategories for filtering by id of the parent category.

      Hope that helps

  • Alvar Card

    says:

    Hi!
    Great plugin… I have two questions
    How to exclude a post from the grid?
    and
    how to hide the “all” button when in some cases all are shown without categories?
    Thank you!

    • Basti

      says:

      Hi Alvar,

      “How to exclude a post from the grid?”

      A shortcode is to include something and not to exclude. You can’t exclude items via shortcode but you can do a workaround. Items get classes by category/taxonomy slug. This mean you can create a top level category and hide them by setting category/taxonomy class to display: none in the grid. For example create a category hide-this-category and add items you want to hide to this. Then use CSS. Example uses equal-height template.

      /* Exclude items */
#equal-height .hide-this-category {
  display: none;
}

      “how to hide the “all” button when in some cases all are shown without categories?”

      You can remove “All” button simply in template file. But you can do this simply with CSS as well. Example uses equal-height template.

      /* Hide All button */
#filters-equal-height .btn:first-child {
  display: none;
}

/* Set border-radius to 2nd button */
#filters-equal-height .btn:nth-child(2) {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

      Depends on which template you use, change # selector to your template.

      Does this help?

  • Brian King

    says:

    Like BootScore, bS Isotope totally rocks! Top of my wishlist is PAGINATION. I’d love to see it for bs-isotope-product and offer Next Page, Page Numbers, Load more.. alternatives. Go BootScore!

    • Basti

      says:

      Thank you!

      Pagination is not possible, because Isotope is not a “category” template, it’s a shortcode that shows content inside a page.

      Adding a kind of “Load more…” means that bS Isotope needs another library https://infinite-scroll.com/. Infinite scroll is made by the same developer as Isotope, so both libraries should work fine together.

      We will do not add this to plugin, this will go beyond the scope. But we can help add this to your child-theme if you want.

  • Brian King

    says:

    My apologies Basti, I should have explained “why” I wanted it.. we have categories that have over 500 products, meaning the pages (with bS Isotope), take forever to load. If Infinite scroll is a way around it, then yes, it would be a great solution.

    • Basti

      says:

      Do you have a link to your Isotope?

  • Andy Miller

    says:

    Hello –
    Does bS Isotope support isotopes combination filters?
    Thanks.

    • Basti

      says:

      What do you mean exactly? Mixing post types? No, that’s not possible.

      • Andy Miller

        says:

        Thanks for your reply, apologies for the vague question.

        I’m basically looking for multiple filter criteria, probably through multiple filters. Like shown here:

        https://isotope.metafizzy.co/filtering.html

        the combination filter towards the bottom of this page.

        • Basti

          says:

          Of course, this is simply possible by adding more than one categories/taxonomies to the items.

          Check the https://bootscore.me/documentation/plugin/bs-isotope/#Equal_height example.

          Click the Blue and the Red button. The Blue Red item is in the categories Blue and Red. So when you click the Red Button, the Blue one is shown too, because it is in Red category as well.

          Does this help?

          • Andy Miller

            says:

            Yes thank you, that helps. Is it possible to have for example 2 filters, say one of them is colors and one is numbers and filter based on both, such as Blue 1 or Green 2?

            • Basti

              says:

              Do you mean two filter bars? Unfortunately not.

              But you can create as many categories/taxonomies as you want. For Example Blue 1, Blue 2, Blue 3, Green 1, Green 2… Then assign simply the items to the categories.

  • Alexandru Ursachi

    says:

    How to make a restriction on the output of records, the load more button?

Leave a Comment

To top