Elementor Custom Widget

The Elementor plugin for WordPress allows you to create custom widgets to extend the functionality of your website. These custom widgets can be used to add new elements or features to your pages built with Elementor.

To create a custom widget in Elementor, you need to use the Widget_Base class provided by Elementor. This class provides a set of methods that you can override to define the behavior and appearance of your custom widget.

Here’s an example of how to create a custom widget using Elementor:

<?php
// Define the custom widget class
class Custom_Widget extends ElementorWidget_Base {

    // Widget name (title)
    public function get_name() {
        return 'custom-widget';
    }

    // Widget title
    public function get_title() {
        return 'Custom Widget';
    }

    // Widget icon (optional)
    public function get_icon() {
        return 'fa fa-code';
    }

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

    // Widget controls (settings)
    protected function _register_controls() {
        // Add your widget controls here
    }

    // Render the widget output on the frontend
    protected function render() {
        // Add your widget output here
    }

    // Render the widget output in the editor
    protected function _content_template() {
        // Add your widget output for the editor here
    }
}

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

In this example, we define a Custom_Widget class that extends the Widget_Base class provided by Elementor. We override several methods to define the name, title, icon, categories, controls, and rendering behavior of the widget.

To register the custom widget, we use the elementor/widgets/widgets_registered action hook and the register_widget_type() method provided by Elementor’s widgets manager.

Once the custom widget is registered, you can add it to your Elementor pages just like any other widget. It will appear in the “General” category with the title “Custom Widget” and the specified icon.

This code snippet can be useful when you want to add a custom element or feature to your Elementor pages that is not available in the default set of widgets. By creating a custom widget, you have full control over its appearance and behavior, allowing you to tailor it to your specific needs.

Examples

Example 1: Creating a Custom Elementor Widget

This use case demonstrates how to create a custom Elementor widget using WordPress coding standards.

class WPSnippets_Custom_Elementor_Widget extends ElementorWidget_Base {

    public function get_name() {
        return 'wpsnippets-custom-widget';
    }

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

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

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

    protected function _register_controls() {
        // Widget controls registration
    }

    protected function render() {
        // Widget rendering logic
    }
}

In this code example, we create a custom Elementor widget by extending the ElementorWidget_Base class. We define the widget’s name, title, icon, and category using the appropriate methods. The _register_controls() method is used to register the widget’s controls, and the render() method is responsible for rendering the widget’s output.

Example 2: Adding Custom Controls to the Elementor Widget

This use case demonstrates how to add custom controls to a custom Elementor widget.

protected function _register_controls() {
    $this->start_controls_section(
        'section_content',
        [
            'label' => __( 'Content', 'text-domain' ),
        ]
    );

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

    $this->end_controls_section();
}

In this code example, we use the _register_controls() method to add a new control section to the custom Elementor widget. Within the section, we add a text control for the widget’s title. The control is defined using the add_control() method, specifying the label, type, and default value.

Example 3: Rendering the Elementor Widget Output

This use case demonstrates how to render the output of a custom Elementor widget.

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

    echo '<h2>' . esc_html( $settings['title'] ) . '</h2>';
}

In this code example, we retrieve the widget’s settings using the get_settings_for_display() method. We then access the title setting and output it as an HTML heading element. The esc_html() function is used to sanitize the title before outputting it to prevent any potential security vulnerabilities.