Add Custom Functionality

Now that you have a basic WordPress plugin, we need to add our own functionality. Lets add several custom features.

Registering Custom Styles

In some widgets we would like to register custom styles, this can be done with the elementor/frontend/after_enqueue_styles hook, using the following code:

<?php
final class Elementor_Test_Extension {

	public function init() {

		// Register Widget Styles
		add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'widget_styles' ] );

	}

	public function widget_styles() {

		wp_register_style( 'widget-1', plugins_url( 'css/widget-1.css', __FILE__ ) );
		wp_register_style( 'widget-2', plugins_url( 'css/widget-2.css', __FILE__ ) );

	}

}

Registering Custom Scripts

Other widgets need custom JS to run, in those cases we need to register scripts with the elementor/frontend/after_register_scripts hook, using the following code:

<?php
final class Elementor_Test_Extension {

	public function init() {

		// Register Widget Scripts
		add_action( 'elementor/frontend/after_register_scripts', [ $this, 'widget_scripts' ] );

	}

	public function widget_scripts() {

		wp_register_script( 'some-library', plugins_url( 'js/libs/some-library.js', __FILE__ ) );
		wp_register_script( 'widget-1', plugins_url( 'js/widget-1.js', __FILE__ ) );
		wp_register_script( 'widget-2', plugins_url( 'js/widget-2.js', __FILE__ ), [ 'jquery', 'some-library' ] );

	}


}

Registering New Widgets

To add a new widget to Elementor we need to register the widget class using the widget manager. It’s a pretty simple process, it is done using the elementor/widgets/widgets_registered action.

<?php
final class Elementor_Test_Extension {

	public function init() {

		// Include plugin files
		$this->includes();

		// Register widgets
		add_action( 'elementor/widgets/widgets_registered', [ $this, 'register_widgets' ] );

	}

	public function includes() {

		require_once( __DIR__ . '/widgets/test-widget-1.php' );
		require_once( __DIR__ . '/widgets/test-widget-2.php' );

	}

	public function register_widgets() {

		\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \Elementor_Test_Widget1() );
		\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \Elementor_Test_Widget2() );

	}

}

For more information about how to create your own widgets, read the add new Elementor Widgets .

Registering New Controls

To add a new controls to Elementor we need to register the control class using the elementor/controls/controls_registered action hook.

<?php
final class Elementor_Test_Extension {

	public function init() {

		// Include plugin files
		$this->includes();

		// Register controls
		add_action( 'elementor/controls/controls_registered', [ $this, 'register_controls' ] );

	}

	public function includes() {

		require_once( __DIR__ . '/controls/test-control-1.php' );
		require_once( __DIR__ . '/controls/test-control-2.php' );

	}

	public function register_controls() {

		$controls_manager = \Elementor\Plugin::$instance->controls_manager;
		$controls_manager->register_control( 'control-type-1', new Test_Control1() );
		$controls_manager->register_control( 'control-type-2', new Test_Control2() );

	}

}

For more information about how to create your own controls (input fields) for your widgets, read the add new Elementor Controls.

More Resources

Get The Latest Updates

We have a lot more where that came from! Join 880,651 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.