Bricks Setup Guide

Updated on 06 Sep 2022.

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:

1. This is Part 1 in the series.
2. 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.
3. The guide was initially written for v1.4.0.1 of Bricks but has since been updated for v1.5 beta. You may find references to both versions in a few places. Use/apply what is relevant to your version. The Page Template instructions are for 1.5 beta and above only since it uses the bricks/element/render filter.

Table of Contents

• Installation and Initial Steps
• Bricks Navigator
• Bricks Settings
  • General
  • Builder Access
  • Builder
  • Performance
  • API Keys
  • Custom Code
  • WooCommerce
• WordPress Settings
• Templating
  • Header
  • Footer
  • Page
  • Blog (Posts page)
  • Single Post
  • Archive
    • Author Archive
  • WooCommerce
    • Single Product
    • Main Shop page
    • Product Category and Tag Archives

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.
• 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

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.

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, 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.

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.

Enable Code Execution permission to Administrators.

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.

Builder Mode: There are some useful editor tweaks like making the active element more prominent in the structure panel. You might want to add this in by setting the Builder Mode to Custom, saving the settings and pasting the following CSS:

/* --- Make highlight of the active element in structure more prominent --- */

#bricks-structure .element.active>.structure-item {
    background-color: var(--builder-color-accent);
}

#bricks-structure .element.active>.structure-item input,
#bricks-structure .element.active>.structure-item>.title input,
#bricks-structure .element.active>.structure-item>.title i,
#bricks-structure .element.active .structure-item .more {
    color: #000;
}

#bricks-structure .element.active>.structure-item input::-moz-selection { /* Code for Firefox */
  color: #fff;
  background: #1a99e0;
}

#bricks-structure .element.active>.structure-item input::selection {
  color: #fff;
  background: #1a99e0;
}

#bricks-structure .element.active .structure-item:hover .actions .action .bricks-svg-wrapper path {
	fill: #111;
}

/* --- Turn off 0.5 opacity of element states svgs --- */

#bricks-structure .structure-item .element-states svg {
	opacity: 1;
}

/* --- Make "View on frontend" button always appear */

#bricks-toolbar li.new-tab {
	display: flex !important;
}

/* --- Make active class prominent */

#bricks-panel-element-classes .active-class.active input {
	background-color: var(--wp--preset--color--light-green-cyan);
	color: #000;
}

#bricks-panel-element-classes .element-classes li {
	background-color: var(--builder-bg-accent);
	color: var(--builder-color-accent);
}

Note that we are not changing the color scheme, so it will still be the default dark.

More editor tweaks can be found here.

Toolbar Logo Link: Dashboard in a new tab.

Structure Panel: Enable all the four options.

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.

Disable jQuery migrate: On.

Element ID & class: On.

CSS loading method: External files.

API Keys

Bricks has a handy Unsplash integration so stock images can be added quickly from within the builder.

You might want to obtain and enter its API key at the least.

Custom Code

Sitewide custom CSS and JS (ex.: Google Tag Manager) can be placed here.

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.

Templating

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.

Click on Settings (gear icon) → THEME STYLES → +.

Name it Global.

CONDITIONS → ADD CONDITION: Entire website.

GENERAL

Root Container Padding: 75px at top and bottom, 20px left and right.

Root Container Width: 1280px.

1.5 Beta and above: ELEMENT – SECTION
Padding: 75px at top and bottom, 20px left and right.

1.5 Beta and above: ELEMENT – CONTAINER
Width: 1280px.

COLORS

Set your colors/color palette if you have one.

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.

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.

We shall set up the template such that it will show content from the WordPress editor (if present) and Bricks (if present) one below the other.

By the end of this step, your structure should look like this:

We are going to

• add a “Page Header” section and set it to not be output on the static homepage.
• add a “Page Content” section and set it to not be output when no content is entered for this Page in the WP editor.
• add a section for rendering the content if the Page is built with Bricks. This is automatically conditionally output i.e., for Pages that are edited with Bricks.

Add a Section and Post Title element inside the section’s container.

Section’s background color: #e0e0e0.

Set/change the ID of the section to page-header. This can be done either by hovering on the section’s ID and clicking the edit icon or STYLE → CSS → CSS ID.

We are going to re-use this Section in other Templates. Therefore, click the save (floppy) icon with this Section selected and save it as “Page Header” while selecting “Section” as the Template type.

Container’s “Align cross axis”: Center.

Add another Section and change its ID to page-content. Add a Post Content element inside the section’s Container. Leave the Post Content’s Data source as the default “WordPress”.

Add another Post Content element at the root-level in the structure i.e., along-side the two existing Sections. Change Data source to Bricks.

Add the following in the child theme’s functions.php at the end.

You can access the above file for editing using (at least) two ways:

1. Appearance → Theme File Editor and clicking on the file name at the right whilst making sure you are editing the child theme.
2. using a cPanel file manager or a FTP client like FileZilla or Transmit.

// Render an element with "page-header" HTML ID if the specified condition is true.
// Condition: Page is not the static frontpage.
add_filter( 'bricks/element/render', function( $render, $element ) {
	// Check if this is a singular page
	if ( ! is_singular() ) {
		return $render;
	}

	// Get the element custom HTML ID
	$html_id = ! empty( $element->attributes['_root']['id'] ) ? $element->attributes['_root']['id'] : false;

	// Check if the element has the HTML ID "page-header"
	if ( $html_id && $html_id === 'page-header' ) {
		return ! is_front_page();
	}

	return $render;
}, 10, 2 );

// Render an element with "page-content" HTML ID if the specified condition is true.
// Condition: If the current Page has content.
add_filter( 'bricks/element/render', function( $render, $element ) {
	// if this is a not a static Page or the Posts page, return $render i.e., output the elements
	if ( ! is_page() && ! is_home() ) {
		return $render;
	}

	// Get the element custom HTML ID
	$html_id = isset( $element->settings['_cssId'] ) ? $element->settings['_cssId'] : false;

	// Check if the element has the HTML ID "page-content"
	if ( $html_id && $html_id === 'page-content' ) {
		$id = is_home() ? get_option( 'page_for_posts' ) : get_the_ID();
		
		return '' !== get_post( $id )->post_content;
	}

	return $render;
}, 10, 2 );

Blog (Posts page)

Let’s exclude the “Blog” Page from the Page Template.

Edit Page Template with Bricks and and set it to NOT apply to the 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.

If you wish to add the page header that shows “Blog” (or whatever is the name of your Page) as the heading, add a Template element. Select it and pick “Page Header” Template.

If you want to add this Template as an editable instead of as a single instance like the above so you can make changes say, to the heading text, press the folder icon near the top on the right, hover on the Template and click INSERT TEMPLATE.

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

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.

WooCommerce

Single Product

Main Shop page

Product Category and Tag Archives

Reference

https://wordpress.stackexchange.com/questions/121359/if-the-post-has-content