Bricks allows you to add your own custom code (PHP, HTML, CSS, JS) to various parts of your website.
- 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.
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.