Creating Custom Elementor Plugin & Custom Elementor Widget

Elementor is the ultimate & free WordPress page builder, that lets you create beautiful WordPress websites in the easiest and quickest way possible. Elementor is the first, and currently the only frontend page builder to offer limitless design possibilities. It includes dozens of useful widgets, a stunningly designed template library, a unique mobile editing toolset and a visual revision history feature.

How to Install Elementor

Elementor Extensions

The fact that Elementor is free and open source has allowed for developers to extend Elementor even further. We have also released the Elementor API, which includes a detailed explanation on extending Elementor and creating addons and extensions.

Creating an Custom Extension/Plugin for Elementor

When creating Extension for Elementor you should implement all the WordPress coding standards and best practices. In addition you should follow Elementor standards and best practices.
The extensions should implement object-oriented programming. It should have a main class and extra classes for smaller parts like custom Elementor Widgets or any other components.

Plugin Structure

The main plugin class should have basic information about the extensions, to check basic requirements and to load the required files to activate the plugin functionality.

<?php
final class Elementor_Test_Extension {

	const VERSION;
	const MINIMUM_ELEMENTOR_VERSION;
	const MINIMUM_PHP_VERSION;

	private static $_instance = null;
	public static function instance() {}

	public function __construct() {}
	public function on_plugins_loaded() {}
	public function is_compatible() {
	public function init() {}
	public function includes() {}

}
Elementor_Test_Extension::instance();

Elementor Widgets

Elementor is packed with 28 useful widgets split into several categories in the panel. Elementor also displays all the registered WordPress widgets in a separate category in the panel.
Elementor widgets are created by extending the Widget_Base abstract class. Each widget has a set custom controls (input fields), and a render function that generates the output in the front-end and in the editor.

Creating a Custom Elementor Widget

Creating a custom Elementor Widget is not very different from creating a native WordPress widget, you basically start by creating a class that extends the Widget_Base class and fill in all the required methods.
Each widget needs to have a few basic settings like a unique name that the widget will be identified by in the code, a title that will be used as the widget label and an icon. On top of that we have some advanced settings like the widget controls which are basically the fields where the user select his custom data, and the render script that generates the final output based on the user data from the widget controls.

Widget Structure

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	public function get_name() {}

	public function get_title() {}

	public function get_icon() {}

	public function get_categories() {}

	protected function _register_controls() {}

	protected function render() {}

	protected function _content_template() {}

}

Let’s break it down:

• Widget Name – The get_name() method is a simple one, you just need to return a widget name that will be used in the code.
• Widget Title – The get_title() method, which again, is a very simple one, you need to return the widget title that will be displayed as the widget label.
• Widget Icon – The get_icon() method, is an optional but recommended method, it lets you set the widget icon. you can use any of the eicon or font-awesome icons, simply return the class name as a string.
• Widget Categories – The get_categories method, lets you set the category of the widget, return the category name as a string.
• Widget Controls – The _register_controls method lets you define which controls (setting fields) your widget will have.
• Render Frontend Output – The render() method, which is where you actually render the code and generate the final HTML on the frontend using PHP.
• Render Editor Output – The _content_template() method, is where you render the editor output to generate the live preview using a Backbone JavaScript template.

Register a Custom Widget

After you creating a custom elementor plugin and a custom elementor widget, you can register one to many widget at one plugin. All you need to do is just to register the widget inside the plugin by adding this function inside your custom elementor plugin.

public function init_widgets()
	{
		require_once(dirname(__FILE__) . '/your-widget-file.php');
		\Elementor\Plugin::instance()->widgets_manager->register_widget_type(new \Elementor_Test_Widget extends());
	}

After that, register your function with hook (inside init function) to elementor widget like code below.

public function init()
	{
		$this->i18n();
		// Add Plugin actions
		add_action('elementor/widgets/widgets_registered', [$this, 'init_widgets']);
	}

And thats it, your custom widget is ready to use!

Creating Custom Elementor Control

Creating a custom Control is a task reserved for advanced Elementor developers, you should be well familiar with the code base before creating your own controls. The first place to start with is the Base_Control class and all the inner methods, then you should see how Elementor creates different controls implementing the base methods with custom needs.
Each control needs to have a two basic methods, the control unique name and the HTML code that displays the field in the editor. More advanced controls can set custom settings, define default values, enqueue scripts and style, and do almost everything you imagination can think of.

Control Structure

Elementor Controls extends the Base_Control class and inherits his methods. A skeleton of a simple Control requires only two methods, the control name and the content template:

<?php
class Elementor_Test_Control extends \Elementor\Base_Control {

	public function get_type() {}

	public function content_template() {}

}

More advanced controls can use other available methods:

<?php
class Elementor_Test_Control extends \Elementor\Base_Control {

	public function get_type() {}

	public function content_template() {}

	public function enqueue() {}

	protected function get_default_settings() {}

	public function get_default_value() {}

	public function get_value() {}

	public function get_style_value() {}

}

Let’s break it down:

• Control Type – The get_type() method retrieve the type of the control.
• Template – The content_template() method render the output in the panel using Underscore JS template.
• Enqueue – The enqueue() method registers and enqueues scripts and styles used by the control.
• Default Settings – The get_default_settings() method retrieves the default control settings on initialization.
• Default Value(s) – The get_default_value() method retrieves the default control value(s) on initialization.
• Return Value – The get_value() method determines how the control returns its value.
• Style Value – The get_style_value() method determines how the control returns a style value when adding CSS rules passed by the selectors data argument.

Note that the above refers to Base_Control abstract class, but you can extend any of the other base controls depending on your use case.

Register a Custom Control

After you creating a custom elementor plugin, a custom elementor widget, and a custom control, you can register one to many control at one plugin. All you need to do is just to register the control inside the plugin by adding this function inside your custom elementor plugin.

public function init_controls(){
		$controls_manager = \Elementor\Plugin::$instance->controls_manager;
		require_once(dirname(__FILE__) . '/control-file.php');
		$controls_manager->register_control( 'cons-variable', new \Elementor_Test_Control extends());
	}

After that, register your function with hook (inside init function) to elementor controls like code below.

public function init()
	{
		$this->i18n();
		// Add Plugin actions
		add_action( 'elementor/controls/controls_registered', [ $this, 'init_controls' ] );
	}

And thats it, your custom control is ready to use from your custom widget!