Table of Contents:
Bricks Builder Is a WordPress Theme and page builder. You can build custom website themes using Bricks. In my opinion, Bricks builder is an absolute powerhouse for WordPress because it combines all the functionalities of a theme and a page builder. That means you can run a child theme alongside Bricks Builder to enhance the capabilities of your website. In this post we will talk about what the Bricks child theme is used for and some practical use cases for installing a child theme along side Bricks Builder. Let’s dive in!
What Is a Child Theme in WordPress?
A child theme in WordPress is a theme that is installed alongside a parent theme. The child theme relies on the parent theme for its core design elements and functionality, but you can write your own custom code (PHP, JavaScript, and CSS) and keep it stored nice and safe in the child theme.
It is a best practice at my agency that any code developed to extend Bricks Builder or the website is stored in the child theme files.
The primary reason to use a child theme is to safely extend the functionality and customize the appearance of your WordPress website without modifying the parent theme’s core files.
This separation ensures that any custom code or modifications you make are preserved independently of the parent theme.
By keeping your custom functions, styles, and element templates in the child theme, you prevent them from being overwritten when the parent theme is updated. This way, you can rely on the parent theme developers to maintain the core functionality, security, and updates, while you focus on tailoring the site to your specific needs.
What Is The Bricks Child Theme?
The Bricks child theme comes with the following files:
- functions.php file
- style.css file
- custom title element
- theme image file
Functions.php file
The functions.php file is used to add your own custom functions that you can call inside Bricks Builder and throughout your WordPress Site. By writing and storing your own code in the child theme, you can make sure not to break any of the functionalities of the Bricks Builder core files in the parent theme.
I’ve been working on a project that loads chart.js into my website. This is a perfect example where you’d want to use a child theme.
I store the chart.js library files on my server and call it into my child theme so I can make custom charts and graphs on my website using Bricks Builder!
style.css file
The style.css file in your bricks child theme serves two main purposes:
- Theme Information: At the top of the style.css file in a child theme, you need to include a comment block with some key information. This block should have details like the version of your child theme, who created it, a short description, and other important notes. This information helps WordPress know that your child theme is connected to a specific parent theme and ensures it works correctly on your site.
- Custom Style Rules: you can also write custom CSS code to change the appearance of your website. So if you want your section backgrounds to be a certain color, or add fluid Font styles to your headings in paragraphs, the style.css file is where you can store that information and apply at globally to your entire website.
Custom Title Element
The custom title element is included as an example of how you can extend Bricks Builder with a custom title that is loaded into the builder. This element isn’t necessary for the child theme to function. It’s purely an example of what you can do to extend Bricks Builder.
Theme Image Files
The theme image is called screenshot.png and is used to differentiate between the core theme and the child theme when your viewing your WordPress themes in the Appearance –> Themes section of the WordPress Admin.
Benefits of Using a Child Theme with Bricks Builder
The main benefit of using a child theme is the ability to preserve your own customizations even though Bricks Builder has released a new version of the parent theme and builder.
If you were to extend the Bricks parent theme, any custom code you added would be lost every time you update the Bricks parent theme.
The child theme is not updated when you update the Bricks parent theme. So you get to keep all your customizations running just as they were even though the Bricks team released a new version of the builder with new functionalities.
Bricks Code Element Vs Bricks Child Theme
You can execute code in two ways when using Bricks Builder:
- writing code in your child theme
- writing code in the Bricks code element
The Bricks team is done a great job by making the code element as secure as possible. In the current version of Bricks, you have to manually review and sign every bit of code you write using the code element. This forces you to manually look at each codes snippet and decide if you wrote it and it’s legitimate. When performing a code review, if you see some code that doesn’t look right, your site might have been hacked and an attacker was trying to run malicious code. The new code review and code signature workflow helps mitigate some of the risk associated with the code element and code being stored in your database. More on that below.
Details About the Bricks Code Element
Bricks builder allows you to write and compile PHP, CSS, and JavaScript directly in the builder. For PHP code, the code is processed by the server and the results are displayed on the front of your website. The JS and CSS code is loaded into the frontend of your website since they are client side languages. All of the code entered into the code element is stored in your WordPress database for a given post or template.
When you store code in the WordPress database, especially PHP, you open yourself up to some potential security issues.
For example, if a hacker is able to gain access to your database, they can modify PHP stored in the database and change it to run malicious code.
It is usually much easier to gain access to the WordPress database than it is to your server. This is because anyone can create a plugin that runs on WordPress. This reminds me of a quote from Dr. Ian Malcolm from Jurassic Park:
“Your scientists were so preoccupied with whether or not they could they didn’t stop to think if they should”
That means even though people could be talented programmers that create great plug-ins, they might accidentally create a security vulnerability that gives hackers access to your database. This is much less likely with Linux servers…although not impossible.
The code element is a great tool for prototyping and testing your code. My advice to users developing with Bricks is to test code and new ideas using the builder’s code element. Then, move that code over to the child theme once you are done testing.
Details About the Bricks Child Theme
The difference between the Bricks code element and the Bricks child theme is that code in your child theme is stored directly in your file system on your server. The code in your child theme is not stored in your database at all.
I think this reason is why Bricks is so powerful! It’s a best practice to store code in your child team rather than in the database, and Bricks allows you to do that seamlessly inside WordPress.
The downside of the child theme is it requires a little bit more programming knowledge and skill compared to the code element.
For example, if you write some PHP in the functions.php file, it is loaded site wide unless you add a condition in the code to only run on certain post IDs, post types, or other WordPress locations.
If you write code using the code element inside bricks builder, it only runs on that specific page, or if in a template, where a template is conditionally applied.
I think it is worth it to spend a bit of time learning how to write code in the child theme rather than use the code element inside the builder.
Enqueue CSS and JavaScript With The Bricks Builder Child Theme
If you want to include a custom style sheets or JavaScript libraries, the best way to bring those libraries into your website is by enqueueing them from your child theme like so:
add_action( 'wp_enqueue_scripts', function() {
// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
if ( ! bricks_is_builder_main() ) {
wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
}
} );In simple terms, enqueuing a file means to include it on your website’s frontend for use in the browser. If you want to add a map to your website, you may want to enqueue the Leaflet JS library or Mapbox GL JavaScript Libraries.
You can also write your own JavaScript code, save it to a file on your server, and enqueue it using the Bricks child theme. You can see this in action on the Bricks Builder Mortgage Calculator product demo. Here I enque chart.js and my own custom JS code that will power the charts, graphs, and tables. Pretty cool!
Conclusion
The beauty of Bricks Builder is that it is a WordPress Theme plus a page builder. That means you can build beautiful website with Bricks Builder, and then extend your website with custom functionality using the Child theme. The Child theme is the best place to store your custom functions because its more secure than using the code element inside the builder. So, if you are a Bricks user and want to extend your website with custom code, make sure to learn all about child themes and start using the Bricks child theme today!
As always, if you need any help, please reach out and schedule a short time to talk about your project.