Introduction
Bricks Builder is a new theme that includes a page builder. Version 1 was released in March 2021 and it has a surprising number of features. It includes a theme template builder, a page builder, and works with Custom Post Types and custom fields. In this review I will do a high level overview of Bricks, but I am mainly going to focus on templates, or the “theme builder” features.
This post is part eleven of a series looking at Custom Post Types and the theme building functionality of page builders. In part one I created a Custom Post Type using CPT UI and Advanced Custom Fields. If you are unfamiliar with Custom Post Types and want to follow along, then take a look at that post first. In this walk-through and review I going to use the Custom Post Type created in part one as a starting point for creating the single and archive templates for it using Bricks.
Video Version
Bricks Overview
This is a premium only offering available from the Bricks Builder website. Like most WordPress page builders, the editing experience is pretty close to WYSIWYG.
Unlike some builders, the output on the front-end is well optimized and the website touts good speed scores out of the box.
Bricks version 1 launches with good custom field support. It works with ACF, Pods and Meta Box. Toolset is on the roadmap.
Speaking of roadmap, Bricks has an open feature request board where people can add suggestions and vote. The developers say they want to grow the product based on user feedback.
There is a knowledge base with help articles and videos. There is a decent level of help for getting started.
There is introductory pricing for 1 or 1,000 sites. It is a lifetime license and during the early launch stage, the money back guarantee is extended. They will post when it ends, but for the time being they would like to make it possible for people to try it out, give feedback, and follow along to see how it develops.
Setup
I have a starter site that I use for demos. It has a bunch of posts and a books Custom Post Type. We’ll see those below. There is also a default “main” menu setup.
Theme Default Layouts
I installed the Bricks theme and this is what the blog / archive looks like on the front end by default. I have some test posts created and it shows the blog in a two column grid by default. There is no header or footer.
If we look at a post we see at the top that it has stretched the featured image full width and over that there is the post title and post meta. The content is boxed.
At the bottom of the page there is the author avatar, then social share buttons, then related posts by category, the comment form, and then post navigation for the previous and next posts.
Given that the theme is supplying a default single and archive layout, I’m not sure why it doesn’t include a simple header and footer.
The Book Custom Post Type
Here are the plugins installed. I used CPT-UI and Advanced Custom Fields to create a Custom Post Type called Books and an associated taxonomy called Genres. This process is covered in the part one of the series. WP Reset Pro is used to reset the site between testing sessions.
I added several book records.
And here is a single book record where on the right you see the Genres custom taxonomy and the featured image. Book covers have a portrait orientation, which require a different type of layout. Note there are two custom fields at the bottom, one which has the URL to the author’s website and the other is a photo of the author. We will try to include these on the template for the single book page.
This is the default book archive, the same layout as the blog archive.
And here is the default book single page. There is no layout at all.
Bricks Settings
Bricks has several pages for accessing features and option settings. The Getting Started page has some overview information and links to help.
The Template tab is where you manage the templates. Bricks is a theme builder as well as a page builder and the expectation is that you are going to create the theme template layouts yourself, or import some from the library. The lack of a header and footer is a big hint to get started with that. We will return to this area after going through the rest of the settings screens.
The Settings page has several tabs to organize the options. On the General tab the Post Types section is to set which post types you want to use the page builder on. There is some limited Gutenberg integration. The Gutenberg Data section has two options, to bring Gutenberg data into Bricks and the over way, to save Bricks data as Gutenberg blocks. On this screen I checked these two as they seem to provide the most bi-directional compatibility. I also checked to allow the Admin to upload SVG images.
The Builder Access tab is where you can enable or restrict access on a site with multiple contributors.
On the Templates tab most of the settings are related to either sharing your templates so you can access them on your other sites, share them with other people, or access other people’s templates. The one exception is the “Disable Default Templates” option. By default when you create a header and footer template it will be applied site wide, this option turns that off in the event you want to use multiple headers and footers.
On the Builder tab there are some options for builder behavior. I changed the Toolbar Logo Link to go to the home page.
The Performance tab is really just a convenience to make it easy to disable some default WordPress behavior that many people don’t use anyway.
The API keys options are for integrating with 3rd party services.
Custom Code is where you can upload CSS and JavaScript for sitewide use. There are places in the builder where you can add code for particular pages.
You can upload custom fonts on the Custom Fonts page. When you click the Add New button there is a screen to upload them and a help icon with a link to a knowledge base article about how to do it.
Bricks has a default sidebar defined, but you can also create custom sidebars should you need them.
There is a System Status page, which I think should be called System Information.
I entered the license on the License screen.
Quick Tour of the Editor
Here is a “map” of the editor with a reference table underneath.
When you drag an element onto a blank canvas, or add a section to the canvas then you automatically get a section, row, and column also. Here I added a heading. If you hover over the bottom right corner you see the section controls, which are yellow / gold.
If you hover over the top right there are the row controls, which are purple.
If you hover over the top middle you get the column controls, which are blue.
And if you hover over the bottom middle then you get the element controls, which are green.
When you click on an element then the list of available elements in the left panel changes to a properties panel. If clicking on an element doesn’t bring up the properties panel then you can click on the “pencil” icon. The properties panel has two tabs. The Content tab lists options related to the content. Note the subtle little dot next to the Heading and Tag labels. That tells you a setting was made for that. You can change text by clicking on in in the canvas or on the properties panel.
Here is the Style tab. The sections and options in the Style tab are pretty consistent across elements.
Looking at the buttons on the top left toolbar, the folder icon, second from the left, opens the Structure panel. The icon on the right expands everything.
Note the three dots on the right side of each item in the structure. Hovering over those will show the settings for that item.
The flag icon, which toggled, means that any properties you change apply to the hover state of the item.
The Pages panel shows you the post types you’ve allowed for editing and you can see the created pages or create a new one.
We don’t have any revisions yet, but the clock icon opens that panel. When there are revisions you will see them in a list and you can revert to one of them if you need to.
The Settings panel has a couple of subpanels.
The Theme Styles subpanel has a few general sections and then a section for each element in the element list. This is where you create your default settings for everything. These are editor wide. Note the Conditions section. Here you set what you want these theme styles to apply to.
Under Settings there is also a Page settings section. Here you can set general settings, SEO settings, social media settings, as well as add custom CSS and add JavaScript that applies just to that page.
The last section under Settings is for Template Settings. It is currently showing some Header settings because the template open in the editor is for a header. The Conditions section is important because that is where you tell Bricks what the template will be used for. There is also some option to select the content that will be used for preview purposes in the canvas.
Creating Some Site Templates
Site Header
I go to the Bricks Template screen and click Add New Template. I give it a name of Site Header. On the right side there are three panels related to Bricks templates. The first is where you select the type of template. I pick Header. Below that are two input areas, one for template tags and the other for Template Bundles. So, you might tag and bundle a template if you were creating a design set. For a simple site I don’t think you need to use those.
I published it and clicked Edit with Bricks. We are taken to a blank editor window, but Bricks knows we are creating a header.
On a high level, I want to add a full width section and give it a background color. Then in the column add a logo on the left and a menu on the right in a row with boxed content. I click the button in the middle of the canvas to add a section. Bricks knows it is a header and adds a header section.
What’s different about a header section is it has these header options. I access those by clicking on the Header Settings button. Most of these settings are for a sticky header, and I don’t need that, so I leave it all as is.
I access the section settings by clicking on the control in the lower right side. Under Layout I toggle it to full width.
Then under the Background settings I set a dark blue background color.
I then go to the elements panel and search for logo.
I drag that into the row and in the logo settings I go and upload a logo that I prepared. I set it to a medium size. I think you’d want to fill in the box for logo text also.
I then search for the menu element.
I drag and drop that into the row. It landed to the left of the logo, but I dragged it to the other side. In the drop down I selected the main menu.
Unfortunately you cannot see the menu and it is pushed next to the logo. In the settings for the menu element, I go to the Typography options for the top level menu, make the text size a bit bigger, and set the color to a light color.
I went to the Layout settings for the column and set the Justify Content to Space Between and align items to center.
Here is the finished header.
Site Footer
I repeated the process for the footer. First I created the template in the admin, choosing that it would be type footer.
Then I added a section, set it as full width and made the background the same blue as the header background. Then I added a text element and put in the copyright notice, and set the text color to a light color in the Typography settings. Footer done.
Creating the Home Page
I created a new page and named it Home. I then went to the Admin / Settings / Reading page and set that new page to be the home page.
I then went back to the list of pages and clicked on the Edit with Bricks link.
In the Bricks editor I added a section and set the top and bottom margin to 70px.
I searched for the Posts element.
I dragged and dropped that into the section. I then checked under the Posts panel to make sure the Post Type was Posts.
I toggled the Navigation on.
I saved and this is the final on the front. Looks good!
I clicked on one of the posts and the default post single looked fine.
Creating the Book CPT Templates
The Book Single Template
I created a new template for the book single.
Here are the Template Settings for the book single.
And here are the preview settings.
I added an image into the left column and set the dynamic data option (the lightening bolt) to the featured image.
At the bottom of the list of elements there are some for the single template. Odd that there is not one for the Featured Image.
I dragged the Post Title, Meta Data, and Post Content elements into the column on the right. This is what it was looking like.
I then dragged an Image element under the book cover image. This would be for the author’s photo custom field. I selected the ACF Author’s Photo field as the dynamic source.
I set the size of the photo.
I added a button under the author’s photo. I changed the text, style, and link options so that it picked up the custom field with the link to the author’s website.
I positioned the button. I didn’t see a way to center it in the column, so I added some padding to the left side. That doesn’t seem an ideal way to go about it.
After saving, I went to look at a book record on the front. Looking good.
The Book Archive Template
As previously, I created a template.
In the editor, as before, I added a section and gave it a top and bottom margin of 70px. Then I added a Heading element with the words “Book Reviews.”
Then I added the Posts element and set the post type to books. I also selected to show 9 items.
I first tried to use a list layout, but was unable to show the image with the correct aspect ratio and keep the correct gap between the image and the other fields. So I switched to a grid layout with 3 columns.
I also selected the Medium Large image.
I clicked on the Fields panel and then the Excerpt item and increased it to 50 words.
I added the Read More field.
Underneath the list of fields there is a settings section for each field. I adjusted the settings for the Read More field.
I noticed that some of the images were different sizes. I think that the original images are that way.
I also noticed on mobile that the image was not centered in the column. I could center the content, but that applies to all of it and the excerpt would also be centered, which looked odd.
So at the bottom of the Style tab, I opened the CSS panel and added a bit of CSS to center and size those images.
I saved and went to the front-end. Looks good.
Discussion and Conclusions
There are some things I noticed while working with Bricks. Here are the cons, pros, and observations.
Con – Template Conditions Don’t Make Sense
Here is what I mean. On the main Templates page there is a place where you set the Type of template it will be. All “Theme Builders” have two levels for defining what the template applies to. On the screen where you create a template there is only 1 level exposed. It would make life easier if we set the conditions in one place at the same time. For example, here I’ve chosen that it will be a “Content” template.
Then when I go into the builder I go to the Settings area and click the Template settings. It should only have the options that would apply to a content template. But look, I can now set it as an Archive.
I do that. I add a condition to set it as an Archive for books.
Guess what, the setting for “Content” still shows as the selection on the first screen!
Con – Image Sizes in the Post Module are Limited
As we saw when trying to create the Book archive, the Portrait orientation of the featured image was difficult to accommodate. There should be an “Original Aspect Ratio” option that then sets the width of the image to fit in the column and lets the height size automatically.
Missing – There Is No Loop Builder
Because of there is no loop builder, there is no way to add a custom field to an archive list. Simple sites can get by without this, but advanced sites will need this feature. In previous installments of this series, the ability to add custom fields to the archive has been a test to separate the simple implementations from the advanced ones. The ability to create your own loop output is a power feature that Toolset and Oxygen, for example, offer and that allows you to create more advanced content views.
Missing – No Conditional Display Options
There are no conditional display options. This is another feature that is essential for advanced sites. A loop builder and conditional display options help to make sites have more application-like functionality.
Missing – No PHP Element
It would be very nice if there were a PHP Element. Bricks has elements that allow you to add custom CSS or JavaScript, but not PHP. Oxygen and Toolset, for instance, have this and it allows you to access the many WordPress PHP functions as well as to use the output functions of ACF and Metabox for displaying repeater fields and flexible content fields.
Observation – SEO Options May Not Be Sufficient
Bricks has some SEO options. They area a nice idea, but I wonder if they are sufficient. I assume if they are left blank they are not output, so there is no issue, but I’m thinking that in this case it might have been better to leave it for a dedicated plugin.
Observation – Design Sets and Pre-Designed Library
I like the idea of custom Theme Styles and of being able to import entire Style Kits, the but ones provided at launch are pretty limited. I suspect these are placeholders for the time being. Each design set includes a list of all of the elements. I hope that those are built using HTML elements so that if you set, say all of your heading options, that the elements use heading tags and will inherit those choices.
Pro – Lots of Extras and Details
Bricks has a large number of useful features that go beyond the basic builder. For example, the ability to create custom sidebars that you can use in your pages and templates. There are optimization options for turning off seldom used WordPress features, many of them old and outdated, but still on by default. You can easily add custom code either sitewide or by page / template without needing to add another plugin or use code snippets. Also, there are a fair number of third-party integrations for the initial launch.
Pro – The Builder Is Full Featured and the Interface is Responsive
There are a good number of elements in the list, more than 50 available at launch, and they are well organized. Drag and drop worked well. I liked the ability to pin elements to the top of the list. The interface was fast and there was not a slow-up as sometimes happens in builders with a lot of elements or content. I liked the way you can quickly switch between device size breakpoints.
Pro- Accessing Dynamic Data and Custom Fields is Easy
There are several ways to access and use dynamic data and custom fields. You can use the elements, use the lightening bolt, or type in curly braces. No matter which way you do it, it is easier to access the custom fields than other builders. Bricks supports ACF, Meta Box, and Pods (with Toolset on the roadmap). It is nice that users are not locked into only one option.
Pro – Was able to Create the Desired Singe Book Template
As they say, the proof is in the pudding. I was able to quickly and easily create the single template for the book Custom Post Type. I did have to use some CSS to center and size the images, but I’m not sure if that was due to a lack in the editor or my unfamiliarity with it.
Conclusions
The Bricks Theme gets a lot of points for creativity. It feels like the developers looked at a lot of builders and picked the best features from each. There were a few cons and things missing, but the Bricks team has extended the money back guarantee until any initial-release bugs or major pain points are addressed. This gives us plenty of time to try Bricks and follow along with development.
Interaction with the developer has been positive and they are listening to user feedback. There is an active Facebook group where users can ask questions and share. The initial launch of Bricks got a lot of attention, perhaps more than the developers anticipated. They now have the challenge to build the team and manage the transition so that Bricks can live up to its potential. Despite the rough edges, I’m excited about Bricks and looking forward to seeing it grow. During the launch phase Bricks is very aggressively priced and I encourage people to take a look to see if it might meet your site building needs.
