How to Create Custom Elementor Widget in WordPress

Published on: July 29, 2023August 5, 2023Author: gotihiteshComment: 0

Creating a custom Elementor widget in WordPress involves using PHP to define the widget’s functionality and controls, and using HTML/CSS for the widget’s frontend output. Here’s a step-by-step guide to creating a basic custom Elementor widget:

Step 1: Set Up Your Plugin File Structure

Create a new folder for your custom Elementor widget plugin in the WordPress plugins directory. Inside the folder, create the main plugin file (e.g., custom-elementor-widget.php). This file will contain the plugin metadata and initialization code.

Step 2: Define the Plugin Metadata

Open custom-elementor-widget.php and add the plugin metadata. At a minimum, it should include the plugin name, version, author, and description:

<?php
/*
Plugin Name: Custom Elementor Widget
Version: 1.0
Author: Your Name
Description: A custom Elementor widget.
*/

Step 3: Enqueue the Elementor Widget Script and Style

In the same custom-elementor-widget.php file, enqueue the necessary JavaScript and CSS files for your custom Elementor widget:

<?php
function custom_elementor_widget_enqueue_assets() {
    // Register the Elementor widget script
    wp_register_script(
        'custom-elementor-widget',
        plugin_dir_url(__FILE__) . 'js/custom-elementor-widget.js',
        array('jquery', 'elementor-frontend'),
        '1.0',
        true
    );

    // Enqueue the Elementor widget script
    wp_enqueue_script('custom-elementor-widget');

    // Enqueue the Elementor widget CSS
    wp_enqueue_style(
        'custom-elementor-widget-style',
        plugin_dir_url(__FILE__) . 'css/custom-elementor-widget.css'
    );
}
add_action('elementor/frontend/after_register_scripts', 'custom_elementor_widget_enqueue_assets');

Step 4: Create the Elementor Widget Class

In the same custom-elementor-widget.php file, define your custom Elementor widget class:

<?php
class Custom_Elementor_Widget extends \Elementor\Widget_Base {

    public function get_name() {
        return 'custom-elementor-widget'; // Replace with your widget name
    }

    public function get_title() {
        return __('Custom Elementor Widget', 'custom-elementor-widget'); // Replace with your widget title
    }

    public function get_icon() {
        return 'fa fa-star'; // Replace with an appropriate Font Awesome icon
    }

    public function get_categories() {
        return ['general']; // Replace with the desired category for your widget
    }

    protected function _register_controls() {
        // Define your widget controls here
        $this->start_controls_section(
            'section_content',
            [
                'label' => __('Content', 'custom-elementor-widget'),
            ]
        );

        $this->add_control(
            'title',
            [
                'label' => __('Title', 'custom-elementor-widget'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => __('Custom Widget Title', 'custom-elementor-widget'),
            ]
        );

        // Add more controls as needed

        $this->end_controls_section();
    }

    protected function render() {
        // Widget frontend output
        $settings = $this->get_settings_for_display();
        $title = $settings['title'];

        echo '<div class="custom-elementor-widget">';
        echo '<h3>' . esc_html($title) . '</h3>';
        // Add more HTML/CSS for your widget frontend
        echo '</div>';
    }

    protected function _content_template() {
        // Render the widget content in the editor for a live preview
        ?>
        <div class="custom-elementor-widget">
            <h3>{{{ settings.title }}}</h3>
            <!-- Add more HTML/CSS for your widget frontend in the editor -->
        </div>
        <?php
    }
}

// Register the Elementor widget class
function custom_elementor_widget_init() {
    \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Custom_Elementor_Widget());
}
add_action('elementor/widgets/widgets_registered', 'custom_elementor_widget_init');

Step 5: Create the JavaScript File for the Widget

Create a new folder named js in your plugin directory, and inside it, create a file named custom-elementor-widget.js. This file will contain any JavaScript functionality for your widget.

jQuery(document).ready(function($) {
    // Add any JavaScript code for your widget here
});

Step 6: Create the CSS File for the Widget

Create a new folder named css in your plugin directory, and inside it, create a file named custom-elementor-widget.css. This file will contain the CSS styles for your widget.

/* Add any CSS styles for your widget here */
.custom-elementor-widget {
    /* Widget styles */
}

Step 7: Customize Your Widget

In the Custom_Elementor_Widget class, you can customize the widget’s controls (settings), frontend output, and live preview (in the _content_template() method). Modify the HTML and CSS within the render() method to match your desired frontend output.

Step 8: Activate Your Plugin

Activate your custom Elementor widget plugin in the WordPress admin panel (Plugins > Installed Plugins).

Now, when you edit a page with Elementor, you should find your custom widget in the Elementor widget list under the “General” category. You can then drag and drop it onto your page, customize its settings, and see the live preview in the Elementor editor.

Remember to replace all placeholders (e.g., custom-elementor-widget) with your own specific names and customize the widget according to your needs. This example shows a basic custom Elementor widget, but you can extend it with more controls, functionalities, and styles as required.