12th Feb '23/4 commentsWP Grid Builder Filters inside Bricks’ OffCanvasSridhar Katakam This Pro tutorial provides the steps to move WP Grid Builder's filters inside the Bricks' native Offcanvas on smaller viewport widths. Let's work with the Posts page as the view. This means: a Page titled Blog was set as the Posts page at Settings → Reading. This Page is being edited with Bricks and a Posts or Query Loop element with the query set to output Posts has been added. Step 1 Create these WP Grid Builder facets: Categories, Reset, Pagination. Step 2 Set up your Posts page's structure to look like this: Step 3 Paste this in the Bricks editor at Settings (gear icon) → PAGE SETTINGS → CUSTOM CODE → Body (footer) scripts: This is a BricksLabs Pro tutorial. For full access login below or create your BricksLabs Pro account Username Password Remember Me Forgot Password Tagged: BricksJavaScriptPluginsProWP Grid BuilderSridhar KatakamSridhar Katakam is a Bricks enthusiast. He likes helping others by researching and solving WordPress-related problems and building websites.Get access to all 633 Bricks code tutorials with BricksLabs Pro
Filtering Pro Slider Slides with WPGridBuilderHow to use facets to dynamically change the slides inside of an active slider.Read more →Categories: Bricks, FreeTags: BricksExtras, Pro Slider, WP Grid Builder
Loading External Scripts in WordPress With Defer AttributeThe next major version of WordPress, 6.3 includes a loading strategy for scripts so we can easily specify that the scripts have defer or async…Read more →Categories: Bricks, Free, WordPressTags: defer, JavaScript, wp_enqueue_script
Pro Stock Quantity Block for WP Grid BuilderIn the unofficial WP Grid Builder Facebook group a user asked: Is it possible to show stock quantity on the card? I can't find it…Read more →Categories: Plugins, ProTags: WP Grid Builder
Enqueueing a JavaScript File in BricksBricks child theme's functions.php comes with code to enqueue (load) style.css on the front end. What if you want to load a custom JavaScript file…Read more →Categories: Bricks, FreeTags: JavaScript
Pro How to Limit a WP Grid Builder’s Term Grid to Only Current Post TermsIn the WP Grid Builder Facebook group (unofficial), a user asks: Hi All, I'm looking for a way to update the contents of a grid…Read more →Categories: Plugins, ProTags: WP Grid Builder
Pro Switching Tabs on Hover in BricksThis Pro tutorial shows how to make the tabs of Tabs (Nestable) elements active on hover in Bricks. Step 1 Add one or more Tabs…Read more →Categories: Bricks, ProTags: JavaScript, Tabs
Pro Opening Submenus with Click Instead of Hover in BricksThis Pro tutorial provides the code for opening submenus with click instead of hover in Bricks. Step 1 Add this in child theme's style.css: Step…Read more →Categories: Bricks, ProTags: JavaScript, Nav Menu
Setting Active Tab in Bricks’ Tabs (Nestable) ElementWith Bricks' Nestable tab element, here's how we can set which tab is active by default.Read more →Categories: Bricks, FreeTags: JavaScript, Tabs
Pro Published Years Filters in BricksIn the Posts Grouped by Years in Bricks tutorial, we showed how posts can be grouped by all the years in which there are published…Read more →Categories: Bricks, Plugins, ProTags: Facets, Filters, WP Grid Builder