How to create Custom elementor widget without plugin

How to create Custom elementor widget without plugin: an Elementor custom widget that helps you to avoid third-party plugins for small features and the best way to add your own widgets for your design or development purposes. If you are a beginner, these guide will help you to achieve your task with these articles.`

How to create Custom elementor widget without plugin

To create a custom widget, you need to add your own custom code with advanced PHP. Here, I will add a custom button as an example.

Go to your file manager (website filemanager)

Website File Manager.
Go to wp-contents.
and go to plugins folders.
inside plugins folder.

In the above plugins folder, you will be able to see custom-elementor-widgets plugin name, I created.

Next, inside custom-elementor-widgets create a main file, custom-elementors-widgets.php

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

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

// Load necessary files and initialize the widgets
function custom_elementor_widgets_loader() {
    require_once(__DIR__ . '/custom-button-widget.php');
}
add_action('elementor/widgets/widgets_registered', 'custom_elementor_widgets_loader');

After adding the code in custom-elementor-widgets.php file, next create a file called custom-button-widget.php ( file name is your wish)

<?php
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Icons_Manager;

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

class Custom_Button_Widget extends Widget_Base {

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

    public function get_title() {
        return __('Custom Button', 'custom-elementor-widgets');
    }

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

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

    protected function _register_controls() {
        $this->start_controls_section(
            'content_section',
            [
                'label' => __('Content', 'custom-elementor-widgets'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'button_text',
            [
                'label' => __('Button Text', 'custom-elementor-widgets'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Click Me', 'custom-elementor-widgets'),
            ]
        );

        $this->add_control(
            'button_url',
            [
                'label' => __('Button URL', 'custom-elementor-widgets'),
                'type' => Controls_Manager::URL,
                'placeholder' => __('https://your-link.com', 'custom-elementor-widgets'),
            ]
        );

        $this->add_control(
            'button_size',
            [
                'label' => __('Button Size', 'custom-elementor-widgets'),
                'type' => Controls_Manager::SELECT,
                'default' => 'md',
                'options' => [
                    'sm' => __('Small', 'custom-elementor-widgets'),
                    'md' => __('Medium', 'custom-elementor-widgets'),
                    'lg' => __('Large', 'custom-elementor-widgets'),
                ],
            ]
        );

        $this->add_control(
            'button_color',
            [
                'label' => __('Button Color', 'custom-elementor-widgets'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .elementor-button' => 'background-color: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'button_icon',
            [
                'label' => __('Button Icon', 'custom-elementor-widgets'),
                'type' => Controls_Manager::ICONS,
                'fa4compatibility' => 'icon',
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'style_section',
            [
                'label' => __('Style', 'custom-elementor-widgets'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'typography',
                'label' => __('Typography', 'custom-elementor-widgets'),
                'selector' => '{{WRAPPER}} .elementor-button',
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        $this->add_render_attribute('button', 'class', 'elementor-button elementor-button-' . $settings['button_size']);

        echo '<a ' . $this->get_render_attribute_string('button') . ' href="' . esc_url($settings['button_url']['url']) . '">';
        if (!empty($settings['button_icon']['value'])) {
            echo '<span class="elementor-button-icon">';
            Icons_Manager::render_icon($settings['button_icon'], ['aria-hidden' => 'true']);
            echo '</span>';
        }
        echo '<span class="elementor-button-content-wrapper">';
        echo '<span class="elementor-button-text">' . esc_html($settings['button_text']) . '</span>';
        echo '</span>';
        echo '</a>';
    }

    protected function _content_template() {
        ?>
        <#
        view.addRenderAttribute('button', 'class', 'elementor-button elementor-button-' + settings.button_size);
        #>
        <a {{{ view.getRenderAttributeString('button') }}} href="{{ settings.button_url.url }}">
            <# if (settings.button_icon && settings.button_icon.value) { #>
                <span class="elementor-button-icon">
                    <i class="{{ settings.button_icon.value }}" aria-hidden="true"></i>
                </span>
            <# } #>
            <span class="elementor-button-content-wrapper">
                <span class="elementor-button-text">{{{ settings.button_text }}}</span>
            </span>
        </a>
        <?php
    }
}

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

After adding these code save files and activating the plugin in your WordPress dashboard plugins section, then open your elementor editor and search for custom