Turn Beaver Builder Global Settings into CSS Variables

Beaver Builder

Beaver Builder’s global settings contain valuable information about your site’s design framework including breakpoints, spacing, content width, etc. This snippet automatically converts all those settings into CSS variables, making them available throughout your site for advanced CSS operations.

The snippet creates variables with a consistent naming pattern: --fl-builder-[setting-name]. For example, the global row width becomes --fl-builder-row-width. It also properly handles the responsive settings by placing the options that have responsive settings inside the appropriate media queries.

You can view all of the variables you have to work with by going into DevTools and inspecting the :root. Here is an example of the kinds of things that will be output:

CSS
:root {
    --fl-builder-row-width: 1200px;
    --fl-builder-large-breakpoint: 1200px;
    --fl-builder-medium-breakpoint: 992px;
    --fl-builder-responsive-breakpoint: 767px;
    --fl-builder-row-padding-top: 100px;
    --fl-builder-row-padding-bottom: 100px;
}
@media (max-width: 1200px) {
    :root {
        --fl-builder-row-padding-top: 80px;
        --fl-builder-row-padding-bottom: 80px;
    }
}
@media (max-width: 992px) {
    :root {
        --fl-builder-row-padding-top: 60px;
        --fl-builder-row-padding-bottom: 60px;
    }
}

Notice how the responsive values use the same variable names – this allows them to automatically override the base values at different breakpoints. You can simply use var(--fl-builder-row-padding-top) anywhere in your CSS and it will be automatically responsive!

Example Use Case

Here is a powerful example of how you can use these variables. You can make a full width row that has content going full width on the right side, while the left side is aligned with the rest of your fixed width rows:

CSS
.full-width-row_left-contained {
    padding-left: calc((100vw - var(--fl-builder-row-width)) / 2 - var(--fl-builder-row-margin-left));
}

The beauty of doing it this way is these variables update automatically whenever you change your global settings in Beaver Builder, ensuring your custom CSS always stays in sync with your builder settings.

On to the Code!

To get started, add this code to your theme’s functions.php file or a custom functionality plugin:

PHP
/**
 * Output Beaver Builder global settings as CSS variables
 */
add_action('wp_enqueue_scripts', function () {
    if (is_admin() || !class_exists('FLBuilderModel')) {
        return;
    }

    wp_register_style('fl-builder-global-vars', false);
    wp_enqueue_style('fl-builder-global-vars');

    // Get Beaver Builder global settings and responsive breakpoints
    $settings = FLBuilderModel::get_global_settings();

    $breakpoints = [
        'large' => (int) $settings->large_breakpoint,
        'medium' => (int) $settings->medium_breakpoint,
        'responsive' => (int) $settings->responsive_breakpoint,
    ];

    // Convert keys to CSS variable format
    $format_css_var_name = function ($key) {
        $css_var_name = str_replace('_', '-', $key);
        $css_var_name = str_replace('-responsive', '-small', $css_var_name);
        $css_var_name = str_replace('-margins', '-margin', $css_var_name);
        return sanitize_html_class($css_var_name);
    };

    // Get the correct unit for a given key and breakpoint
    $get_unit_for_key = function ($key, $global_settings) {
        $matches = [];
        preg_match('/^(?<base>.+?)(_top|_right|_bottom|_left)?(_(?<bp>large|medium|responsive))?$/', $key, $matches);

        $base = $matches['base'] ?? $key;
        $bp = $matches['bp'] ?? null;

        if ($bp) {
            $bp_unit_key = "{$base}_{$bp}_unit";
            if (isset($global_settings->$bp_unit_key) && $global_settings->$bp_unit_key !== '') {
                return $global_settings->$bp_unit_key;
            }
        }

        $base_unit_key = "{$base}_unit";
        return isset($global_settings->$base_unit_key) && $global_settings->$base_unit_key !== ''
            ? $global_settings->$base_unit_key
            : null;
    };

    // Initialize variable breakpoint buckets
    $buckets = ['base' => []];
    foreach (array_keys($breakpoints) as $bp) {
        $buckets[$bp] = [];
    }

    // Settings to exclude from CSS output
    $ignore_settings = [
        'default_heading_selector',
        'responsive_enabled',
        'row_content_width_default',
        'row_width_default',
        'auto_spacing',
        'css',
        'js',
        'show_default_heading',
        'responsive_base_fontsize',
        'color_scheme',
        'undefined',
    ];

    // Loop through settings and sort them into breakpoints
    foreach ($settings as $key => $value) {
        if (
            is_object($value) ||
            is_array($value) ||
            in_array($key, $ignore_settings) ||
            strpos($key, '_unit') !== false
        ) {
            continue;
        }

        // Determine which breakpoint this key belongs to (based on suffix)
        $bucket = 'base';
        foreach (array_keys($breakpoints) as $bp) {
            if (strpos($key, "_{$bp}") !== false) {
                $bucket = $bp;
                break;
            }
        }

        if ($value === '') {
            continue;
        }

        $css_var_name = $format_css_var_name($key);

        // Strip breakpoint suffix from CSS variable name so they override in media queries
        if ($bucket !== 'base') {
            $css_var_name = str_replace(['-large', '-medium', '-small'], '', $css_var_name);
        }

        if (is_numeric($value) || $value === '0' || $value === 0) {
            if (strpos($key, 'breakpoint') !== false) {
                $value .= 'px';
            } else {
                $unit = $get_unit_for_key($key, $settings);
                if (!$unit) {
                    continue;
                }
                $value .= $unit;
            }
        } else {
            $value = sanitize_text_field($value);
        }

        $buckets[$bucket][] = "--fl-builder-{$css_var_name}: {$value};";
    }

    // Build base :root CSS
    $css = ":root {\n" . implode("\n", $buckets['base']) . "\n}\n";

    // Output media queries dynamically based on breakpoints
    foreach ($buckets as $bp => $vars) {
        if ($bp === 'base' || empty($vars)) {
            continue;
        }

        if (isset($breakpoints[$bp])) {
            $css .= "@media (max-width: {$breakpoints[$bp]}px) {\n  :root {\n" . implode("\n", $vars) . "\n  }\n}\n";
        }
    }

    // Inject final CSS into the page
    wp_add_inline_style('fl-builder-global-vars', $css);
});

Found this
Snippet
useful?

Consider buying me a coffee!  ☕️  Your support helps me create more free snippets for the WordPress community.

Buy me a coffee