How to make a Widget by Elementor

Elementor is now one of the most popular if not the best website builders. The best part of this builder lies in its various types of widgets that allow you to build websites easily while displaying content. However, sometimes you may need a custom widget for your website’s specific needs. In this article, you will know how to make a widget by Elementor easily.

How to Make Easily a Widget by Elementor

There are many users of Elementor; however, if someone asks “do you know how to make Elementor widgets?” Many will say, they don’t. It’s because most of the time you don’t need new tools besides the ones already within the builder. However, as mentioned above, sometimes it can’t be helped when you need something new, something special for your website. That’s when you notice how good it would be if you can create a new widget to help you with your website needs. 

After you are finished with this you will know how to make a widget by Elementor with a few simple steps. So without further ado, let’s begin. 

Widget Structure

Creating a new widget is similar to creating a WordPress widget. You’ll need to create an extended Widget_Base class and fill in the required methods. A normal widget structure will look like this:

<?php

class Elementor_Test_Widget extends ElementorWidget_Base {

    public function get_name() {}

    public function get_title() {}

    public function get_icon() {}

    public function get_categories() {}

    protected function _register_controls() {}

    protected function render() {}

    protected function _content_template() {}

}

Let’s find out what you can do with this:

Widget Name

This is a simple method, the public function get_name will allow you to set the name of the widget and return it using this method.

public function get_name() {

     return ‘Widget Name’;

}

Widget Title

You need to set a title for your widget that will be displayed as the label. With the public function get_title method, you will be able to set and return the title of the widget that will be shown in the labels.

public function get_title() {

     return __( ‘Widget Title’, ‘Plugin Name’ );

}

Widget Icon

How will you differentiate between your widget and the others? Simple, set up the icon that will be shown in the panel. The public function get_icon method, you can set the icon of the widget that will be shown in the panel. 

public function get_icon() {

     return ‘eicon-gallery-grid’;

}

Widget Categories

Setting up the categories will help you use your widget more efficiently. This public function get_categories method will allow you to set the category of your widget that will be in the panel. There are some default categories in the panel like basic, general, pro-elements, wordpress, etc. You can use them as examples.

public function get_categories() {

     return [ ‘basic’ ];

}

Or if you want, you can also create custom categories too. 

<?php

function create_custom_categories( $elements_manager ) {

    $elements_manager->add_category(

        ‘custom-category’,

        [

         ‘title’ => __( ‘Custom Category’, ‘plugin-name’ ),

         ‘icon’ => ‘fa fa-plug’,

        ]

    );

}

add_action( ‘elementor/elements/categories_registered’, ‘create_custom_categories’ );

Widget Controls

Each widget requires sections and controls to define them. Using the protected function _register_controls you can set the controls for your widget settings using this method. For example, you can use UI control (button, divider), Data controls (text, gallery), Multiple controls (Url, media), and many others.

Render

This is basically the last part to create a new widget. The protected function render method is where you will be able to render the code and create the final HTML on the frontend with the PHP. 

Content Template

Before the final touch, you’ll want to see how your new widget looks. And the protected function _content_ template will let you generate a live preview of the widget in the editor with the Backbone JavaScript library.

Now you know how to make a widget by Elementor. There are many other methods you can use for different things; however, for a simple one this is all you need. Now Next, you can directly jump into the real thing. In short, creating a widget.