15th May '24
/
8 comments

Filtering Masonry-layout Posts by Categories in Bricks using Isotope

Filtering Masonry-layout Posts by Categories in Bricks using Isotope

Updated on 29 Jul 2024

This Pro tutorial provides the steps to set up Isotope in Bricks for filtering posts by categories.

This tutorial can also be applied to filtering a CPT posts by its custom taxonomy terms with a few changes.

Step 1

Edit a Page or a archive template with Bricks.

Copy the JSON from the link below and paste to import the fully-built Section from our dev site.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Tagged:
Bricks
Isotope
Masonry
Pro

Sridhar Katakam

Sridhar Katakam is a Bricks enthusiast. He likes helping others by researching and solving WordPress-related problems and building websites.

Get access to all 632 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
tsParticles in Bricks

tsParticles in Bricks

Updated on 5 Aug 2023 This Pro tutorial provides the steps to set up tsParticles, a lightweight TypeScript (uses JavaScript) library for creating particles as…
Read more →
Categories: Bricks, Pro
Tags: JavaScript
Pro
Stacking Post Cards in Bricks

Stacking Post Cards in Bricks

How we can stack posts in a query loop so they stick on top of the previous one when scrolling.
Read more →
Categories: Bricks, Pro
Tags: Sticky
Pro
Horizontal Scrolling Tabs in Bricks

Horizontal Scrolling Tabs in Bricks

Nestable Tabs element in Bricks wraps into multiple lines out of the box at smaller viewport widths. This Pro tutorial provides the steps to remove…
Read more →
Categories: Bricks, Pro
Tags: Tabs
How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

This tutorial series will review how to create a dynamic filterable image gallery using the IsotopeJS library‘s features in Bricks. Requirements Create a custom taxonomy for your…
Read more →
Categories: Bricks, Free, Plugins
Tags: Filters, Image Gallery, Isotope
Pro
Codrops Dynamic Shape Overlay in Bricks

Codrops Dynamic Shape Overlay in Bricks

This Pro tutorial provides the steps to implement Codrops' SVG shape overlay in Bricks. We shall display a WordPress menu in the overlay after an…
Read more →
Categories: Bricks, Pro
Tags: Menu Overlay
Download Area with HappyFiles

Download Area with HappyFiles

Aside from the series I'm currently writing on how to create custom galleries and sliders with HappyFiles, Metabox and Bricks, I have developed a snippet…
Read more →
Categories: Free, Plugins
Tags: HappyFiles
Width and Height of Mobile Hamburger Toggle in Bricks

Width and Height of Mobile Hamburger Toggle in Bricks

Looking to change the size of Bricks hamburger toggle in the mobile menu? The default width value of 20px can be changed by selecting the…
Read more →
Categories: Bricks, Free
Tags: CSS, Mobile Menu
Pro
Stripe’s Animated Gradient in Bricks

Stripe’s Animated Gradient in Bricks

This Pro tutorial provides the steps to set up an animated gradient as a background of a section in Bricks using the code generated by…
Read more →
Categories: Bricks, Pro
Tags: Animations
Pro
Responsive iframes in Bricks

Responsive iframes in Bricks

This Pro tutorial provides the steps to add responsive iFrames in Bricks. Step 1 Edit your Page/Template with Bricks. Add a Code element having this…
Read more →
Categories: Bricks, Pro
Tags: iframes