Summary –,

Article –

To create a custom Elementor widget, follow these steps:

1. Setup a Basic Plugin Structure

Create a new folder inside your WordPress wp-content/plugins directory, for example, custom-elementor-widget. Inside this folder, create a PHP file, e.g., custom-elementor-widget.php, where you will register your widget.

2. Register the Widget

Make sure your plugin file has the right header to be recognized by WordPress:

<?php
/**
 * Plugin Name: Custom Elementor Widget
 * Description: Adds a custom widget to Elementor.
 * Version: 1.0
 * Author: Your Name
 */

Enqueue Elementor’s widget components and register your widget class within a function hooked to elementor/widgets/widgets_registered. This ensures your widget gets loaded at the right time.

3. Create Your Widget Class

The widget extends Elementor\Widget_Base. In this class, define:

• get_name(): an internal name for your widget.
• get_title(): the title displayed in Elementor’s widget panel.
• get_icon(): the icon shown in the panel.
• get_categories(): categories your widget belongs to.
• register_controls(): controls users can change (like text, images).
• render(): the HTML output of your widget.

4. Example Widget Code

namespace Custom_Elementor_Widget;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

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

class Sample_Widget extends Widget_Base {

    public function get_name() {
        return 'sample_widget';
    }

    public function get_title() {
        return __( 'Sample Widget', 'custom-elementor-widget' );
    }

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

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

    protected function register_controls() {
        $this->start_controls_section(
            'content_section',
            [
                'label' => __( 'Content', 'custom-elementor-widget' ),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'title_text',
            [
                'label' => __( 'Title', 'custom-elementor-widget' ),
                'type' => Controls_Manager::TEXT,
                'default' => __( 'Hello World', 'custom-elementor-widget' ),
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        echo '<h2>' . esc_html( $settings['title_text'] ) . '</h2>';
    }
}

5. Register the Widget with Elementor

function register_sample_widget( $widgets_manager ) {
    require_once( __DIR__ . '/widgets/sample-widget.php' );
    $widgets_manager->register( new \Custom_Elementor_Widget\Sample_Widget() );
}

add_action( 'elementor/widgets/register', 'register_sample_widget' );

6. Activate Your Plugin

Visit the WordPress admin dashboard, navigate to Plugins > Installed Plugins, and activate your new plugin.

Once activated, your custom widget will appear in the Elementor editor under the specified category, ready to use and customize.

About The Author

Amanda

See author's posts