How to build your own elementor widget

Are you a heavy user of Elementor on most of your projects but sometimes are stuck widgets that suites your needs and dont want to use time to search all the many plugins with numerous widgets for elementor, there’s an way to build and control you’re own components and functionality

This can be done with Elementors own widget API to build and register own widget components

Elementor widgets consists of 8 main functions to define widget name, tags, categories, keywords controls to control the content, styling and other advanced features for elementor and templating for the elementor component.

PHP
<?php 

use Elementor\Controls_Manager;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use Elementor\Group_Control_Text_Stroke;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Utils;
use Elementor\Widget_Base;

class My_Widget extends Widget_base {
  public function get_name() 
  {
    // define widget name here
    return 'widget_name';
  }
  
  public function get_title() 
  {
    // define widget title here
    return est_html__('Widget title', 'elementor');
  }
  
  public function get_icon() 
  {
    // define widget icon here
    return 'eicon-t-letter';
  }
  
  public function get_categories() 
  {
    // define widget categories here
    return ['custom_widget'];
  }
  
  public function get_keywords() 
  {
    // define widget keywords here
    return ['heading', 'title', 'text'];
  }
  
  protected function register_controls() 
  {
    // register widget controls here
    
    // starting a control seciton
    $this->start_controls_section(
      'section_title',
      [
        'label' => esc_html__('Title', 'elementor')
      ]
    );
    
    $this->end_controls_section();
    
    $this->add_control(
      'title',
      [
        'label' => esc_html__('Title', 'elementor'),
        'type' => Controls_Manager::TEXTAREA,
        'dynamic' => [
          'active' => true
        ],
        'placeholder' => esc_html__('Enter your title', 'elementor'),
        'default' => esc_html__('Add your heading text here', 'elementor')
       ]
    );
    
    // new control section goes here.
  }
  
  protected function render() 
  {
    // define rendering template 
    $settings = $this->get_settings_for_display();
    
    if ( '' === $settings['title'] ) {
      return;
    }
    
    $this->add_render_attribute('title', 'class', 'elementor-heading-title');
    
    $title_html = sprintf(
      '<h1>%1$s</h1>',
      $this->get_render_attribute_string('title')
    );
    
    echo $title_html;
  }
  
  protected function content_template() 
  {
    // define rendering template, used in elementor builder
    
    ?>
    <#
      var title = settings.title;
      view.addRenderTtribute('title', 'class', ['elementor-heading-title']
      view.addInlineEditingAttribute('title')
      var title_html = '<h1>' + title + '</h1>'
      print(title_html)
    #>
    
    <?php
  }
}

In the example above we define the base structure for your elementor widget templating and functionality.

Now before we can test the component in the builder and or the frontend of your page, we need to register the widget class in either your theme or plugin if that is preferable.

PHP
<?php 


add_action('elementor/init/register', function( $widgets_manager ) {
  require_once(<path/to/widget>);
  $widgets_manager->reigster(new My_Widget());
});

As you see above, we use Elementor’s ‘elementor/init/register’ the callback needs the widgets_manager variable,

inside the callback function you requiring the widget class file afterwards using $widgets_manager->register to register the widget class instance

This is the basic of widget development for elementor sites
Check out the official documentation, or checkout my github repository for my approach for building elementor widget components

give it a star or follow if you find the repo interesting or maybe want to contribute to it.

Let me know if you maybe have an easier way or a better way to create widgets for Elementor
then i will be happy to here from you, you are welcome to give your opinion or feedback in the comment section below

Happy coding!