How to make a Widget by Elementor

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 \Elementor\Widget_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. 

30 thoughts on “How to make a Widget by Elementor

  1. Massa suspendisse lorem turpis ac. Pellentesque volutpat faucibus pellentesque velit in, leo odio molestie, magnis vitae condimentum. Lura Bendick Ferdy

  2. Hello! I know this is kind of off topic but
    I was wondering which blog platform are you using for this site?

    I’m getting fed up of WordPress because I’ve had issues with hackers and I’m looking at alternatives for another platform.

    I would be awesome if you could point me in the direction of a good platform.

  3. Hello there! This article could not be written any better!
    Reading through this post reminds me of my previous roommate!
    He constantly kept preaching about this. I will forward this
    post to him. Pretty sure he will have a very good read.
    Many thanks for sharing!

  4. Pretty section of content. I just stumbled upon your weblog and
    in accession capital to assert that I acquire actually enjoyed account your blog
    posts. Anyway I’ll be subscribing to your augment and
    even I achievement you access consistently quickly

  5. Greetings! I know this is somewhat off topic but I was wondering if you knew
    where I could locate a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having trouble finding
    one? Thanks a lot.!

  6. Pretty part of content. I just stumbled upon your web site and in accession capital to claim that I acquire actually enjoyed account
    your blog posts. Anyway I’ll be subscribing in your augment or even I success you get
    right of entry to consistently rapidly.

  7. İnstagram takipçi satın al .. Takipçi satın al ve İnstagram takipçi satın al!

  8. Hi there, I think your website might be having internet browser compatibility issues.

    When I take a look at your website in Safari, it
    looks fine however, if opening in Internet Explorer, it’s got some overlapping issues.
    I merely wanted to provide you with a quick heads up! Besides that,
    excellent website!

  9. I’d like to thank you for the efforts you have put in writing this site.
    I am hoping to see the same high-grade blog posts from you in the future as well.
    In truth, your creative writing abilities has encouraged
    me to get my very own blog now 😉

  10. What i do not understood is in truth how you’re not really a lot more well-preferred than you may be
    now. You are so intelligent. You recognize thus significantly relating to this subject, produced me individually consider it from so many varied
    angles. Its like women and men aren’t interested until it’s something to
    accomplish with Lady gaga! Your personal stuffs excellent.

    Always take care of it up!

Leave a Reply

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