Loading...
Loading...
Use when building Elementor addons, creating custom widgets, or managing Elementor components. Covers Widget_Base class (get_name, get_title, get_icon, register_controls, render, content_template), widget registration via elementor/widgets/register hook, addon structure and plugin header, wp_enqueue_script for widget assets, get_script_depends, get_style_depends, inline editing toolbars, custom widget categories, manager registration (register/unregister), selector tokens ({{WRAPPER}}), deprecation handling, and Elementor CLI commands.
npx skill4agent add peixotorms/odinlayer-skills elementor-development<?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
*/
defined( 'ABSPATH' ) || exit;
function elementor_test_addon() {
require_once __DIR__ . '/includes/plugin.php';
\Elementor_Test_Addon\Plugin::instance();
}
add_action( 'plugins_loaded', 'elementor_test_addon' );namespace Elementor_Test_Addon;
final class Plugin {
const VERSION = '1.0.0';
const MINIMUM_ELEMENTOR_VERSION = '3.20.0';
const MINIMUM_PHP_VERSION = '7.4';
private static $_instance = null;
public static function instance() {
if ( is_null( self::$_instance ) ) {
self::$_instance = new self();
}
return self::$_instance;
}
public function __construct() {
if ( $this->is_compatible() ) {
add_action( 'elementor/init', [ $this, 'init' ] );
}
}
public function is_compatible(): bool {
if ( ! did_action( 'elementor/loaded' ) ) {
add_action( 'admin_notices', [ $this, 'admin_notice_missing_main_plugin' ] );
return false;
}
if ( ! version_compare( ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=' ) ) {
add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] );
return false;
}
if ( version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<' ) ) {
add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] );
return false;
}
return true;
}
public function init(): void {
add_action( 'elementor/widgets/register', [ $this, 'register_widgets' ] );
add_action( 'elementor/controls/register', [ $this, 'register_controls' ] );
}
public function register_widgets( $widgets_manager ): void {
require_once __DIR__ . '/widgets/widget-1.php';
$widgets_manager->register( new \Elementor_Widget_1() );
}
public function register_controls( $controls_manager ): void {
require_once __DIR__ . '/controls/control-1.php';
$controls_manager->register( new \Elementor_Control_1() );
}
}elementor-test-addon/
elementor-test-addon.php # Main file with headers
includes/
plugin.php # Main class (singleton)
widgets/ # Widget classes
controls/ # Custom controls
dynamic-tags/ # Dynamic tag classes
finder/ # Finder category classes
assets/
js/ # Frontend/editor JS
css/ # Frontend/editor CSS
images/class Elementor_Test_Widget extends \Elementor\Widget_Base {
// --- Required ---
public function get_name(): string {
return 'test_widget';
}
public function get_title(): string {
return esc_html__( 'Test Widget', 'textdomain' );
}
public function get_icon(): string {
return 'eicon-code';
}
public function get_categories(): array {
return [ 'general' ];
}
// --- Optional ---
public function get_keywords(): array {
return [ 'test', 'example' ];
}
public function get_custom_help_url(): string {
return 'https://example.com/widget-help';
}
public function get_script_depends(): array {
return [ 'widget-custom-script' ];
}
public function get_style_depends(): array {
return [ 'widget-custom-style' ];
}
public function has_widget_inner_wrapper(): bool {
return false; // DOM optimization: single wrapper
}
protected function is_dynamic_content(): bool {
return false; // Enable output caching for static content
}
protected function get_upsale_data(): array {
return [
'condition' => ! \Elementor\Utils::has_pro(),
'image' => esc_url( ELEMENTOR_ASSETS_URL . 'images/go-pro.svg' ),
'image_alt' => esc_attr__( 'Upgrade', 'textdomain' ),
'title' => esc_html__( 'Promotion heading', 'textdomain' ),
'description' => esc_html__( 'Get the premium version.', 'textdomain' ),
'upgrade_url' => esc_url( 'https://example.com/upgrade-to-pro/' ),
'upgrade_text' => esc_html__( 'Upgrade Now', 'textdomain' ),
];
}
protected function register_controls(): void { /* see resources/widget-rendering.md */ }
protected function render(): void { /* see resources/widget-rendering.md */ }
protected function content_template(): void { /* see resources/widget-rendering.md */ }
}function add_elementor_widget_categories( $elements_manager ) {
$elements_manager->add_category( 'my-category', [
'title' => esc_html__( 'My Category', 'textdomain' ),
'icon' => 'fa fa-plug',
] );
}
add_action( 'elementor/elements/categories_registered', 'add_elementor_widget_categories' );| Token | Description |
|---|---|
| Widget wrapper element |
| Control value |
| Unit control value |
| URL from media control |
| Group control CSS selector |
| Mode | Toolbar | Use Case |
|---|---|---|
| No toolbar | Plain text headings |
| Bold, italic, underline | Short descriptions |
| Full (links, headings, lists) | Rich text content |
| Component | Hook | Manager Type | Method |
|---|---|---|---|
| Widgets | | | |
| Controls | | | |
| Dynamic Tags | | | |
| Finder | | | |
| Categories | | | |
function register_new_widgets( $widgets_manager ) {
require_once __DIR__ . '/widgets/widget-1.php';
$widgets_manager->register( new \Elementor_Widget_1() );
}
add_action( 'elementor/widgets/register', 'register_new_widgets' );function unregister_widgets( $widgets_manager ) {
$widgets_manager->unregister( 'heading' );
$widgets_manager->unregister( 'image' );
}
add_action( 'elementor/widgets/register', 'unregister_widgets' );function register_new_controls( $controls_manager ) {
require_once __DIR__ . '/controls/control-1.php';
$controls_manager->register( new \Elementor_Control_1() );
}
add_action( 'elementor/controls/register', 'register_new_controls' );
function unregister_controls( $controls_manager ) {
$controls_manager->unregister( 'control-1' );
}
add_action( 'elementor/controls/register', 'unregister_controls' );function register_dynamic_tags( $dynamic_tags_manager ) {
require_once __DIR__ . '/dynamic-tags/tag-1.php';
$dynamic_tags_manager->register( new \Elementor_Dynamic_Tag_1() );
}
add_action( 'elementor/dynamic_tags/register', 'register_dynamic_tags' );
function unregister_dynamic_tags( $dynamic_tags_manager ) {
$dynamic_tags_manager->unregister( 'dynamic-tag-1' );
}
add_action( 'elementor/dynamic_tags/register', 'unregister_dynamic_tags' );function register_finder_categories( $finder_manager ) {
require_once __DIR__ . '/finder/finder-1.php';
$finder_manager->register( new \Elementor_Finder_Category_1() );
}
add_action( 'elementor/finder/register', 'register_finder_categories' );
function unregister_finder_categories( $finder_manager ) {
$finder_manager->unregister( 'finder-category-1' );
}
add_action( 'elementor/finder/register', 'unregister_finder_categories' );| Hook | Purpose |
|---|---|
| Register scripts before Elementor |
| Register scripts after Elementor |
| Enqueue scripts before Elementor |
| Enqueue scripts after Elementor |
| Register styles before Elementor |
| Register styles after Elementor |
| Enqueue styles before Elementor |
| Enqueue styles after Elementor |
| Hook | Purpose |
|---|---|
| Enqueue editor scripts (before) |
| Enqueue editor scripts (after) |
| Enqueue editor styles (before) |
| Enqueue editor styles (after) |
| Hook | Purpose |
|---|---|
| Enqueue preview scripts |
| Enqueue preview styles |
function my_plugin_frontend_scripts() {
wp_register_script( 'my-widget-script', plugins_url( 'assets/js/widget.js', __FILE__ ) );
wp_register_style( 'my-widget-style', plugins_url( 'assets/css/widget.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_frontend_scripts' );public function get_script_depends(): array {
return [ 'my-widget-script', 'external-library' ];
}
public function get_style_depends(): array {
return [ 'my-widget-style', 'external-framework' ];
}class My_Control extends \Elementor\Base_Control {
protected function enqueue(): void {
wp_enqueue_script( 'control-script' );
wp_enqueue_style( 'control-style' );
}
}| Mistake | Fix |
|---|---|
Using | Use |
Calling | Use |
Using | Use |
Using | Use |
Skipping | Always verify Elementor is loaded before using its classes |
Missing | Add it so WordPress enforces Elementor dependency |
Using | Use |
| Not declaring widget script/style dependencies | Implement |
| Enqueueing scripts globally instead of per-widget | Register with |
Using | Use Elementor template syntax or DOM methods |
Not using | Always wrap user-visible strings in localization functions |
Missing | Add to every PHP file to prevent direct access |
Using | Return |
Not implementing | Without it, editor preview requires server round-trip on every change |
Using | Use |