Builder CSS Manager

Overview

Builder CSS Manager for Elementor helps you find, review, and maintain custom CSS added inside Elementor.

Requirements

• WordPress 6.5 or newer
• PHP 7.4 or newer
• Elementor
• Elementor Pro

Installation

1. Upload the builder-css-manager folder to /wp-content/plugins/.
2. Activate Builder CSS Manager for Elementor in the WordPress Plugins screen.
3. Confirm that Elementor and Elementor Pro are active.
4. Open Builder CSS Manager in the WordPress admin menu.

Audit Dashboard

The main dashboard scans Elementor content and lists every page, post, or supported entry that contains widget-level custom CSS.

What You Can Do

• See how many entries contain custom CSS.
• See how many widgets currently use custom CSS.
• Expand any entry to inspect matching widgets.
• Open a quick modal to review the CSS snippet.
• Jump directly to the frontend page or Elementor editor.

Best Use Cases

• Auditing legacy Elementor builds before redesign work.
• Finding scattered CSS that should move into a shared stylesheet.
• Reviewing custom CSS usage before handing a site off to another team.
• Spot-checking widget CSS during QA.

Global CSS Editor

The Global CSS Editor submenu updates the active Elementor Site Settings kit.

What It Does

• Loads the current Elementor global CSS.
• Edits it in a syntax-highlighted CodeMirror editor.
• Saves the CSS back to the active Elementor kit.
• Regenerates Elementor’s CSS file after save.

Recommended Workflow

1. Use the audit dashboard to review widget-level CSS first.
2. Move repeated selectors into global CSS when that makes maintenance easier.
3. Save changes in the Global CSS Editor.
4. Recheck the relevant pages on the frontend.

Elementor Editor Highlights

When you open Elementor, widgets that already have custom CSS are visually outlined and marked with a small CSS badge. This makes it easier to find widget-specific styling while editing a layout.

Uninstall Behavior

When the plugin is deleted from the Plugins screen, it removes its updater transient cache.

Developers

Builder CSS Manager for Elementor includes a small set of hooks for extending the audit data and the global CSS save process.

mbbcm_posts_with_custom_css

Filters the final audit results array before the dashboard renders.

add_filter(
    'mbbcm_posts_with_custom_css',
    function ( $results ) {
        return array_values(
            array_filter(
                $results,
                function ( $item ) {
                    return 'page' === $item['post_type'];
                }
            )
        );
    }
);

mbbcm_detected_custom_css

Filters the detected widget CSS string before Builder CSS Manager records a widget as having custom CSS.

add_filter(
    'mbbcm_detected_custom_css',
    function ( $css, $element ) {
        if ( ! empty( $element['widgetType'] ) && 'heading' === $element['widgetType'] ) {
            return trim( $css );
        }

        return $css;
    },
    10,
    2
);

mbbcm_global_css_before_save

Filters the submitted global CSS string before it is saved to the active Elementor kit.

add_filter(
    'mbbcm_global_css_before_save',
    function ( $css ) {
        return "/* Managed by custom integration */n" . ltrim( $css );
    }
);

mbbcm_global_css_saved

Runs after global CSS is saved and Elementor’s CSS file has been regenerated.

add_action(
    'mbbcm_global_css_saved',
    function ( $kit_id, $css_content, $settings ) {
        error_log(
            sprintf(
                'Builder CSS Manager updated kit %d with %d characters of CSS.',
                $kit_id,
                strlen( $css_content )
            )
        );
    },
    10,
    3
);