Build Custom Elementor Widgets — The Right Way!

Add/Change Elementor Content Tab You can add/change the content tab and options that appear within them in the Elementor editor sidebar with the following: widgets/awesomesauce.php – In the _register_controls method. Add/Change Elementor Style Tab You can add/change the style tab and options that appear within them in the Elementor editor sidebar with the following: widgets/awesomesauce.php … Read article

Add/Change Elementor Content Tab

You can add/change the content tab and options that appear within them in the Elementor editor sidebar with the following:

widgets/awesomesauce.php – In the _register_controls method.

$this->start_controls_section(
  'section_content',
  [
    'label' => __( 'Content', 'elementor-awesomesauce' ),
  ]
);

/* Add the options you'd like to show in this tab here */

$this->end_controls_section();

Add/Change Elementor Style Tab

You can add/change the style tab and options that appear within them in the Elementor editor sidebar with the following:

widgets/awesomesauce.php – In the _register_controls method.

$this->start_controls_section(
  'style_section',
  [
    'label' => __( 'Style Section', 'elementor-awesomesauce' ),
    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
  ]
);

/* Add the options you'd like to show in this tab here */

$this->end_controls_section();

Elementor Widget Image Field

The ability to add/change images is crucial to any good WordPress theme, here’s how to add a custom image field in an Elementor widget with Controls_Manager::MEDIA:

widgets/awesomesauce.php – In the _register_controls method.

$this->add_control(
			'mask_image',
			[
				'label' => __( 'Mask Image', 'elementor-awesomesauce' ),
				'type' => Controls_Manager::MEDIA,
        'default' => [
					'url' => Utils::get_placeholder_image_src(),
				]
			]
		);

What if we wanted to allow the user to select the HTML element for the title, it’s also a cinch with Controls_Manager::SELECT:

widgets/awesomesauce.php – At the top of the file where the use statements are located.

use Elementor\Utils;

widgets/awesomesauce.php – In the _register_controls method.

$this->add_control(
  'mask_image',
  [
    'label' => __( 'Mask Image', 'elementor-awesomesauce' ),
    'type' => Controls_Manager::MEDIA,
    'default' => [
      'url' => Utils::get_placeholder_image_src(),
    ]
  ]
);

Elementor Widget Button Group

How about adding alignment options using a button group, easy with Controls_Manager::CHOOSE:

widgets/awesomesauce.php – In the _register_controls method.

$this->add_control(
  'text_align',
  [
    'label' => __( 'Alignment', 'elementor-awesomesauce' ),
    'type' => \Elementor\Controls_Manager::CHOOSE,
    'options' => [
      'left' => [
        'title' => __( 'Left', 'elementor-awesomesauce' ),
        'icon' => 'fa fa-align-left',
      ],
      'center' => [
        'title' => __( 'Center', 'elementor-awesomesauce' ),
        'icon' => 'fa fa-align-center',
      ],
      'right' => [
        'title' => __( 'Right', 'elementor-awesomesauce' ),
        'icon' => 'fa fa-align-right',
      ],
    ],
    'default' => 'center',
    'toggle' => true,
  ]
);

Elementor Widget Typography Options

Elementor comes with a powerful typography editor that includes responsive options, here’s how you add it with Group_Control_Typography & Scheme_Typography::TYPOGRAPHY_1.

widgets/awesomesauce.php – At the top of the file where the use statements are located.

use Elementor\Group_Control_Typography;
use Elementor\Scheme_Typography;

widgets/awesomesauce.php – In the _register_controls method.

$this->add_group_control(
  Group_Control_Typography::get_type(),
  [
    'name'     => 'content_typography',
    'label'    => __( 'Typography', 'elementor-awesomesauce' ),
    'scheme'   => Scheme_Typography::TYPOGRAPHY_1,
    'selector' => '{{WRAPPER}} .elementor-awesomesauce',
    'fields_options' => [
      'letter_spacing' => [
        'range' => [
          'min' => 0,
          'max' => 100
        ]
      ]
    ]
  ]
);
1 2

Comments

  1. hi thanks for everything it was so much helpful .. can you please help me i want to know how can i register style just like script

  2. Sanjaya Dulal September 30, 2019

    Not working. I tired all above code .

    Well how can i implement it. Any idea ?

    i am bit confusion it.

  3. Himanshu July 17, 2019

    Wow , it worked perfectly ! Can you come up with any idea to register Custom Widget for “Single page” editor only ? I want to register a widget which will appear only in “Single” Editor .. Is it possible ?

    • If you’re trying to conditionally show/hide a widget in the frontend, try hooking into ‘elementor/widget/render_content’ .
      See https://code.elementor.com/php-hooks/#elementorwidgetrender_content

      If you’re trying to restrict certain widgets in the editor, I don’t think (maybe) there’s an action for that. Elementor provides a ‘Role Manager’ though. In the Pro version, there’s an option to ‘only allow them to edit existing content inside the editor’. This means you can publish/create a template beforehand, then whoever edits that page/template, can only edit the existing content in the editor (only the widgets you used for that template).

  4. Abe Caymo May 15, 2019

    Hey thanks for this great article btw!

    Could you add an example on responsive controls?
    More specifically, in the ‘Responsive Choose’ found in the https://developers.elementor.com/add-responsive-controls-to-widgets/ , what is the “prefix_class” used for?

  5. Abe Caymo May 10, 2019

    Just wow. I’m relatively new to coding and after going through this tutorial, now I understand what ‘good code documents itself’ means. Now I ACTUALLY understand more about OOP seeing it in action. Thanks a lot!

  6. This is really great! One thing I’m trying to do is create a custom Elementor widget that just runs some PHP where it is placed. Do you know if this is possible? I’ve been tinkering around but can’t quite get it to work. I actually don’t need any controls for the widget– it’s so I can place a custom action hook within my Elementor pages.

    • I’m sure there’s a plugin that enables PHP in the WP text widget. It might be possible to do it that way?

  7. Michael Bourne April 26, 2019

    This is better than the official docs. Kudos.

  8. Giovani Camara March 19, 2019

    This was ridiculously useful… I managed to get this all working which is great! Do you know if this awesomesauce plugin can only have one extension, or is it possible to have multiple widgets in this individual plugin? I renamed it all appropriate to my project, but I am having difficulties adding more widgets to it…. any ideas?

    • Glad you found it useful any Yup, you can add as many as you like! Look in plugin.php in the register_widgets method. Just follow the example for a new widget, then register it. Ex:

      private function include_widgets_files() {
      // First widget
      require_once( __DIR__ . '/widgets/awesomesauce.php' );
      // Second widget
      require_once( __DIR__ . '/widgets/awesomesauce2.php' );
      }

      public function register_widgets() {
      // Its is now safe to include Widgets files
      $this->include_widgets_files();

      // Register Widgets
      // First widget
      \Elementor\Plugin::instance()->widgets_manager->register_widget_type( new Widgets\Awesomesauce() );
      // Second widget
      \Elementor\Plugin::instance()->widgets_manager->register_widget_type( new Widgets\Awesomesauce2() );
      }

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

All comments are held for moderation and only published when on topic and not rude. You'll even get little stars if you do an extra good job.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.

icon-search icon-link