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.
Installation
- Download Plugin
- In your admin panel, go to Plugins > and click the Add New button.
- Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
- Click Activate to use your new Plugin right away.
- 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 /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] 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-inlineto 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
27 Comments on “bS Isotope”
Leave a Comment
You must be logged in to post a comment.
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
Basti
says:Hi Nam,
please send me admin and ftp data here https://bootscore.me/support/. So, I will check this.
Thanks
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.
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.
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,
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: nonein the grid. For example create a categoryhide-this-categoryand 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; }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.