# Widget Dependencies
Elementor Core IntermediateSome widgets are dependent on custom scripts and styles for functionality and look and feel.
# Defining Dependencies
Inside the widget class we can enqueue any required JS and CSS dependencies the following way:
class Elementor_Test_Widget extends \Elementor\Widget_Base {
public function get_script_depends() {
return [ 'script-handle' ];
}
public function get_style_depends() {
return [ 'style-handle' ];
}
}
2
3
4
5
6
7
8
9
10
11
Script Dependencies – The
get_script_depends()
method lets you define the JS files required to run the widget.Style Dependencies – The
get_style_depends()
method lets you define the CSS files required to run the widget.
# Registering Scripts & Styles
Like any other WordPress plugin, scripts and styles have to be registered using the wp_register_script() (opens new window) and wp_register_style() (opens new window) functions in the plugin’s PHP.
Best Practice
Best practice is to register the script & styles inside the widget's PHP class. This way you make sure the script is loaded only if the widget is used.
class Elementor_Test_Widget extends \Elementor\Widget_Base {
public function get_script_depends() {
wp_register_script( 'widget-script-1', plugins_url( 'assets/js/widget-script-1.js', __FILE__ ) );
wp_register_script( 'widget-script-2', plugins_url( 'assets/js/widget-script-2.js', __FILE__ ), [ 'external-library' ] );
wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) );
return [
'widget-script-1',
'widget-script-2',
];
}
public function get_style_depends() {
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__ ) );
return [
'widget-style-1',
'widget-style-2',
];
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# Using Elementor Scripts
Widgets can also use scripts registered by Elementor:
class Elementor_Test_Widget extends \Elementor\Widget_Base {
public function get_script_depends() {
return [ 'elementor-frontend' ];
}
}
2
3
4
5
6
7
8
9
This can be handy when 3rd party widgets register their own frontend handlers. Read more about it on controls frontend_available
argument.