Creating a listing section with the Metabox checkbox list and loop builder
We are creating a list with the help of the Metabox checkbox list field type and controlling them in our dashboard. Now we shall display them in list format with the Bricks List element and loop builder at frontend. See the video below
Adding the post’s CSS classes in the loop builder element
We can add the post classes into the loop builder element wrapper. By default, the bricks loop builder is not adding the post classes. If you have the BricksUltimate add-on, you will get {post_class} dynamic tag which is fetching all CSS classes of that particular post. With this CSS class, you can differentiate your posts and add a unique style(if you need it). Before After
Adds custom attributes to the popup wrapper
How do you add your own custom attributes to the popup outer wrapper? Here I am sharing a simple snippet. You will add it to the theme’s functions.php file or any 3rd party snippet plugin. bricks/popup/attributes is a filter. It is accepting the two parameters: attributes in array format and popup id in integer/string format. In the above code, I targeted the specific popup with the popup ID. You will replace the ID 7042 with your popup id. Here I am adding a custom CSS class and data attribute. You…
Add attributes to BODY tag
You can easily add your own custom attributes to <body> tag. There has a filter bricks/body/attributes. Open the functions.php file of the bricks child theme or any 3rd party snippets plugin and drop the following PHP code Reference: https://forum.bricksbuilder.io/t/how-can-i-add-an-id-to-the-body-tag/11097
Adding Quantity Input Field to Bricks Mini Cart element
The bricks builder has a native side cart element (Mini Cart) for the WooCommerce site. In this tutorial, I shall show how we can add the quantity field with the ‘+’ and ‘-‘ buttons there. So the customer can easily update the cart item’s quantity from there without any page refresh. Step 1: Adding the Quantity Input FieldAdd the following PHP code to your site. You can use the Bricks Child theme’s function.php file or any 3rd party snippets plugin like WPCodex. – OR –
Sync AJAX Action with the Bricks Native Popup Builder
Bricks Builder integrated the lightbox effect with the Popup builder feature. But it has not AJAX option. If your site has a long listing page and you added the lightbox option via native popup builder, your page size is growing big and increasing the DOM size. We can avoid it with AJAX. Because AJAX is fetching the dynamic data from your server without any page refresh. Therefore, your page will load quickly. BricksUltimate, a 3rd party add-on of the bricks builder added this feature and you can easily setup the…
Show the post excerpt on the first post only
In this tutorial, I shall show how we shall hide excerpts on all except the latest post. As per the above image, I used the Query Loop builder of the Bricks and created the grid layout of the latest 3 posts. Here I used the following nested elements under the Block element(I added the single Post Query Loop builder feature in this element and built the grid layout with the CSS Grid option).1. Image Element2. Post Title Element3. Meta Data Element4. Post Excerpt Element.After completing the layout, I selected the…
Creating Off-Canvas Panel with Bricks Popup
Bricks 1.6 is introducing the interaction and popup features. With these features, you can make the off-canvas panel for your site. See the video below: [COMING SOON]
Creating the gallery page with the Bricks editor
How do you make the gallery page if you have 50+ images? In this tutorial, I shall show you how you will make the gallery page with ACF(Advanced Custom Fields) plugin and Query Loop Builder of the Bricks builder.The complete process is shown in the video. Check the video below. Code for Custom Loop Note: I used the ACF in this tutorial. But you can also use Metabox or any custom field plugin.
Creating Product Gallery Slider with Nested Slider Element
In this post, I shall show you how you will create the product gallery slider with the bricks’ native nested slider element. Bricks introduced the loop builder and you can use the loop builder in the nested slider element.BricksUltimate created a custom loop builder “Product Galleries” which is fetching the WooCommerce product’s gallery images and displays at the frontend.Before making the slider, make sure that you enabled the Image Attachment element from the Bricks -> BricksUltimate -> General Elements tab.Step 1: Add the section/container/block element as a wrapperStep 2: Add…