Bricks allows you to add your own custom code (PHP, HTML, CSS, JS) to various parts of your website.
Global CSS & JavaScript
You can add your own Custom CSS & Custom JavaScript globally from your WordPress dashboard under Bricks > Settings > Custom Code.
Custom scripts (JavaScript) can be added in three different (document) locations:
- Header scripts: Adds your scripts right before the closing </head> tag. This is where you want to copy & paste tracking scripts, etc.
- Body (header) scripts: Adds your scripts right after the opening <body> tag.
- Body (footer) scripts: Adds your scripts right before the closing </body> tag.
Page-Specific CSS & JavaScript
To apply custom CSS & JavaScript to a specific page edit this page with Bricks, and go to Settings > Page Settings > Custom Code. There you can add your custom CSS & JS that should only be applied to the page you are currently editing.
Element-Specific Custom CSS
You can extend the default styling of any element inside the builder.
First, edit the edit for which you want to add your own custom CSS.
Then under the “Style” tab open the “CSS” control group.
There you can find the Custom CSS setting.
Use the root placeholder to target the currently editing element. It’ll automatically be replaced with whatever the final ID of this element is going to be.
The screenshot on the right, for example, is adding a 1px width red border to the element that is being edited.
Code Element (PHP, HTML, CSS, JS)
The “Code” element allows you to execute your own code (PHP, HTML, CSS & JS) anywhere on any page.
By default, the code added to the Code element is displayed as a code snippet.
In order to execute your code, you need to first enable “Code Execution” for the appropriate user role or user in your WordPress dashboard under “Bricks – Settings – Builder Access” (see the screenshot below).
Make sure to only enable code execution for users & user roles you trust 100%.
Once enabled you can start adding the “Code” element wherever you want to execute your code. You’d usually execute PHP & HMTL code, as CSS & JS can be added much easier via the solutions outlined above.
Once you’ve added the Code element to your page, you can add your custom code to it (as shown in the screenshot below).
To run/execute the code in the builder, enable the “Execute Code” setting, then click the “Reload” icon at the top-right of the code editor once you’ve finished adding your code.
