Using WPCodeBox for Bricks-specific snippets

WPCodeBox is an excellent code snippets plugin if you are looking for an alternative to the child theme or a complementary tool to add code in your Bricks sites.

We shared some CSS snippets for improving the Bricks editor UX in our Bricks Builder Editor Tweaks article. Let’s see how these and others can be added using WPCB.

1. Click New Snippet.
2. Give it a Title, say “Bricks Editor CSS”.
3. Change the Type to CSS.
4. Add/paste your code. Here‘s what I use in all my Bricks sites.
5. Change Where to run the snippet from Everywhere to Custom and click Open condition builder.

Choose Custom PHP Condition and paste:

<?php 
bricks_is_builder_main();

bricks_is_builder_main function evaluates to true for the builder’s outer frame. Therefore, with the above custom condition, we are telling WPCB to run the code only in the Bricks editor’s outer frame. This code won’t run in the inner canvas (your actual Page/template).

There are some snippets that should be run on the Bricks canvas only, like adding outlines in the editor.

Here’s the condition for this:

<?php 
bricks_is_builder() && ! bricks_is_builder_main();

and lastly, as another application where the requirement is to run code only for admin users on the front end (like the adding outlines snippet on the frontend):

Here’s some relevant notes:

Both outer and canvas:

if ( bricks_is_builder() ) {
}

Only outer:

if ( bricks_is_builder_main() ) {
}

Only canvas:

if ( bricks_is_builder() && ! bricks_is_builder_main() ) {
}

On the canvas (the inner frame) & frontend, not the builder panel (outer stuff):

if ( ! bricks_is_builder_main() ) {
}

Only frontend:

if ( bricks_is_frontend() ) {
}

or

if ( ! bricks_is_builder() && ! is_admin() ) {
}