Control Scripts

Elementor Core Intermediate

When you create new Elementor controls and need to register custom scripts, they must be registered using the wp_register_script() (opens new window) function and enqueued using the wp_enqueue_script() (opens new window) function. To ensure that Elementor only loads the scripts in the editor, use the control enqueue() method.

Registering Control Scripts

In the example below, we'll register scripts when creating new controls:

function my_plugin_register_control_scripts() {
	wp_register_script( 'control-script-1', plugins_url( 'assets/js/control-script-1.js', __FILE__ ) );
	wp_register_script( 'control-script-2', plugins_url( 'assets/js/control-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', 'my_plugin_register_control_scripts' );

Then, the control class will enqueue the scripts:

class Elementor_Test_Control extends \Elementor\Base_Control {

	protected function enqueue(): void {
		wp_enqueue_script( 'control-script-1' );
		wp_enqueue_script( 'control-script-2' );
	}

}