# Widget Scripts
Elementor Core IntermediateWhen you develop new Elementor widgets and need to register custom scripts, they must be registered using the wp_register_script() (opens new window) function and set as dependencies using the widget get_script_depends()
method. This way, Elementor will dynamically load these scripts only on pages using these widgets.
# Registering Widget Scripts
In the example below, we'll register the required scripts in the main file:
function register_widget_scripts() {
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__ ) );
}
add_action( 'wp_enqueue_scripts', 'register_widget_scripts' );
1
2
3
4
5
6
2
3
4
5
6
Then, the widget class will set the JS dependencies:
class Elementor_Test_Widget extends \Elementor\Widget_Base {
public function get_script_depends() {
return [ 'widget-script-1', 'widget-script-2' ];
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
Addon developers should not enqueue widget script dependencies themselves. Only Elementor enqueue these JS files, and only on pages using the widget.