### License Activation Usage Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/cli/license-activate.md

An example of how to use the license activation command.

```bash
wp elementor-pro license activate XXX
```

--------------------------------

### Components and sub-components convention example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/js/components.md

This example illustrates the convention for naming component and sub-component folders and files, using 'Document' and 'Elements' as an example.

```javascript
export { default as ElementsComponent } from './elements/component.js';
```

```javascript
import * as components from './';

export default class Component extends $e.modules.ComponentBase {
    getNamespace() {
        return 'document';
    }
    
    registerAPI() {
        // Register sub components.
        Object.values( components ).forEach( ( ComponentClass ) =>
            $e.components.register( new ComponentClass )
        );
    
        super.registerAPI();
    }
}

export default class Component;
```

```javascript
export default class Component extends $e.modules.ComponentBase {
    getNamespace() {
        return 'elements';
    }
}

export default class Component;
```

--------------------------------

### Usage Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/cli/library-import-dir.md

Example of how to use the `library import-dir` command to import templates from a specified directory.

```bash
wp elementor library import-dir path/to/custom-templates/
```

--------------------------------

### Injecting Controls After Section Start

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/hooks/injecting-controls.md

This example shows how to add a control after a section has started but before it has ended, within a specific element and section.

```php
/**
 * @param \Elementor\Controls_Stack $element The element type.
 * @param array                     $args    Section arguments.
 */
function inject_heading_controls( $element, $args ) {

	$element->add_control(
		'custom_control',
		[
			'type' => \Elementor\Controls_Manager::NUMBER,
			'label' => esc_html__( 'Custom Control', 'textdomain' ),
		]
	);

}
add_action( 'elementor/element/heading/section_title/before_section_start', 'inject_heading_controls', 10, 2 );
```

--------------------------------

### Global Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/editor-controls/global-style.md

Example demonstrating how controls can inherit global styles for colors and typography.

```php
$this->add_control(
	'heading_color',
	[
		'label' => esc_html__( 'Heading Color', 'textdomain' ),
		'type' => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .heading-class' => 'color: {{VALUE}};
		],
		'global' => [
			'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_PRIMARY,
		],
	]
);

$this->add_control(
	'sub_heading_color',
	[
		'label' => esc_html__( 'Sub Heading Color', 'textdomain' ),
		'type' => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .sub-heading-class' => 'color: {{VALUE}};
		],
		'global' => [
			'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_SECONDARY,
		],
	]
);

$this->add_control(
	'content_color',
	[
		'label' => esc_html__( 'Content Color', 'textdomain' ),
		'type' => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .content-class' => 'color: {{VALUE}};
		],
		'global' => [
			'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_TEXT,
		],
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	[
		'name' => 'heading_typography',
		'selector' => '{{WRAPPER}} .heading-class',
		'global' => [
			'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_PRIMARY,
		],
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	[
		'name' => 'sub_heading_typography',
		'selector' => '{{WRAPPER}} .sub_heading-class',
		'global' => [
			'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_SECONDARY,
		],
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	[
		'name' => 'content_typography',
		'selector' => '{{WRAPPER}} .content-class',
		'global' => [
			'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_TEXT,
		],
	]
);

```

--------------------------------

### Elementor Init Hook Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/hooks/elementor-init.md

A basic example of how to hook into the elementor/init action.

```php
function my_plugin() {

	// ...

}
add_action( 'elementor/init', 'my_plugin' );
```

--------------------------------

### Injecting Controls Before Section Start

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/hooks/injecting-controls.md

This example demonstrates how to add a new section and a control before the start of a specific section in an Elementor element.

```php
/**
 * @param \Elementor\Controls_Stack $element The element type.
 * @param array                     $args    Section arguments.
 */
function inject_heading_controls( $element, $args ) {

	$element->start_controls_section(
		'custom_section',
		[
			'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			'label' => esc_html__( 'Custom Section', 'textdomain' ),
		]
	);

	$element->add_control(
		'custom_control',
		[
			'type' => \Elementor\Controls_Manager::NUMBER,
			'label' => esc_html__( 'Custom Control', 'textdomain' ),
		]
	);

	$element->end_controls_section();

}
add_action( 'elementor/element/heading/section_title/before_section_start', 'inject_heading_controls', 10, 2 );
```

--------------------------------

### Example: Styled Page

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/data-structure/page-settings.md

Shows a JSON example of a page with basic styling settings applied.

```json
{
	"title": "Template Title",
	"type": "page",
	"version": "0.4",
	"page_settings": {
		"background_background": "classic",
		"background_color": "#FFFFFF",
		"margin": {
			"unit": "px",
			"top": "0",
			"right": "0",
			"bottom": "0",
			"left": "0",
			"isLinked": true
		},
		"padding": {
			"unit": "px",
			"top": "0",
			"right": "10",
			"bottom": "0",
			"left": "10",
			"isLinked": false
		},
		"scroll_snap": "yes"
	},
	"content": []
}
```

--------------------------------

### Example: Empty Page

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/data-structure/page-settings.md

Provides a JSON example of an empty page that has no associated settings.

```json
{
	"title": "About Page",
	"type": "page",
	"version": "0.4",
	"page_settings": [],
	"content": []
}
```

--------------------------------

### Example of creating and registering a new component

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/js/components.md

This example demonstrates how to create and register a new component, which can be run in the console and does not depend on anything else.

```javascript
// Example of creating and registering a new component, available to run in the console and does not depend on anything else.
class CustomComponent extends $e.modules.ComponentBase {
	getNamespace() {
		return 'custom-component';
	}
	
defaultCommands() {
		// Object of all the component commands.
		return {
			// 'example' command.   
			example: ( args ) => {
				// Output command args to console.
				console.log( 'ExampleCommand: ', args );

				// Return object as example.
				return {
					example: 'result from ExampleCommand',
				};
			},
		};
	}
	}
	
	// Register the new component.
	$e.components.register( new CustomComponent() );
	
	// Runs 'example' command from 'custom-component'.
	result = $e.run( 'custom-component/example', {
	property: 'value',
	} );
	
	// Output command run result.
	console.log( 'e-components-eg-1-result: ', result );

```

--------------------------------

### Enqueue Method Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/controls/control-enqueue.md

Example of how to register and enqueue styles and scripts for a custom Elementor control.

```php
class Elementor_Test_Control extends \Elementor\Base_Control {

	protected function enqueue(): void {

		// Styles
		wp_register_style( 'control-style', plugins_url( 'assets/css/control-style.css', __FILE__ ) );
		wp_enqueue_style( 'control-style' );

		// Scripts
		wp_register_script( 'control-script', plugins_url( 'assets/js/control-script.js', __FILE__ ) );
		wp_enqueue_script( 'control-script' );

	}

}
```

--------------------------------

### Example Addon Main File

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/addons/load.md

This example demonstrates the main plugin file for an Elementor addon, including loading its manager files after the 'plugins_loaded' hook.

```php
<?php
/**
 * Plugin Name: Elementor Test Addon
 * Description: Custom Elementor addon.
 * Plugin URI:  https://elementor.com/
 * Version:     1.0.0
 * Author:      Elementor Developer
 * Author URI:  https://developers.elementor.com/
 * Text Domain: elementor-test-addon
 *
 * Requires Plugins: elementor
 * Elementor tested up to: 3.25.0
 * Elementor Pro tested up to: 3.25.0
 */

function elementor_test_addon() {

	// Load plugin file
	require_once( __DIR__ . '/includes/widgets-manager.php' );
	require_once( __DIR__ . '/includes/controls-manager.php' );

}
add_action( 'plugins_loaded', 'elementor_test_addon' );
```

--------------------------------

### Sendy Integration Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/form-actions/advanced-example.md

Example of integrating with Sendy to subscribe users to a mailing list.

```php
$sendy_data['name'] = $fields[ $settings['sendy_name_field'] ];
		}

		// Send the request.
		wp_remote_post(
			$settings['sendy_url'] . 'subscribe',
			[
				'body' => $sendy_data,
			]
		);

	}

	/**
	 * On export.
	 *
	 * Clears Sendy form settings/fields when exporting.
	 *
	 * @since 1.0.0
	 * @access public
	 * @param array $element
	 */
	public function on_export( $element ): array {

		unset(
			$element['sendy_url'],
			$element['sendy_list'],
			$element['sendy_email_field'],
			$element['sendy_name_field']
		);

		return $element;

	}

}
```

--------------------------------

### Main Plugin File Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/addons/namespaces.md

Example of the main plugin file (`elementor-test-addon.php`) that loads the addon's functionality and defines the main namespace.

```php
<?php\n/**\n * Plugin Name: Elementor Test Addon\n * Description: Custom Elementor addon.\n * Plugin URI:  https://elementor.com/\n * Version:     1.0.0\n * Author:      Elementor Developer\n * Author URI:  https://developers.elementor.com/\n * Text Domain: elementor-test-addon\n *\n * Requires Plugins: elementor\n * Elementor tested up to: 3.25.0\n * Elementor Pro tested up to: 3.25.0\n */\n\nfunction elementor_test_addon() {\n\n\t// Load plugin file\n\trequire_once( __DIR__ . '/includes/plugin.php' );\n\n\t// Run the plugin\n\t\Elementor_Test_Addon\Plugin::instance();\n}\nadd_action( 'plugins_loaded', 'elementor_test_addon' );
```

--------------------------------

### Description Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/editor-controls/labels-description.md

Example illustrating how to add a 'description' to a control.

```php
$this->add_control(
	'unique-control-name',
	[
		'type' => \Elementor\Controls_Manager::TEXT,
		'label' => esc_html__( 'Control Label', 'textdomain' ),
		'description' => esc_html__( 'Short control description.', 'textdomain' ),
	]
);
```

--------------------------------

### Addon Code Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/addons/addon-example.md

This PHP code demonstrates the structure of an Elementor addon, including initialization, widget registration, and control registration.

```php
if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

		$message = sprintf(
			/* translators: 1: Plugin name 2: PHP 3: Required PHP version */
			esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'elementor-test-addon' ),
			'<strong>' . esc_html__( 'Elementor Test Addon', 'elementor-test-addon' ) . '</strong>',
			'<strong>' . esc_html__( 'PHP', 'elementor-test-addon' ) . '</strong>',
			 self::MINIMUM_PHP_VERSION
		);

		printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

	}

	/**
	 * Initialize
	 *
	 * Load the addons functionality only after Elementor is initialized.
	 *
	 * Fired by `elementor/init` action hook.
	 *
	 * @since 1.0.0
	 * @access public
	 */
	public function init(): void {

		add_action( 'elementor/widgets/register', [ $this, 'register_widgets' ] );
		add_action( 'elementor/controls/register', [ $this, 'register_controls' ] );

	}

	/**
	 * Register Widgets
	 *
	 * Load widgets files and register new Elementor widgets.
	 *
	 * Fired by `elementor/widgets/register` action hook.
	 *
	 * @param \Elementor\Widgets_Manager $widgets_manager Elementor widgets manager.
	 */
	public function register_widgets( $widgets_manager ): void {

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

		$widgets_manager->register( new Widget_1() );
		$widgets_manager->register( new Widget_2() );

	}

	/**
	 * Register Controls
	 *
	 * Load controls files and register new Elementor controls.
	 *
	 * Fired by `elementor/controls/register` action hook.
	 *
	 * @param \Elementor\Controls_Manager $controls_manager Elementor controls manager.
	 */
	public function register_controls( $controls_manager ): void {

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

		$controls_manager->register( new Control_1() );
		$controls_manager->register( new Control_2() );

	}

}
```

--------------------------------

### Choose Control Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/editor-controls/regular-control.md

An example of adding a choose control, which is a styled version of the select control using icons for each option.

```php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Content', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'alignment',
			[
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'label' => esc_html__( 'Alignment', 'textdomain' ),
				'options' => [
					'left' => [
						'title' => esc_html__( 'Left', 'textdomain' ),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'textdomain' ),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__( 'Right', 'textdomain' ),
						'icon' => 'eicon-text-align-right',
					],
				],
				'default' => 'center',
			]
		);

		$this->end_controls_section();

	}

}
```

--------------------------------

### Control Label Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/editor-controls/labels-description.md

Example showing how to set the 'label' argument for a control.

```php
$this->add_control(
	'unique-control-name',
	[
		'type' => \Elementor\Controls_Manager::TEXT,
		'label' => esc_html__( 'Control Label', 'textdomain' ),
	]
);
```

--------------------------------

### Select Control Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/editor-controls/regular-control.md

An example of adding a select control, allowing users to choose from a list of predefined options.

```php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Content', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'open_lightbox',
			[
				'type' => \Elementor\Controls_Manager::SELECT,
				'label' => esc_html__( 'Lightbox', 'textdomain' ),
				'options' => [
					'default' => esc_html__( 'Default', 'textdomain' ),
					'yes' => esc_html__( 'Yes', 'textdomain' ),
					'no' => esc_html__( 'No', 'textdomain' ),
				],
				'default' => 'no',
			]
		);

		$this->end_controls_section();

	}

}
```

--------------------------------

### Text Control Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/editor-controls/regular-control.md

An example of adding a simple text control with a placeholder, allowing users to input a string.

```php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Content', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'title',
			[
				'type' => \Elementor\Controls_Manager::TEXT,
				'label' => esc_html__( 'Title', 'textdomain' ),
				'placeholder' => esc_html__( 'Enter your title', 'textdomain' ),
			]
		);

		$this->end_controls_section();

	}

}
```

--------------------------------

### Label Block Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/editor-controls/labels-description.md

Example demonstrating how to enable 'label_block' to stack the label and input field.

```php
$this->add_control(
	'unique-control-name',
	[
		'type' => \Elementor\Controls_Manager::TEXT,
		'label' => esc_html__( 'Control Label', 'textdomain' ),
		'label_block' => true,
	]
);
```

--------------------------------

### Folder Structure

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/widgets/simple-example.md

The addon will have two files. One file for the widget and a main file to register the widget.

```text
elementor-oembed-widget/
|
├─ widgets/
|  └─ oembed-widget.php
|
└─ elementor-oembed-widget.php
```

--------------------------------

### Folder Structure

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/form-fields/simple-example.md

The addon will have two files: one for the new field-type and a main file to register the field and handle other necessary tasks.

```text
elementor-form-local-tel-field/
|
├─ form-fields/
|  └─ local-tel.php
|
└─ elementor-form-local-tel-field.php
```

--------------------------------

### Injecting Controls into All Elements (after_section_start)

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/hooks/injecting-controls.md

This example shows how to add a custom control to an existing section after it has started. It targets the 'section_background' section and adds a 'custom_control'.

```php
/**
 * @param \Elementor\Controls_Stack $element    The element type.
 * @param string                    $section_id Section ID.
 * @param array                     $args       Section arguments.
 */
function inject_custom_control( $element, $section_id, $args ) {

	if ( 'section' === $element->get_name() && 'section_background' === $section_id ) {

		$element->add_control(
			'custom_control',
			[
				'type' => \Elementor\Controls_Manager::NUMBER,
				'label' => esc_html__( 'Custom Control', 'textdomain' ),
			]
		);

	}

}
add_action( 'elementor/element/after_section_start', 'inject_custom_control', 10, 3 );
```

--------------------------------

### Injecting Controls into All Elements (before_section_start)

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/hooks/injecting-controls.md

This example demonstrates how to inject a custom section and control into all elements before a specific section starts. It targets the 'section_background' section and adds a 'custom_section' with a 'custom_control'.

```php
/**
 * @param \Elementor\Controls_Stack $element    The element type.
 * @param string                    $section_id Section ID.
 * @param array                     $args       Section arguments.
 */
function inject_custom_control( $element, $section_id, $args ) {

	if ( 'section' === $element->get_name() && 'section_background' === $section_id ) {

		$element->start_controls_section(
			'custom_section',
			[
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
				'label' => esc_html__( 'Custom Section', 'textdomain' ),
			]
		);

		$element->add_control(
			'custom_control',
			[
				'type' => \Elementor\Controls_Manager::NUMBER,
				'label' => esc_html__( 'Custom Control', 'textdomain' ),
			]
		);

		$element->end_controls_section();

	}

}
add_action( 'elementor/element/before_section_start', 'inject_custom_control', 10, 3 );
```

--------------------------------

### Import Entire Kit

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/cli/kit-import.md

Example of importing all content from a kit file.

```bash
wp elementor kit import path/to/elementor-kit.zip
```

--------------------------------

### Import a Template and Return IDs

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/cli/library-import.md

Example of importing an Elementor template and specifying the return type as 'ids' to get the imported item IDs.

```bash
wp elementor library import path/to/elementor-12345-2022-03-04.json --returnType=ids
```

--------------------------------

### Simple Input Field Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/form-fields/simple-example.md

This is a basic example of a custom input field for Elementor forms.

```php
<?php

namespace ElementorPro\Forms\Fields;

use Elementor\Core\Common\Utils;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

class Simple_Example extends Field_Base {

	/**
	 *
	 *
	 * @since 1.0.0
	 * @access public
	 */
	public function get_type() {
		return 'simple-example';
	}

	/**
	 *
	 *
	 * @since 1.0.0
	 * @access public
	 */
	public function render( $field_data, $field_controller ) {
		$field_id = $field_controller->get_field_id( $field_data );
		$field_class = $field_controller->get_field_class( $field_data );
		$size = $field_data['field_size'];
		$pattern = $field_data['pattern'];
		$title = $field_data['title'];

		return sprintf( '<input id="%1$s" class="%2$s" size="%3$s" pattern="%4$s" title="%5$s">', $field_id, $field_class, $size, $pattern, $title );
	}

}

```

--------------------------------

### Usage Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/cli/experiments-activate.md

This command will activate the `container` experiment.

```bash
wp elementor experiments activate container
```

--------------------------------

### Usage Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/editor-controls/control-repeater.md

Example of how to use the Control Repeater.

```php
<?php
	}

}
```

--------------------------------

### Enable Composer Custom Installers

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/cli/composer.md

Commands to enable Composer custom installers and require the composer/installers package, allowing Elementor Pro to be installed in the wp-content/plugins folder instead of the vendor folder.

```bash
composer config --no-plugins allow-plugins.composer/installers true
composer require composer/installers
```

--------------------------------

### Plugin File: elementor-oembed-widget.php

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/widgets/simple-example.md

The main plugin file for the Elementor oEmbed Widget. It includes the plugin header, checks for direct access, and registers the widget class.

```php
<?php
/**
 * Plugin Name: Elementor oEmbed Widget
 * Description: Auto embed any embbedable content from external URLs into Elementor.
 * Plugin URI:  https://elementor.com/
 * Version:     1.0.0
 * Author:      Elementor Developer
 * Author URI:  https://developers.elementor.com/
 * Text Domain: elementor-oembed-widget
 *
 * Requires Plugins: elementor
 * Elementor tested up to: 3.25.0
 * Elementor Pro tested up to: 3.25.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Register oEmbed Widget.
 *
 * Include widget file and register widget class.
 *
 * @since 1.0.0
 * @param \Elementor\Widgets_Manager $widgets_manager Elementor widgets manager.
 * @return void
 */
function register_oembed_widget( $widgets_manager ) {

	require_once( __DIR__ . '/widgets/oembed-widget.php' );

	$widgets_manager->register( new \Elementor_oEmbed_Widget() );

}
add_action( 'elementor/widgets/register', 'register_oembed_widget' );

```

--------------------------------

### Hello World Widget 2

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/getting-started/first-addon.md

This PHP code defines the second widget, 'Hello World 2', which includes controls for text input and text color styling.

```php
<?php
class Elementor_Hello_World_Widget_2 extends \Elementor\Widget_Base {

	public function get_name(): string {
		return 'hello_world_widget_2';
	}

	public function get_title(): string {
		return esc_html__( 'Hello World 2', 'elementor-addon' );
	}

	public function get_icon(): string {
		return 'eicon-code';
	}

	public function get_categories(): array {
		return [ 'basic' ];
	}

	public function get_keywords(): array {
		return [ 'hello', 'world' ];
	}

	protected function register_controls(): void {

		// Content Tab Start

		$this->start_controls_section(
			'section_title',
			[
				'label' => esc_html__( 'Title', 'elementor-addon' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'title',
			[
				'label' => esc_html__( 'Title', 'elementor-addon' ),
				'type' => \Elementor\Controls_Manager::TEXTAREA,
				'default' => esc_html__( 'Hello world', 'elementor-addon' ),
			]
		);

		$this->end_controls_section();

		// Content Tab End


		// Style Tab Start

		$this->start_controls_section(
			'section_title_style',
			[
				'label' => esc_html__( 'Title', 'elementor-addon' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'title_color',
			[
				'label' => esc_html__( 'Text Color', 'elementor-addon' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .hello-world' => 'color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();

		// Style Tab End

	}

	protected function render(): void {
		$settings = $this->get_settings_for_display();

		if ( empty( $settings['title'] ) ) {
			return;
		}
		?>
		<p class="hello-world">
			<?php echo $settings['title']; ?>
		</p>
		<?php
	}

	protected function content_template(): void {
		?>
		<#
		if ( '' === settings.title ) {
			return;
		}
		#>
		<p class="hello-world">
			{{ settings.title }}
		</p>
		<?php
	}
}

```

--------------------------------

### Usage Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/editor-controls/control-color.md

Example of how to register and use the color control in a widget.

```php
<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

		$this->start_controls_section(
			'style_section',
			[
				'label' => esc_html__( 'Style', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'text_color',
			[
				'label' => esc_html__( 'Text Color', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .your-class' => 'color: {{VALUE}}',
				],
			]
		);

		$this->end_controls_section();

	}

	protected function render(): void {
		$settings = $this->get_settings_for_display();
		?>
		<div class="your-class">
			...
		</div>
		<?php
	}

	protected function content_template(): void {
		?>
		<div class="your-class">
			...
		</div>
		<?php
	}

}

```

--------------------------------

### Addon Folder Structure

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/addons/addon-example.md

The recommended folder structure for an Elementor addon, including includes, controls, widgets, and the main plugin file.

```text
elementor-test-addon/
|
├─ includes/
|  |
|  ├─ controls/
|  |  ├─ control-1.php
|  |  └─ control-2.php
|  |
|  ├─ widgets/
|  |  ├─ widget-1.php
|  |  └─ widget-2.php
|  |
|  └─ plugin.php
|
└─ elementor-test-addon.php
```

--------------------------------

### Elementor List Widget Main Plugin File

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/widgets/advanced-example.md

This PHP file serves as the main entry point for the Elementor List Widget plugin. It includes plugin metadata, checks for direct access, and registers the custom widget with Elementor.

```php
<?php
/**
 * Plugin Name: Elementor List Widget
 * Description: List widget for Elementor.
 * Plugin URI:  https://elementor.com/
 * Version:     1.0.0
 * Author:      Elementor Developer
 * Author URI:  https://developers.elementor.com/
 * Text Domain: elementor-list-widget
 *
 * Requires Plugins: elementor
 * Elementor tested up to: 3.25.0
 * Elementor Pro tested up to: 3.25.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Register List Widget.
 *
 * Include widget file and register widget class.
 *
 * @since 1.0.0
 * @param \Elementor\Widgets_Manager $widgets_manager Elementor widgets manager.
 * @return void
 */
function register_list_widget( $widgets_manager ) {

	require_once( __DIR__ . '/widgets/list-widget.php' );

	$widgets_manager->register( new \Elementor_List_Widget() );

}
add_action( 'elementor/widgets/register', 'register_list_widget' );

```

--------------------------------

### Import Specific Content Types

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/cli/kit-import.md

Example of importing only site settings and content from a kit file.

```bash
wp elementor kit import path/to/elementor-kit.zip --include=site-settings,content
```

--------------------------------

### Elementor Loaded Hook Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/hooks/elementor-loaded.md

An example of how to use the `elementor/loaded` action hook in a WordPress plugin.

```php
function my_plugin() {

	// ...

}
add_action( 'elementor/loaded', 'my_plugin' );
```

--------------------------------

### Border Control Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/editor-controls/group-control.md

Example of adding a border group control to style borders in an Elementor widget.

```php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

		$this->start_controls_section(
			'style_section',
			[
				'label' => esc_html__( 'Style', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			[
				'name' => 'border',
				'selector' => '{{WRAPPER}} .wrapper',
			]
		);

		$this->end_controls_section();

	}

}
```

--------------------------------

### Override Conditions for Templates

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/cli/kit-import.md

Example of importing all content and overriding conditions for specific template IDs.

```bash
wp elementor kit import path/to/elementor-kit.zip --overrideConditions=3478,4520
```

--------------------------------

### First Widget (hello-world-widget-1.php)

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/getting-started/first-addon.md

This PHP file defines the 'Hello World 1' widget for Elementor. It extends the base Widget_Base class and sets up its name, title, icon, categories, keywords, and rendering methods.

```php
<?php
class Elementor_Hello_World_Widget_1 extends 
Elementor
Widget_Base {

	public function get_name(): string {
		return 'hello_world_widget_1';
	}

	public function get_title(): string {
		return esc_html__( 'Hello World 1', 'elementor-addon' );
	}

	public function get_icon(): string {
		return 'eicon-code';
	}

	public function get_categories(): array {
		return [ 'basic' ];
	}

	public function get_keywords(): array {
		return [ 'hello', 'world' ];
	}

	protected function render(): void {
		?>
		<p> Hello World </p>
		<?php
	}

	protected function content_template(): void {
		?>
		<p> Hello World </p>
		<?php
	}
}

```

--------------------------------

### Widget File: widgets/oembed-widget.php

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/widgets/simple-example.md

The Elementor widget class for the oEmbed Widget. It defines the widget's name, title, icon, categories, keywords, and registers its controls and rendering logic.

```php
<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Elementor oEmbed Widget.
 *
 * Elementor widget that inserts an embbedable content into the page, from any given URL.
 *
 * @since 1.0.0
 */
class Elementor_oEmbed_Widget extends \Elementor\Widget_Base {

	/**
	 * Get widget name.
	 *
	 * Retrieve oEmbed widget name.
	 *
	 * @since 1.0.0
	 * @access public
	 * @return string Widget name.
	 */
	public function get_name(): string {
		return 'oembed';
	}

	/**
	 * Get widget title.
	 *
	 * Retrieve oEmbed widget title.
	 *
	 * @since 1.0.0
	 * @access public
	 * @return string Widget title.
	 */
	public function get_title(): string {
		return esc_html__( 'oEmbed', 'elementor-oembed-widget' );
	}

	/**
	 * Get widget icon.
	 *
	 * Retrieve oEmbed widget icon.
	 *
	 * @since 1.0.0
	 * @access public
	 * @return string Widget icon.
	 */
	public function get_icon(): string {
		return 'eicon-code';
	}

	/**
	 * Get widget categories.
	 *
	 * Retrieve the list of categories the oEmbed widget belongs to.
	 *
	 * @since 1.0.0
	 * @access public
	 * @return array Widget categories.
	 */
	public function get_categories(): array {
		return [ 'general' ];
	}

	/**
	 * Get widget keywords.
	 *
	 * Retrieve the list of keywords the oEmbed widget belongs to.
	 *
	 * @since 1.0.0
	 * @access public
	 * @return array Widget keywords.
	 */
	public function get_keywords(): array {
		return [ 'oembed', 'url', 'link' ];
	}

	/**
	 * Get custom help URL.
	 *
	 * Retrieve a URL where the user can get more information about the widget.
	 *
	 * @since 1.0.0
	 * @access public
	 * @return string Widget help URL.
	 */
	public function get_custom_help_url(): string {
		return 'https://developers.elementor.com/docs/widgets/';
	}

	/**
	 * Whether the widget requires inner wrapper.
	 *
	 * Determine whether to optimize the DOM size.
	 *
	 * @since 1.0.0
	 * @access public
	 * @return bool Whether to optimize the DOM size.
	 */
	public function has_widget_inner_wrapper(): bool {
		return false;
	}

	/**
	 * Whether the element returns dynamic content.
	 *
	 * Determine whether to cache the element output or not.
	 *
	 * @since 1.0.0
	 * @access protected
	 * @return bool Whether to cache the element output.
	 */
	protected function is_dynamic_content(): bool {
		return false;
	}

	/**
	 * Register oEmbed widget controls.
	 *
	 * Add input fields to allow the user to customize the widget settings.
	 *
	 * @since 1.0.0
	 * @access protected
	 */
	protected function register_controls(): void {

		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Content', 'elementor-oembed-widget' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'url',
			[
				'label' => esc_html__( 'URL to embed', 'elementor-oembed-widget' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'input_type' => 'url',
				'placeholder' => esc_html__( 'https://your-link.com', 'elementor-oembed-widget' ),
			]
		);

		$this->end_controls_section();

	}

	/**
	 * Render oEmbed widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @since 1.0.0
	 * @access protected
	 */
	protected function render(): void {
		$settings = $this->get_settings_for_display();

		if ( empty( $settings['url'] ) ) {
			return;
		}

		$html = wp_oembed_get( $settings['url'] );
		?>
		<div class="oembed-elementor-widget">
			<?php echo ( $html ) ? $html : $settings['url']; ?>
		</div>
		<?php
	}

}

```

--------------------------------

### On Export Method Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/form-actions/action-on-export.md

This example demonstrates the basic structure of the on_export() method in a custom Elementor action class.

```php
class Elementor_Test_Action extends \ElementorPro\Modules\Forms\Classes\Action_Base {

	public function on_export( $element ): array {

		return $element;

	}

}
```

--------------------------------

### Elementor Currency Control Plugin Main File

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/controls/simple-example.md

The main plugin file for 'Elementor Currency Control'. It includes plugin headers, security checks, and hooks to register the custom currency control and a currency widget.

```php
<?php
/**
 * Plugin Name: Elementor Currency Control
 * Description: Add new Elementor control for currencies selection.
 * Plugin URI:  https://elementor.com/
 * Version:     1.0.0
 * Author:      Elementor Developer
 * Author URI:  https://developers.elementor.com/
 * Text Domain: elementor-currency-control
 *
 * Requires Plugins: elementor
 * Elementor tested up to: 3.25.0
 * Elementor Pro tested up to: 3.25.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Register Currency Control.
 *
 * Include control file and register control class.
 *
 * @since 1.0.0
 * @param \Elementor\Controls_Manager $controls_manager Elementor controls manager.
 * @return void
 */
function register_currency_control( $controls_manager ) {

	require_once( __DIR__ . '/controls/currency.php' );

    $controls_manager->register( new \Elementor_Currency_Control() );

}
add_action( 'elementor/controls/register', 'register_currency_control' );

/**
 * Register Currency Widget.
 *
 * Include widget file and register widget class.
 *
 * @since 1.0.0
 * @param \Elementor\Widgets_Manager $widgets_manager Elementor widgets manager.
 * @return void
 */
function register_currency_widget( $widgets_manager ) {

	require_once( __DIR__ . '/widgets/currency-widget.php' );

	$widgets_manager->register( new \Elementor_Currency_Widget() );

}
add_action( 'elementor/widgets/register', 'register_currency_widget' );

```

--------------------------------

### Typography Control Example

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/editor-controls/group-control.md

Example of adding a typography group control to style text elements in an Elementor widget.

```php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

		$this->start_controls_section(
			'style_section',
			[
				'label' => esc_html__( 'Style', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'title_typography',
				'selector' => '{{WRAPPER}} .title',
			]
		);

		$this->end_controls_section();

	}

}
```

--------------------------------

### Example of Inline Editing with Different Toolbars

Source: https://github.com/elementor/elementor-developers-docs/blob/master/src/widgets/rendering-inline-editing.md

This example shows a full implementation with three controls: a title with no toolbar, a description with a basic toolbar, and content with an advanced toolbar, demonstrating inline editing capabilities.

```php
<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Content', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'title',
			[
				'label' => esc_html__( 'Title', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'default' => esc_html__( 'Title', 'textdomain' ),
			]
		);

		$this->add_control(
			'description',
			[
				'label' => esc_html__( 'Description', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::TEXTAREA,
				'default' => esc_html__( 'Description', 'textdomain' ),
			]
		);

		$this->add_control(
			'content',
			[
				'label' => esc_html__( 'Content', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::WYSIWYG,
				'default' => esc_html__( 'Content', 'textdomain' ),
			]
		);

		$this->end_controls_section();

	}

	protected function render(): void {
		$settings = $this->get_settings_for_display();

		$this->add_inline_editing_attributes( 'title', 'none' );
		$this->add_inline_editing_attributes( 'description', 'basic' );
		$this->add_inline_editing_attributes( 'content', 'advanced' );
		?>
		<h2 <?php $this->print_render_attribute_string( 'title' ); ?>><?php echo $settings['title']; ?></h2>
		<div <?php $this->print_render_attribute_string( 'description' ); ?>><?php echo $settings['description']; ?></div>
		<div <?php $this->print_render_attribute_string( 'content' ); ?>><?php echo $settings['content']; ?></div>
		<?php
	}

	protected function content_template(): void {
		?>
		<#
		view.addInlineEditingAttributes( 'title', 'none' );
		view.addInlineEditingAttributes( 'description', 'basic' );
		view.addInlineEditingAttributes( 'content', 'advanced' );
		#>
		<h2 {{{ view.getRenderAttributeString( 'title' ) }}}>{{{ settings.title }}}
		<div {{{ view.getRenderAttributeString( 'description' ) }}}>{{{ settings.description }}}
		<div {{{ view.getRenderAttributeString( 'content' ) }}}>{{{ settings.content }}}
		<?php
	}

}

```