How to create a custom widget for Elementor step by step

If you use Elementor on WordPress, you probably already know how useful it is for designing pages visually. But if you’re a developer—or just learning—you can also create your own custom widgets to expand its functionality.

In this article, I’ll show you how to build a basic custom widget for Elementor from scratch. Perfect for adding to a plugin or your own theme.

Plugin structure

First, let’s create a folder for our plugin with the following structure:

/my-elementor-widget/
│
├── my-elementor-widget.php
└── widgets/
    └── greeting-widget.php

The main file (my-elementor-widget.php) will initialize the plugin and register our custom widget.

<?php
/**
 * Plugin Name: My Elementor Widget
 * Description: A custom widget for Elementor that displays a greeting.
 * Version: 1.0
 * Author: Your Name
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

function registerCustomElementorWidget( $widgetsManager ) {
    require_once plugin_dir_path( __FILE__ ) . 'widgets/greeting-widget.php';

    $widgetsManager->register( new \GreetingWidget() );
}
add_action( 'elementor/widgets/register', 'registerCustomElementorWidget' );

Create the widget: greeting-widget.php

Now we’ll create a simple widget that displays a greeting. This widget allows you to type a message from the Elementor editor and display it anywhere on the page.

<?php

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

class GreetingWidget extends Widget_Base {

    public function getName() {
        return 'greetingWidget';
    }

    public function getTitle() {
        return 'Custom Greeting';
    }

    public function getIcon() {
        return 'eicon-person';
    }

    public function getCategories() {
        return [ 'general' ];
    }

    protected function registerControls() {
        $this->startControlsSection(
            'contentSection',
            [
                'label' => 'Content',
                'tab'   => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->addControl(
            'greetingText',
            [
                'label'       => 'Message',
                'type'        => Controls_Manager::TEXT,
                'default'     => 'Hello, world!',
                'placeholder' => 'Type your message...',
            ]
        );

        $this->endControlsSection();
    }

    protected function render() {
        $settings = $this->getSettingsForDisplay();
        echo '<div class="my-greeting-widget">' . esc_html( $settings['greetingText'] ) . '</div>';
    }
}

Activate and test the widget

1. Upload the my-elementor-widget folder to the wp-content/plugins/ directory.
2. Activate the plugin from the WordPress admin panel.
3. Open any page using Elementor and look for the widget called “Custom Greeting“.
4. Drag it into your layout and type the message you want to show.

Result

This widget will display the message you typed in Elementor, exactly where you placed it. It’s a great base to build more advanced widgets with more fields and options.

Creating custom widgets for Elementor gives you full control over what appears on your site. This example is simple, but you can easily extend it with more controls, custom styles, or extra functionality.

Related posts:

Crear un widget personalizado para Elementor paso a paso How to create custom post types in WordPress: Complete and Advanced Guide Create a custom and ligther WP ajax using SHORTINIT How to build a custom endpoint in WordPress