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 610 Bricks code tutorials with BricksLabs Pro
Pro Post Title at a Different Location on Image HoverThis Pro tutorial provides the steps to update the text of a sticky div with the title of the post that is hovered on the…Read more →Categories: Bricks, ProTags: JavaScript
How to disable smooth scroll in BricksIn certain situations like using ScrollSmoother, you may be looking to disable smooth scrolling functionality that’s built into Bricks.Read more →Categories: Bricks, FreeTags: JavaScript
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
Auto-switching Bricks TabsHow to switch tabs every x seconds when the tabs element is scrolled into view.Read more →Categories: Bricks, FreeTags: JavaScript, Tabs
Pro [WooCommerce] Sticky on Scroll Add to Cart section in BricksSetting up a sticky section that fades in when scrolling down and fades away when scrolled to the top.Read more →Categories: Bricks, ProTags: JavaScript, sessionStorage
Opening RSS Block’s Links in New TabsLooking to have links output by RSS Block (in the block editor) in new tab/window when using Bricks? Add this in your Bricks template/Page at…Read more →Categories: Bricks, FreeTags: JavaScript
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
How to sync two nestable sliders in BricksIn this tutorial, we'll learn how to sync two nestable sliders in Bricks: one will be the main slider and the other one will be…Read more →Categories: Bricks, FreeTags: JavaScript, Nested Slider
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