Using WPCodeBox for Bricks-specific snippets

Updated on 9 May 2024

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.

Adding CSS in Bricks editor

1. Click New Snippet.
2. Give it a Title, say “Bricks Editor CSS”.
3. Change the Type to CSS.
4. Click Open condition builder and Add Condition.
5. Choose Custom PHP Condition for the Location and set it to

<?php

bricks_is_builder_main();

Click Save and close.

Add/paste your CSS code.

Here’s some sample code that highlights the current element in the structure panel:

/* --- Make highlight of the active element in structure more prominent --- */

#bricks-structure .element.active>.structure-item {
    background-color: var(--builder-color-accent);
}

#bricks-structure .element.active>.structure-item input,
#bricks-structure .element.active>.structure-item>.title input,
#bricks-structure .element.active>.structure-item>.title i,
#bricks-structure .element.active .structure-item .more {
    color: #000;
}

#bricks-structure .element.active>.structure-item input::-moz-selection { /* Code for Firefox */
  color: #fff;
  background: #1a99e0;
}

#bricks-structure .element.active>.structure-item input::selection {
  color: #fff;
  background: #1a99e0;
}

#bricks-structure .element.active .structure-item:hover .actions .action .bricks-svg-wrapper path {
	fill: #111;
}

Save the snippet and enable it.

Open Bricks builder editor page or reload if you already have one open, make sure there is at least 1 element. Select any element and you should see it highlighted like this:

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).

Bricks editor canvas-only code

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() ) {
}