How to Create a Custom Elementor Widget in 7 Simple Steps in 2024

In this article, we will provide a step-by-step guide on how to create a custom widget for the Elementor page builder plugin for WordPress. We will show you how to use the Elementor API to build your widget, add custom controls and settings, and display the values of those controls on the frontend. By the end of this article, you will have a working WordPress plugin that you can use to add your custom widget to any page or post on your website.

Start Creating Your Own Elementor Widget

Let’s create a custom Elementor widget named “Sunrise and Sunset” that displays the current day’s sunrise and sunset times based on a user-provided location. This widget will demonstrate basic widget structure, including registering the widget, adding custom controls for user input, and rendering the output on the frontend. This example will showcase how to interact with a simple API to fetch sunrise and sunset times, adding a practical aspect to our custom widget.

1. Addon Folder Structure:

Create your addon directory within wp-content/plugins/:

• sunrise-sunset-addon/
  • widgets/
    • sunrise-sunset-widget.php
  • sunrise-sunset-addon.php

2. Main Addon File (sunrise-sunset-addon.php):

This file registers your custom widget with Elementor.

<?php
/**
 * Plugin Name: Sunrise and Sunset Widget
 * Description: Displays sunrise and sunset times for a given location.
 * Version: 1.0.0
 * Author: Your Name
 */

function register_sunrise_sunset_widget( $widgets_manager ) {
    require_once( __DIR__ . '/widgets/sunrise-sunset-widget.php' );
    $widgets_manager->register( new \Sunrise_Sunset_Widget() );
}
add_action( 'elementor/widgets/register', 'register_sunrise_sunset_widget' );

3. Sunrise and Sunset Widget (sunrise-sunset-widget.php):

This file defines the widget functionality, controls, and output.

<?php
class Sunrise_Sunset_Widget extends \Elementor\Widget_Base {

    public function get_name() {
        return 'sunrise_sunset_widget';
    }

    public function get_title() {
        return 'Sunrise and Sunset';
    }

    public function get_icon() {
        return 'eicon-clock';
    }

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

    protected function register_controls() {
        $this->start_controls_section(
            'content_section',
            [
                'label' => 'Settings',
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'location',
            [
                'label' => 'Location (City)',
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => 'New York',
                'placeholder' => 'Enter a city name',
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        $location = esc_html($settings['location']);

        // Example static output (In practice, fetch data from an API)
        echo "<h3>Sunrise and Sunset Times for {$location}</h3>";
        echo "<p>Sunrise: 6:00 AM</p>";
        echo "<p>Sunset: 7:45 PM</p>";
    }
}

In the render method, instead of the static output, you’d typically make a request to an API to get sunrise and sunset times based on the location. Due to the limitations here, I’ve shown static times. To fully implement this feature, you’d integrate with an API like the Sunrise-Sunset API to dynamically fetch these times.

Activation:

Zip the sunrise-sunset-addon folder, upload it via the WordPress dashboard under “Plugins” > “Add New”, and activate it. Once activated, your custom “Sunrise and Sunset” widget will be available in Elementor to add to any page or post, showcasing the basic aspects of creating a simple yet functional Elementor addon.

This example illustrates the creation of a unique Elementor widget, demonstrating how to register the widget, add user input controls, and render dynamic content based on API data.