Creating Your First Elementor Widget

Elementor is a popular WordPress plugin that allows you to build complex, responsive website designs without having to write much (if any) code. However, for those who want more control and flexibility, it also provides an API for creating custom widgets.

In this article, we will guide you on how to create your first Elementor custom widget programmatically. We will start by introducing the basic structure and components of a custom widget and then provide a step-by-step example.

What is an Elementor Widget?

An Elementor widget is a PHP class that defines a specific Elementor feature. It might contain front-end HTML, widget settings, and form fields, which you can manipulate to build your website. These widgets can be dragged and dropped onto your website using the Elementor interface.

Basic Steps to Creating a Custom Widget

1. Setting Up Your Plugin

Before we start, ensure that you have a functioning WordPress installation with the Elementor plugin installed and activated. To create a custom Elementor widget, you first need to create a custom plugin. Create a new folder in your /wp-content/plugins/ directory, such as /my-elementor-widget/.

Within this folder, create a my-elementor-widget.php file with the following content:

<?php
/*
Plugin Name: My Elementor Widget
Description: My first custom Elementor widget.
Version: 1.0.0
Author: Your Name
Author URI: http://your-website.com
*/

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

// Define plugin constants
define( 'MY_ELEMENTOR_WIDGET__FILE__', __FILE__ );
define( 'MY_ELEMENTOR_WIDGET__DIR__', __DIR__ );

// Include the main plugin file
require_once MY_ELEMENTOR_WIDGET__DIR__ . '/plugin.php';

Then, create a plugin.php file:

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

final class My_Elementor_Widget {

    const VERSION = '1.0.0';

    private static $_instance = null;

    public static function instance() {
        if ( is_null( self::$_instance ) ) {
            self::$_instance = new self();
        }
        return self::$_instance;
    }

    public function __construct() {
        add_action( 'elementor/widgets/widgets_registered', [ $this, 'init_widgets' ] );
    }

    public function init_widgets() {
        // Require the widget file
        require_once MY_ELEMENTOR_WIDGET__DIR__ . '/widgets/my-widget.php';

        // Register the widget
        \Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \My_Elementor_Widget() );
    }
}

// Instantiate the plugin
My_Elementor_Widget::instance();

2. Creating Your Widget Class

Now, we’re ready to create our custom widget. Make a widgets directory in your plugin folder and then create a my-widget.php file:

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

class My_Widget extends \Elementor\Widget_Base {

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

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

    public function get_icon() {
        return 'fa fa-code'; // Use Elementor's default icon or upload your custom icon
    }

    public function get_categories() {
        return [ 'general' ]; // The widget's category. You can use existing categories or create a new one
    }

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

    protected function render() {
        // Output widget HTML here
    }

    protected function _content_template() {
        // Output widget template content here
    }
}

In this file, we define a new class, My_Widget, that extends \Elementor\Widget_Base. The class has methods for getting metadata (like the name, title, and icon) and for registering controls and rendering content.

Finally, make sure you activate your plugin from the WordPress admin panel. If everything has been done correctly, your new widget should appear in the Elementor interface under the “General” category.

Building and Customizing Your Widget

Now that you have the basic structure in place, you can customize your widget by adding controls in the _register_controls() method and adding output in the render() method. You can also use the _content_template() method to define the content template for your widget, which will be used in the Elementor editor.

Congratulations! You have just created your first custom Elementor widget. From here, you can start adding more complex functionalities and controls to your widget, allowing you to create truly unique features for your Elementor-based websites. The Elementor developer’s documentation is a great resource if you need more information on creating custom widgets.