Elementor is one of the most popular page builders for WordPress, offering a simple drag-and-drop interface for designing stunning websites. One of the most powerful features of Elementor is its extensibility, allowing developers to create custom widgets to enhance the page-building experience.

In this step-by-step guide, we’ll walk you through the process of building a custom Elementor widget from scratch. Whether you’re a WordPress developer looking to expand your toolkit or a designer who wants more control over your Elementor content, this guide will help you create a widget that suits your needs.

Prerequisites

Before we start, ensure that you have the following:

1. A WordPress website: You should have a WordPress website with Elementor installed.
2. Basic knowledge of PHP, HTML, and CSS: You’ll need some understanding of these technologies to build a custom widget.
3. A local development environment or staging site: If you’re working on a live site, be cautious when adding custom code. It’s better to experiment on a local environment or staging site first.

Now let’s get started!

Step 1: Create a Plugin for Your Custom Widget

Instead of adding custom code directly to your theme’s functions.php file, it’s best to create a plugin for your custom widget. This approach ensures that your widget will remain intact even if you change themes.

1.1. Create a Plugin Folder

Go to your WordPress installation’s wp-content/plugins directory and create a new folder for your plugin. For example, name it custom-elementor-widgets.

1.2. Create the Plugin File

Inside your plugin folder, create a PHP file named custom-elementor-widget.php (or something similar). Open this file and add the following code:

phpCopyEdit<?php
/**
 * Plugin Name: Custom Elementor Widgets
 * Description: A plugin to add custom Elementor widgets.
 * Version: 1.0
 * Author: Your Name
 * Text Domain: custom-elementor-widgets
 */

// Ensure Elementor is active before proceeding.
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

function register_custom_elementor_widget( $widgets_manager ) {
    require_once( __DIR__ . '/widgets/my-widget.php' );
    $widgets_manager->register( new \Elementor\My_Widget() );
}

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

This code does the following:

• It checks if Elementor is active.
• Registers the custom widget by including the widget class file.

1.3. Activate the Plugin

Go to the WordPress dashboard, navigate to Plugins, and activate the “Custom Elementor Widgets” plugin.

Step 2: Create Your Custom Widget Class

Now that the plugin is set up, it’s time to create the custom widget itself.

2.1. Create the Widget File

Inside your plugin folder (custom-elementor-widgets), create a widgets directory. Inside this folder, create a PHP file for your custom widget (e.g., my-widget.php). This file will contain the widget class definition.

Here’s an example widget class for a basic custom widget:

phpCopyEdit<?php
namespace Elementor;

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

class My_Widget extends Widget_Base {

    public function get_name() {
        return 'my_widget'; // Unique widget name
    }

    public function get_title() {
        return __( 'My Widget', 'custom-elementor-widgets' ); // Display name in Elementor editor
    }

    public function get_icon() {
        return 'eicon-code'; // Icon for the widget in the Elementor panel
    }

    public function get_categories() {
        return [ 'general' ]; // Define the category in which the widget will appear
    }

    protected function _register_controls() {
        // Add widget controls here
        $this->start_controls_section(
            'section_content',
            [
                'label' => __( 'Content', 'custom-elementor-widgets' ),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'text',
            [
                'label' => __( 'Text', 'custom-elementor-widgets' ),
                'type' => Controls_Manager::TEXT,
                'default' => __( 'Hello, World!', 'custom-elementor-widgets' ),
            ]
        );

        $this->end_controls_section();
    }

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

    protected function _content_template() {
        ?>
        <#
        var text = settings.text;
        #>
        <div class="my-widget">{{ text }}</div>
        <?php
    }
}

Explanation of the Code:

1. get_name(): This is a unique name for the widget, which Elementor uses to identify it.
2. get_title(): This is the name that appears in the Elementor panel.
3. get_icon(): You can specify an icon for the widget in the Elementor panel (e.g., 'eicon-code').
4. get_categories(): This defines the categories where your widget will appear in the Elementor panel (e.g., 'general').
5. _register_controls(): Here you define the controls for the widget. In this example, we added a simple text control where the user can input text.
6. render(): This method defines how the widget’s output is rendered on the front-end. We’re displaying the text input by the user here.
7. _content_template(): This method is used for the widget’s live preview in the Elementor editor.

Step 3: Style Your Custom Widget

Elementor widgets are fully customizable with CSS. You can either add custom CSS to the widget file or enqueue a separate stylesheet for the widget.

For example, create a css folder inside your plugin directory and add a file called style.css:

cssCopyEdit.my-widget {
    font-size: 20px;
    color: #333;
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 5px;
}

Now, enqueue the stylesheet in the plugin’s main PHP file:

phpCopyEditfunction enqueue_widget_styles() {
    wp_enqueue_style( 'my-widget-style', plugin_dir_url( __FILE__ ) . 'css/style.css' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_widget_styles' );

This will apply custom styles to your widget.

Step 4: Test Your Custom Widget

Once you’ve completed the above steps, head over to the Elementor editor:

1. Edit a page with Elementor.
2. Search for your widget by the name defined in the get_title() method (e.g., “My Widget”).
3. Drag and drop the widget onto your page.
4. Input some text and see the widget rendered on the front end.

Step 5: Add Advanced Functionality (Optional)

At this point, you have created a basic custom widget. You can expand its functionality by adding more controls, features, and custom styles. Here are a few advanced features you might want to explore:

• Dynamic Content: Use Elementor’s dynamic tags to pull in content from posts, custom fields, etc.
• Custom Controls: Add more complex controls like sliders, color pickers, or image uploads.
• JavaScript and Interactivity: You can include custom JavaScript to add interactive elements to your widget (e.g., animations, AJAX functionality).

Conclusion

Creating custom Elementor widgets is an excellent way to extend the page-building functionality of WordPress and Elementor. Whether you need simple widgets for text or more complex ones with dynamic content, this guide has given you the foundation to start building your own widgets.

By following these steps, you can create custom widgets that enhance the user experience, add more functionality to your WordPress website, and provide flexibility for future projects. Happy coding!