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.

Discount Code

25% off coupon code on WPCodeBox: WPDEVDESIGN

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

Note

Unfortunately, custom PHP conditions are not retained when code snippets are downloaded from the cloud as of v1.4.1 of WPCodeBox. As a workaround, you could paste the condition code in the Description field so you could copy and paste it.

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() ) {
}
Instant access to 390+ Bricks code tutorials with BricksLabs Pro

3 comments

  • rarodev

    I can't get it to work either.

    • A

      I updated the steps a little to make them up-to-date.

      Can you tell me what you are trying to do and what is not working?

  • Is it possible that this article is outdated? I think the options on "Where to run snippet" have changed...

Leave your comment