Documentation Plugin

bS Isotope

| 9 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. 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

  • 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"]
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 /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(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.

9 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

  • 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

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information