Using Shortcodes in CSS

Shortcode rendering in CSS and JavaScript is enabled by default. This allows shortcode values to be processed correctly and helps prevent shortcode markup from being flagged as an error. This feature can be used to replace a value in custom CSS or JavaScript within a Beaver Builder layout.

Enable/Disable

You can manage this setting from your site’s WordPress Admin Dashboard:

1. Access your site’s WordPress Admin Dashboard.
2. Navigate to Settings > Beaver Builder.
3. Click the Advanced tab.
4. Locate the Render shortcodes in CSS/JS option.

info

You can also control this feature using the fl_enable_shortcode_css_js filter in your child theme’s functions.php file:

add_filter("fl_enable_shortcode_css_js", "__return_true"); 

Examples

In the following examples, we demonstrate how to use field connection shortcodes in CSS, but any shortcode can be used.

[wpbb site:url] in CSS

Suppose you have CSS for a background image for a page, such as:

body {
  background: url("https://my-website.com/wp-content/uploads/2022/10/my-image.jpg");
}

By using the Beaver Themer shortcode [wpbb site:url] to replace your site URL, you make it easier to migrate the code or the entire site to a new domain.

body {
  background: url("[wpbb site:url]/wp-content/uploads/2022/10/my-image.jpg");
}

Conditional Logic

You can use field connection conditional logic in your CSS. In the example below, we can change the color of a post title based on whether the Advanced Custom Field field value is true or false.

.fl-post-title {

    [wpbb-if post:acf type='text' name='FIELD NAME' exp='equals' value='SOME VALUE']

        color: red;

    [wpbb-else]

        color: yellow;

    [/wpbb-if]

}