📚 ❓ How to get the current kit stylesheet to enqueue on non-Elementor pages?

[mbaierl]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro )

What problem is your feature request going to solve? Please describe.

Any idea how I can get the URL of the Elementor Kit CSS file, so I can include it in other locations?

i.e. https://yourdomain.com/wp-content/uploads/elementor/css/post-1234.css?ver=1661249327

which contains

.elementor-kit-11995 {
--e-global-color-primary: #2B87DA;
--e-global-color-secondary: #22E7DC;
--e-global-color-text: #191919;
--e-global-color-accent: #E4FF43;
--e-global-color-667d543: #C2C3C4;
...
PHP Code would be amazing.

Describe the solution you'd like

The Support from https://wordpress.org/support/topic/elementor-kit-css-file/ sent me here.

Describe alternatives you've considered

No response

Additional context

No response

[nicholaszein]

Hi @mbaierl!

Thank you for posting this question here, and apologies for the delay. 🙏

As we continue to organize GitHub issues, and separate Feature Requests from Issues by migrating them to Discussions, I stumbled upon yours.

Unfortunately, we currently don't have an API for fetching the current kit CSS path, however, you can try the following code snippet:

// Hook into wp_enqueue_scripts to enqueue the kit styles on non-Elementor pages
add_action( 'wp_enqueue_scripts', 'custom_enqueue_elementor_kit_styles' );
function custom_enqueue_elementor_kit_styles() {
    // Check if Elementor is active
    if ( ! did_action( 'elementor/loaded' ) ) {
        return;
    }
	
    // Get the current post ID
    $post_id = get_the_ID();

    // Check if the page is built with Elementor (the kit is already loaded in this case)
    $is_built_with_elementor = Elementor\Plugin::$instance->documents->get( $post_id )->is_built_with_elementor();
	
    // Check if we have a valid post ID or if the page is built with Elementor
    if ( ! $post_id || $is_built_with_elementor ) {
        return;
    }

    // Get the Elementor Kits Manager instance
    $kits_manager = \Elementor\Plugin::$instance->kits_manager;

    // Fetch the current active kit ID
    $kit_id = $kits_manager->get_active_id();

    // Check if we have a valid kit ID
    if ( ! $kit_id ) {
        return;
    }

    // Create the CSS file for the kit
    $kit = $kits_manager->get_kit( $kit_id );
    if ( ! $kit ) {
        return;
    }

    if ( $kit->is_autosave() ) {
        $css_file = \Elementor\Core\Files\CSS\Post_Preview::create( $kit_id );
    } else {
        $css_file = \Elementor\Core\Files\CSS\Post::create( $kit_id );
    }

    // Check if the kit wasn't already enqueued
    if ( ! wp_style_is( 'elementor-kit-' . $kit_id ) ) {

        // Set the file version
        $file_version = ELEMENTOR_VERSION;

        // Enqueue the CSS file
        wp_enqueue_style( 
            // Kit handle
            'elementor-kit-' . $kit_id,
            // Kit url
            $css_file->get_url(),
            // Kit dependencies
            [],
            // File version
            $file_version
        );
    }
}

Please, keep in mind this is not an official suggestion, and the code may not work on your site or may cause conflicts. Use it at your own discretion!

I'm migrating this Issue to discussions.

Kind regards

[mbaierl]

Thank you @nicholaszein , highly appreciated!