bS Isotope
This is the documentation for Isotope v6. This version includes breaking changes. If you want to update from v5.x, please read this blog post first for update instructions.
This plugin filters posts or any custom post types using the Metafizzy’s Isotope. It is well-suited, for example, to create portfolios, projects, or simply to filter posts.
Installation
- Buy plugin
- Download
bs-isotope-unzip1rst.zipand unzip file - In your admin panel, go to Plugins > and click the Add New button.
- Click Upload Plugin and Choose File, then select the Plugin’s
bs-isotope-main.zipfile. Click Install Now. - 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 typebs-isotope-masonry– posts, isotope or any custom post typebs-isotope-equal-height-overlay– posts, isotope or any custom post typebs-isotope-masonry-overlay-posts, isotope or any custom post typebs-isotope-search-list– posts, isotope or any custom post typebs-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 randorder=""– ASC or DESCposts=""– amount of posts to show
[bs-isotope-equal-height type="post" tax="category" terms="cats, dogs, birds" orderby="title" order="DESC" posts="20"]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. All featured images should have the same size and the excerpt should be short as possible.
Isotopes filtered by isotope_category
[bs-isotope-equal-height-overlay type="isotope" tax="isotope_category" terms_parent="111"]
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"]
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="equal height, masonry" orderby="title" order="ASC" posts="20"]Type something into the search field. If the search term exists, it will be found. For example search for “August” and click the filters. All items are filtered which have “August” in meta information.
Nothing found
Products
WooCommerce products filtered by product_cat.
[bs-isotope-product type="product" tax="product_cat" terms_parent="81" orderby="date" order="ASC"]
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:
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 too.
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"]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 overridden:
sc-equal-height.phpsc-equal-height-overlay.phpsc-masonry.phpsc-masonry-overlay.phpsc-search-list.phpsc-product.php
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 ($) {
$(window).resize(function () {
if (window.matchMedia("(max-width: 767px)").matches) {
$('.filter-buttons').removeClass('btn-group');
} else {
$('.filter-buttons').addClass('btn-group');
}
}).trigger("resize");
});Copy code to child’s js/custom.js and adjust breakpoint in line 4.
Using the Isotope CPT
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
- Download
bs-isotope-unzip1rst.zipand unzip file - In your admin panel, go to Plugins > and click the Add New button.
- Click Upload Plugin and Choose File, then select the Plugin’s
bs-isotope-cpt-main.zipfile. Click Install Now. - Click Activate to use your new Plugin right away.
- Go in Backend to Settings > Permalinks and click Save Changes
The new custom post type bS 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.
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 ) {
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
- [FEATURE] Add option to select category/taxonomy directly by terms=”cars, boats”
- [FEATURE] Add option to order items in the shortcode orderby=”title” order=”ASC” posts=”8″
- [FEATURE] Create dynamic id’s and allow multiple instances
- [IMPROVEMENT] Decouple CPT and made an additional CPT plugin
- [IMPROVEMENT] Replace mb-4 with g-4 class in grid
- [IMPROVEMENT] Refactor equal height templates
- [IMPROVEMENT] Change filter a to button element
- [IMPROVEMENT] Add alert if nothing found in search list template
- [IMPROVEMENT] Change search-list to masonry
- [IMPROVEMENT] Stretched-link to overlay templates
- [IMPROVEMENT] Add init to source and minify script
- [IMPROVEMENT] Change cat_parent to terms_parent
- [IMPROVEMENT] Minify CSS and add source
- [IMPROVEMENT] Deny direct access
- [BUGFIX] Undefined variable in sc-product.php
- [BUGFIX] Undefined variable $post
- [IMPROVEMENT] Change badge classes to Bootstrap 5.3 colors
- [IMPROVEMENT] Replace PHP echo’s with shorthand
- [IMPROVEMENT] Loop cards
- [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-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
51 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.
Alexandru Ursachi
says:How to make a restriction on the output of records, the load more button?
Basti
says:Hi Alexandru,
plugin itself has no load more function, because Isotope is just a filter plugin. You can use a script like https://github.com/zeshanshani/simple-load-more or any other library to add load more functionality to Isotope in your child theme.
Alexandru Ursachi
says:Any ajax solutions please?
Basti
says:A load more button isn’t a small thing. You can use a library https://www.jqueryscript.net/tags.php?/load%20more/ or code it yourself https://codepen.io/laura-chesches/pen/xgEOpY.
However, as mentioned in previous comment, a load more is not part of the plugin because Isotope is for filtering large content lists. So, you have to integrate it by yourself.
I’m sure that there are a lot of examples on Stackoverflow as well for example https://stackoverflow.com/questions/64151569/how-to-make-load-more-button-showing-other-rows (not Ajax based)
Arkadiusz Kwiatkowski
says:Hello,
Any idea why i get errors like:
Warning
: Undefined variable $post in
Warning
: Attempt to read property “ID” on null in
and url to plugins/bs-isotope-main/templates/sc-masonry-overlay.php on line 89
Didnt change anything in source code.
Best Regards!
Basti
says:Hello Arkadiusz,
this is hard to say without having a link to your project. At first glance it looks that you have enabled debug mode in
wp-config.php:If so, please disable it setting to false:
The line
89(your comment) is used to add the category/taxonomy as a class to the item which can be filtered by this class and is in every template file the same. So, nothing special here.You can use the support form send link and admin data to here, then we can check what’s happen on your site.
Basti
Arkadiusz Kwiatkowski
says:Hello,
Sorry, though that i’ve pasted url 🙂 So it’s
twor.ohsofresh.pl/realizacje/I’ve checked and debug mode was disabled, so that’s not it.
My code for isotope is:
One thing i’ve disabled is button, but used CSS for it.
Best regards!
Basti
says:Hello Arkadiusz,
I see… This can have several reasons, maybe your PHP version. You can create an admin account and (if possible) FTP access and send both to store(at)bootscore.me. I will check and fix it directly on your site. Should not be a big deal.
Basti
Arkadiusz Kwiatkowski
says:Hello,
I’ve send you an email 🙂 Thanks for help!
Arek
Basti
says:Fixed! You have a mail in your box.
Nicolas Raineson
says:Hi Basti !
I have the same issue with line 88 of sc-masonry.php.
Here is tue url :
https://njvtdwjc.preview.infomaniak.website/notre-actualite/
I hide the php comment with CSS, but I have this :
/*
Warning
: Undefined variable $post in
/home/clients/e26c6806bc2d3e7dee456771ba521945/web/wp-content/themes/bootcommerce-child-main/bs-isotope-main/sc-masonry.php
on line
88
*/
While I put the category ID correctly.
Can You help me ?
Merci beaucoup !
Nicolas
Basti
says:Hi Nicolas,
firstly, this isn’t an error, it’s just a notice. I figured out that in this case it is a server setting in Hosters backend that sets reports to “true”. You can switch this off in Hosters settings or simply add this line
to your
wp-config.php.If you do need help for this, just send me FTP data here and I will fix that soon directly on your server.
Solved?
Best regards
Basti
Nicolas Raineson
says:Perfectly solved, yes ! Thank you.
And I have another question. When I display posts or products in masonry via isotope, is there an easy way to display X products only ? I can hide X + n with css or some jQuery deleting, but it is not very clean. Is there an easy way to do this in a server way, through php (which I suck at it ^^) ???
THank you
Basti
says:Unfortunately not yet. That‘s because what you want to show is selected by shortcode and a shortcode is for selecting something and not to deselect. Isotope is build for filtering large content selected by categories. If you want to have more control about that and want select items by id or whatever, have a look to the bS Grid plugin. Of course, this plugin has no filter.
Does this help?
Nicolas Raineson
says:Hi !
Thanx for your answer. Helping, but not solving the situation 🙂
i will manage otherwise.
++
Dave Tasker
says:Hi Bast, a great plugin, thank-you!
In the Pages use-case, would it be possible to incorporate the $post_parent option into the short code please? It would be very useful IMHO to be able to restrict the pages listed to a subset of a given parent page.
Many thanks for your consideration.
Dave Tasker
says:Silly me, I can use a template override page to amend the query – apologies! Not enough coffee (mutter, mutter)
Basti
says:Hi Dave,
you’re welcome. If you have a working snippet to catch child-pages, we can add it to the templates.
Dave Tasker
says:Adds post_parent to the attributes array, and to the query options if specified with a value by the user:
https://gist.github.com/sokratesagogo/5cf0e8c8cc0d1db03a0b128b6d87c8e9
Basti
says:Thank you. Have it on the list and will add it in one of the next update.
Mike Abbott
says:Hi all,
Sorry if I’m missing something, but is there a way of using the shortcode in the archive.php template file so that it can display only the custom post types that are in that category?
Basti
says:Hi Mike,
I do not understand what you exactly mean. Are we talking about the CPT archive? Click the category badge “Colorful” in the first example on top on this page and the archive only displays items from this category https://bootscore.me/categories/colorful/.
Because this displays only one category, there is nothing to filter?
Mike Abbott
says:Apologies, but I realised I didn’t include enough information in my first post, my situation is as follows:
I have a custom post type of ‘guideline’, each guideline is added to a custom taxonomy of ‘guideline-section’ and then within each guideline, the client can choose other taxonomies of ‘guideline-category’ and ‘guideline-area’.
For each archive page of ‘guideline-section’, is it possible to include the shortcode in the archive page template so that when the user lands on the relevant ‘guideline-section’ archive page, they are presented with the filter of ‘guideline-category’ only for that ‘guideline-section’?
Or would I have to create a new archive.php for each ‘guideline-section’ to only include the relevant taxonomies used for that category?
Basti
says:I think this is the correct way. You can echo the shortcode in the archive.php, but you need different archives.
But to be honest, I do not exactly understand the case yet. A link to your site will be very helpful to understand what do you want to do in detail. If you do not want to share public, please send link to store(at)bootscore.me.