Introduction

The “Custom Elementor Widget” is a powerful option that allows you to create stunning and dynamic widget with ease, all within the popular Elementor page builder. Whether you’re a web developer or a non-technical user, this custom widget provides a seamless and intuitive way to incorporate sleek and minimalistic option into your Elementor-powered websites.

With this custom widget, you have full control over the design, functionality, and behavior of your UI. It empowers you to showcase your content in an engaging and visually appealing manner, enhancing the user experience and capturing your visitors’ attention.

Lets jump in!!!

Creating a custom Elementor widget

Creating a custom Elementor widget involves several steps. Here’s the step by step guide to create a custom Elementor widget using PHP. We will use only 2 fields in this example.

• Title
• Description

The title will be textbox and the description will be textarea but you can choose any fields from the list of provided controls by Elementor plugin.

Certainly! Let’s go through the code step by step to understand each part:

Defining the Class and Extending the Widget_Base Class

<?php
class dcs_Custom_Elementor_Widget extends ElementorWidget_Base {
    // methods will go here   
}

This code defines a class named `Custom_Elementor_Widget` that extends the `Widget_Base` class provided by Elementor. This class serves as the foundation for creating custom widgets in Elementor.

Defining the Widget Name,  Title, Icon, and Categories

Defining the widget name, title, icon and category is an important step.

Note: All the steps till step 8 will go inside the class we defined in step 1.

Defining the Widget Name

<?php
// Widget Name
public function get_name() {
    return 'custom-widget';
}

Defining the Widget Title

Below code will create the title for the widget which will be the name of the widget you will see in the list of all available Elemetor widget inside editor.

<?php
// Widget Title
public function get_title() {
    return __('Custom Widget', 'text-domain');
}

Defining the Widget Icon

Now is the time to provide an icon for your widget which will show along with the title of the custom elementor widget. Below is the code for widget icon.

<?php
// Widget Icon (optional)
public function get_icon() {
    return 'eicon-post';
}

Defining the Widget Categories

This is another very important function while creating the elementor widget. If you ever noticed that the widgets in the elementor are separated into different Labels like “General”, “Basic” etc. like the screenshot below:

In order to add your elementor widget into one of these categories/group, you have to add the following function:

<?php
// Widget Categories (optional)
public function get_categories() {
    return ['general'];
}

With this, your Custom-built Elementor Widget will show under the general tab.

Registering Widget Controls

<?php
// Widget Controls (fields)
protected function _register_controls(){
    // Add widget controls here
    $this->start_controls_section(
        'section_content',
        [
            'label' => __('Content', 'text-domain'),
        ]
    );

    $this->add_control(
        'title',
        [
            'label' => __('Title', 'text-domain'),
            'type' => ElementorControls_Manager::TEXT,
            'default' => __('Custom Widget', 'text-domain'),
        ]
    );

    $this->add_control(
        'description',
        [
            'label' => __('Description', 'text-domain'),
            'type' => ElementorControls_Manager::TEXTAREA,
            'rows' => 5,
            'default' => __('Widget description goes here.', 'text-domain'),
        ]
    );

    $this->end_controls_section();
}

This method is used to register the widget controls (fields) that will appear in the Elementor editor. Inside this method, you can define the different controls such as text inputs, text areas, select dropdowns, etc., using the `add_control` method.

In the provided code, two controls are registered: `title` and `description`. The `title` control is a text input field, and the `description` control is a text area field.

Rendering Widget Output on the Frontend

<?php
// Render widget output on the frontend
protected function render() {
    $settings = $this->get_settings_for_display();
    echo '<h2>' . $settings['title'] . '</h2>';
    echo '<p>' . $settings['description'] . '</p>';
}

This method is responsible for rendering the output of the widget on the frontend when the page is viewed. It retrieves the settings using the `get_settings_for_display` method and then outputs the HTML markup based on those settings.

In the provided code, it outputs an `<h2>` tag with the widget title and a `<p>` tag with the widget description.

Rendering Widget Output in the Editor

// Render widget output in the editor
protected function _content_template(){
    ?>
    <#
    view.addInlineEditingAttributes('title', 'basic');
    view.addInlineEditingAttributes('description', 'advanced');
    #>
    <h2 {{{ view.getRenderAttributeString('title') }}}>{{{ settings.title }}}</h2>
    <p {{{ view.getRenderAttributeString('description') }}}>{{{ settings.description }}}</p>
    <?php
}

This method is responsible for rendering the output of the widget in the Elementor editor itself. It uses a combination of HTML and JavaScript-like syntax (using `<#` and `#>`) to define the structure and dynamic attributes of the widget output.

In the provided code, it renders an `<h2>` tag and a `<p>` tag with inline editing attributes that allow the title and description to be edited directly in the Elementor editor.

Registering the Custom Elementor Widget

// Register the custom Elementor widget
function register_custom_elementor_widget(){
    ElementorPlugin::instance()->widgets_manager->register_widget_type(new dcs_Custom_Elementor_Widget());
}

This function is responsible for registering the custom Elementor widget. It uses the `widgets_manager` property of the Elementor Plugin instance to register the widget type by creating a new instance of the `Custom_Elementor_Widget` class.

Hooking the Widget Registration

add_action('elementor/widgets/widgets_registered', 'register_custom_elementor_widget');

This line of code hooks the `register_custom_elementor_widget` function to the `elementor/widgets/widgets_registered` action. It ensures that the custom widget is registered when the widgets are being initialized by Elementor.

Make sure to save this code in a file within your WordPress theme or custom plugin to create a custom Elementor widget.

Complete code for custom elementor widget

Creating a custom Elementor widget involves several steps. Here’s an example of a complete code to create a custom Elementor widget using PHP.

<?php
// Ensure this file is called from within WordPress.
if (!defined('ABSPATH')) {
    exit;
}

class dcs_Custom_Elementor_Widget extends ElementorWidget_Base
{
    // Widget Name
    public function get_name()
    {
        return 'custom-widget';
    }

    // Widget Title
    public function get_title()
    {
        return __('Custom Widget', 'text-domain');
    }

    // Widget Icon (optional)
    public function get_icon()
    {
        return 'eicon-post';
    }

    // Widget Categories (optional)
    public function get_categories()
    {
        return ['general'];
    }

    // Widget Controls (fields)
    protected function _register_controls()
    {
        // Add widget controls here
        $this->start_controls_section(
            'section_content',
            [
                'label' => __('Content', 'text-domain'),
            ]
        );

        $this->add_control(
            'title',
            [
                'label' => __('Title', 'text-domain'),
                'type' => ElementorControls_Manager::TEXT,
                'default' => __('Custom Widget', 'text-domain'),
            ]
        );

        $this->add_control(
            'description',
            [
                'label' => __('Description', 'text-domain'),
                'type' => ElementorControls_Manager::TEXTAREA,
                'rows' => 5,
                'default' => __('Widget description goes here.', 'text-domain'),
            ]
        );

        $this->end_controls_section();
    }

    // Render widget output on the frontend
    protected function render()
    {
        $settings = $this->get_settings_for_display();

        echo '<h2>' . $settings['title'] . '</h2>';
        echo '<p>' . $settings['description'] . '</p>';
    }

    // Render widget output in the editor
    protected function _content_template()
    {
        ?>
        <#
        view.addInlineEditingAttributes('title', 'basic');
        view.addInlineEditingAttributes('description', 'advanced');
        #>
        <h2 {{{ view.getRenderAttributeString('title') }}}>{{{ settings.title }}}</h2>
        <p {{{ view.getRenderAttributeString('description') }}}>{{{ settings.description }}}</p>
        <?php
    }
}

// Register the custom Elementor widget
function register_custom_elementor_widget()
{
    ElementorPlugin::instance()->widgets_manager->register_widget_type(new dcs_Custom_Elementor_Widget());
}
add_action('elementor/widgets/widgets_registered', 'register_custom_elementor_widget');

In the code above, you need to replace text-domain with your own text domain, which represents the unique identifier for translations. Additionally, you can customize the widget controls (fields) to suit your specific needs by adding or modifying the control options within the _register_controls method.

Make sure to save this code in a file within your WordPress theme or custom plugin, and it will create a custom Elementor widget named “Custom Widget” that can be added and configured using the Elementor page builder interface.

Conclusion

The article provides a step-by-step guide on creating a custom Elementor widget. It explains how to extend the Widget_Base class and defines the widget’s name, title, icon, and categories. The process of registering widget controls is demonstrated, allowing for the customization of fields in the Elementor editor. The rendering of the widget’s output on the frontend and within the editor is covered, along with the necessary code for registering the custom widget. Overall, the article offers a comprehensive overview of the process involved in creating a custom Elementor widget.