Elementor Developers

# Widget Styles

Elementor Core Intermediate

When you develop new Elementor widgets and need to register custom stylesheets, they must be registered using the wp_register_style() (opens new window) function and set as dependencies using the widget get_style_depends() method. This way, Elementor will dynamically load these stylesheets only on pages using these widgets.

# Registering Widget Styles

In the example below, we'll register the required stylesheets in the main file:

function register_widget_styles() {
	wp_register_style( 'widget-style-1', plugins_url( 'assets/css/widget-style-1.css', __FILE__ ) );
	wp_register_style( 'widget-style-2', plugins_url( 'assets/css/widget-style-2.css', __FILE__ ), [ 'external-framework' ] );
	wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'register_widget_styles' );
1
2
3
4
5
6

Then, the widget class will set the CSS dependencies:

class Elementor_Test_Widget extends \Elementor\Widget_Base {

	public function get_style_depends(): array {
		return [ 'widget-style-1', 'widget-style-2' ];
	}

}
1
2
3
4
5
6
7

Addon developers don't enqueue widget style dependencies themselves. Only Elementor enqueue these CSS files, and only on pages using the widget.

← Control Scripts →