Updated on 06 Aug 2024.
In this tutorial, we share the steps for setting up Bricks builder from scratch.
While official documentation and videos exist already, you could consider this as a practical guide with many handy tips interlaced with useful custom code.
By the end you would have created a basic site in Bricks that you could further tweak and set aside as a blueprint.
Note:
- This is Part 1 in the series.
- There are several ways to build and design things in Bricks or any other builder. This article is not necessarily the only or the best way.
Table of Contents
Installation and Initial Steps
- Those coming from Oxygen: remember that Bricks is a theme. The first time I used Bricks, I tried installing it as a plugin out of habit! Do not do that mistake.
- Install Bricks and Bricks child theme. It is a good practice to install and activate the child theme. Using the parent theme as the active theme is also fine as long as you don’t modify or add anything to it. If and when there is anything that can’t be done w/o a child theme you can upload and activate it at that time and use it from then onwards. Most users/sites do not need the child theme. It depends entirely on the requirements. I do personally use the child theme.
- Enter your license key.
Bricks Navigator
While this is not a required step, you will save a lot of clicks and time by having access to direct edit links of Templates and Pages and more in WP admin bar with Bricks Navigator. You might want to add it from the Plugins screen as it is in the WP repo.
Bricks Settings
Export File
General
The default setting of “Pages” for the Post types is sane choice. For other common post types like Posts and Products, we typically want to edit their content using the WP block editor and not Bricks editor.
If you want to be able to upload SVG files, enable it for Administrator and Editor.
I generally do not enable this setting and just copy the SVG’s HTML after cleaning it up and simply paste it in a Code element.
If you are using a SEO plugin (I use SEOPress Pro), disable Bricks Open Graph Meta Tags and Bricks SEO Meta Tags.
Do NOT enable Custom Image Sizes unless you know what you are doing because this might create 5 additional images (different sized versions) each time an image is uploaded.
If you wish to have content from pages that are built with Bricks to be included in search results, enable Query Bricks Data In Search Results.
Query filters is an experimental feature as of Bricks 1.9.7.1 and I do not recommend using them especially in production sites. I use WP Grid Builder.
These are my recommended settings.
Builder access
If you are working with clients, typically you’d set their role to either Editor or Author (more on this here).
You might want to provide “Edit Content” permission to that user role.
Builder
If you constantly keep getting notices in your Bricks editor near the bottom that there is a recent autosave asking if you want to revert, you may come back here later and disable autosave.
Thomas, the creator of Bricks (and I) keeps autosave disabled.
Toolbar Logo Link: Dashboard in a new tab.
Canvas – Disable element spacing: On. If this is not disabled, you may accidentally set padding/margin values for elements. These should typically always be precise and uniform.
Structure Panel: Enable all the four options.
Dynamic data: All 5 on.
Performance
Disable emojis: On.
Disable Google Fonts: On. If you do want to use Google fonts, it is better to self-host them (or any fonts for that matter) and this can be done via Bricks → Custom Fonts or using Matthias Altmann’s snippet.
Disable jQuery migrate: On.
Disable class chaining: On.
CSS loading method: Inline styles (default).
API Keys
Bricks has a handy Unsplash integration so stock images can be added quickly from within the builder.
You might want to obtain one and enter its API key at the least.
Custom Code
Enable code execution for admins.
WooCommerce
Product Badge “Sale”: Text
Product Badge “New”: 30
WordPress Settings
Create two Pages named: Home and Blog.
At Settings → Reading, set Home as the static homepage and Blog as the Posts page.
Create your site’s Pages.
Create a menu at Appearance → Menus and add your menu items.
Templating
COMMUNITY TEMPLATES
Bricks comes bundled with community templates that you can readily import with just a few clicks.
You could skip the entire guide below and import them as a starting point or if you are curious to see how they are assembled with all the Bricks elements.
To use this feature edit any Page (like the “Sample Page”) with Bricks, click the folder icon at the top on the right, switch to COMMUNITY TEMPLATES and proceed.
If you want to use Bricks for building custom sites for yourself or your clients and want to familiarize yourself with it, follow along.
Header
Unlike in Oxygen there is no concept of a Catch All Template in Bricks.
Templates marked as Header and Footer will automatically apply on all pages. There is no need to apply a Template Condition and set these two Templates to apply sitewide. It is possible to disable these on an individual Page/Template basis.
Go to Bricks → Templates and add a new Template named “Header”. Set the template type to: Header.
Edit it with Bricks.
Let’s now create a theme style. A theme style enables us to set default styles for certain builder elements.
Click on Settings (gear icon) → THEME STYLES → +.
Name it Global and click CREATE.
COLORS
Set your colors/color palette if you have one.
ELEMENT – SECTION
Padding at top and bottom: 75, left and right: 20.
Go ahead and adjust the defaults for any other elements of your interest. You can always come back here later and set the values as needed.
Add a section by clicking on the Section element in the left side elements panel.
This adds a Section having a Container inside.
Select the Container and add a Logo element and a Nav Menu element.
If you have a logo ready, select the Logo element and upload it.
If you have multiple menus in the site, select your desired header menu after selecting the Nav Menu element.
To have both these line up horizontally at the edges of the container, select the Container.
Direction: Horizontal (row)
Align main axis: Space between
Align cross axis: Center
Save the Template by pressing Ctrl/Cmd + S or the floppy icon at the top right.
Since we do not want the header’s section to have so much space at top and bottom, change it from 75 to something like 30 each.
Footer
If you still have the Bricks editor open you can access, insert and create new Templates from right within the editor without having to exit into WP admin. Press the folder icon near the top right or press Ctrl/Cmd + Shift + L. Click +, enter “Footer” as the title, select Footer as the Template type and click CREATE TEMPLATE. Hover on the Template and click the Edit icon.
If the Bricks editor is not open, go to Bricks → Templates and add a new Template named “Footer”. Set the template type to: Footer.
Add a Section. Build your footer as needed.
Remember that a Template of the type “Footer” is automatically sitewide out of the box.
Page
Create a Template of the type “Single” named Page.
Edit the Template with Bricks.
Apply it to all Pages.
While still in the Settings area, click on TEMPLATE SETTINGS → POPULATE CONTENT and select any existing Page that has WP content like Sample Page in a default WP install. Click APPLY PREVIEW.
Implement The Perfect Bricks Page Template.
Blog (Posts page)
Edit “Blog” Page with Bricks. If Bricks editor is already open you can click the Pages icon near the top on the left and select your Page to begin editing it with Bricks.
Add a Section and a Posts element inside the Section’s Container.
Select the Posts element and NAVIGATION → Show Posts Navigation → Enable to add the pagination.
There’s a separate Pagination element that has more controls if you want to use instead of enabling the pagination in the Posts element.
Single Post
Create a new Template called Single Post of the type, Single.
Edit it with Bricks.
Apply it to single post pages.
To be continued in the next part of the series…
Archive
Taxonomy Term Archive
Consider this scenario:
CPT (custom post type): Project
Associated custom taxonomy: Project Type
Sample project types: Business, Nature
Here’s how you set up the taxonomy term archive pages i.e., the template that these two URLs (in this example) use:
example.com/project-type/business/
example.com/project-type/nature/
Create a template named say, “Project Type” of type “Archive”.
Edit it with Bricks.
Click on Settings (cog icon near the top left) → TEMPLATE SETTINGS → CONDITIONS.
Add a condition similar to:
You may also want to select one of your terms to preview and click APPLY PREVIEW.
Add a Section having a h1 heading. Set its text to:
{term_name}
Add another Section (optional) and inside its Container, add a Posts element. There is no need to change any query settings assuming no other post type shares the taxonomy. Since the template has been applied to all your taxonomy term archives, Bricks/WordPress will automatically show posts of the correct post type that are assigned to the current term when viewing any term archive page. There is no harm in selecting your post type in the query settings though.
If you’d like more control, you could set up a query loop. Like above, there’s no need to change/set any query settings.
Author Archive
These are pages that typically show the posts published by a user.
Example URL:
https://bricks.local/author/xkessler/Create a template named say, “Author Archive” of the type Archive.
Edit the template.
At Settings → TEMPLATE SETTINGS → CONDITIONS, set the template to apply to Author archives like this:
Add a Section and inside the Section’s Container, a Heading and Posts elements.
Set the Heading’s Tag to h1 and its text to:
Author: {author_name}
Do not make any changes to the Posts element’s Query parameters.
38 comments
Sean Gardner
Is there an update to this setup?
Sridhar Katakam
For the Page template setup, follow this instead: https://brickslabs.com/the-perfect-bricks-page-template/
Sean Gardner
But I can follow this for the bricks settings, correct?
Sridhar Katakam
Not atm, they are outdated.
I am updating the post now and will add another comment when done.
Sridhar Katakam
Done.
Sean Gardner
Thank you so much for alerting me I highly apprecaite it. Great update!
Sean Gardner
Oh awesome, thank you. I'll be on the look out for that as I just started a new wordpress build and was referencing these settings.
I may need a separate post, but I was wondering how you set up your settings > Media?
Sridhar Katakam
Done.
I use Kevin Geary's suggested settings: https://d.pr/i/fSJ8cP (except the one about organizing media by date folders, he doesn't like that)
Sean Gardner
Great, thank you.
lol i dont blame him, I dont like it either
Kay
Is this guide still relevant or upto date with the current bricks version?
Marcos Otero
I am amateur and used elementor to create website as volunteer. Am trying to change over to Bricks. When I follow you setting I do not get a woocomerce tab> Why?
Sridhar Katakam
This guide is not complete yet. It does not cover setting up pages and templates for WooCommerce.
Arnaud Ardans
Any plans to update the setup guide for 1.5.7 or greater?
Dustin Dauncey
There seems to be an issue on 1.5.6 with the #000 hex code for the active class text.
#bricks-panel-element-classes .active-class.active input {
background-color: var(--wp--preset--color--light-green-cyan);
color: #000;
}
May need an update (or may just need a fix in Bricks if they've changed something incorrectly).
D Ee
I think it's time to update again ? there is no GENERAL >
Root Container Padding anymore. where to adjust now ?
Carolyn Breninger
Wonderful starting point. Lots of nuggets to smooth the building path.
Is there a Part 2 yet?
Gregg Watson
Great article, could you update it for Bricks 1.5 as there are numerous new settings and features. Would love to hear your feedback.
Sridhar Katakam
Will do after 1.5 RC is released.
Jordan Huang
Hi Sridhar, can you expand on the following step:
"Add the following in the child theme’s functions.php at the end::"
In particular, where do I go to access the child theme's function.php?
Jordan Huang
Never mind, I figured it out.
For anyone else like me who hasn't touched child themes or PHP before, you can do this by going Appearance → Theme File Editor → Theme Functions
Emanuele
Always and I repeat again Always use a child theme! ????
Emmanuelson
You should be using a code snippet or child theme to add code snippets, else they will get overridden when the theme is updated.
Emmanuelson
Same issue with my SVG logo. The CS You should be using a code snippet or child theme to add code snippets, else they will get overridden when the theme is updated. S makes matters worse by increasing the size of the handburger icon.
Sridhar Katakam
Updated the article.
Brian Steele
Yes, very helpful.
I'm a bit confused about the instructions for the Page template though. You show a Post Content element directly after the Code element, but I don't see any mention of it in your instructions. Should that be set to Data source > Bricks? I see the Post Content element inside the Section is set to WordPress.
And I'm afraid I don't understand this: "Do NOT have both WP content and Bricks content for any given Page if you are following this setup." Is it either or – you can't display Bricks content and WordPress (Gutenberg) content on the same page?
Mark Thomas
Yes, I'm also confused about this . No mention of that extra code block in the instructions.
Sridhar Katakam
I have updated the tutorial esp. the Page Template portion. But note that it now applies to Bricks 1.5 beta and above only.
Brian Steele
I've created the new Page template following these instructions but my Query Loop in Bricks page (created from that tutorial) is not working - the content isn't rendered. Specifically, it seems to be this line in Functions.php:
// Check if the element has the HTML ID "page-content"
if ( $html_id && $html_id === 'page-content' ) {
return '' !== get_post()->post_content;
}
If I comment that out, the Query page works. I'm just wondering if there's an error in that return, and why is it necessary?
Brian Steele
This editor messed up the syntax, but it's correct in my snippet (copied directly from this article).
Sridhar Katakam
Did you do this step? https://d.pr/i/PZ8hb5
Which version of Bricks are you using?
Brian Steele
Yes, here's how my page template is structured: https://share.getcloudapp.com/2NumoY4p
Using Bricks 1.5.
Sridhar Katakam
Mind sending WP login via https://brickslabs.com/support/ ?
Brian Steele
Done.
Bob Lucore
This is very helpful, Sridhar. I’m looking forward to more!
Paul R. Dillinger
Thanks for this. I've been sitting on Bricks for a while, but with the Automatic.CSS integration coming soon, it's time to start using it. This post should help save some time.
Michael Kuntz
Same here. I'm going to build my first site with it as soon as ACSS is ready. I feel like a kid waiting for Christmas!
Rob Bock
Great guide! Thank you for pulling this together.
By the way, I noticed your two code blocks for excluding the header from the front page appear identical. Was that a mistake?
Sridhar Katakam
Are you referring to this Rob?
https://d.pr/i/2zc77Y