How to Build a Custom Elementor Widget Using PHP and JavaScript

In this video, I show you how to create a simple custom Elementor widget. We go over how to register the widget, create controls, and create inline editable content areas.

**SOCIAL**

[TheMarouuu]

This is the only Custom Elementor Widget tutorial I've seen out there. And it has <900 views.
I'd love to learn more about this cause I'm trying to develop a widget of my own and it would take quite a bit more knowledge than what's presented here.
So I'm sad that one one hand you didn't get many views and you'll probably be discouraged from making another one in the future.
On the other hand that means less competition for selling Elementor widgets which is great.


In any case, thanks for the head start, I guess It's back to the official docs for me :D


Great content as usual! Hats off to you sir.

[pkg]

Please continue making video on create custom elementor widgets. I would like to learn how to create wp-query loop widget. If you create a course on this for sale on Udemy, please let me know. Would be thankful ^_^

[ashleyredman]

Another great video, recent client work requires custom elementor parts, so nice and straight forward. I would recommend anyone asking a million and one questions here, just go and read the docs, they’re very good.

[zsoltb.horcsik]

Had been fighting with the 'elementor widget_base' not found' error for like an hour, solved it thanks to you!

If someone having same trouble:
I had to include the widget files not when instantiating, but specifically right before the plugin registration.

[azatkadyrov]

Wow thanks. I just recently started to work with WordPress. And I think it is amazing how mature it has become. You are literally the only dude on youtube (i have found), covering advanced concepts in a really presentable way. Cheers

[Switch]

Glad to have found this and it is still relavent 4 years later!

[franciscoc.]

Thank you for the tutorial. How you can activate the "style" tab for your custom widget?

[Thysta]

Thanks for this, I used this to build a cool custom post loop for a client's site. Good way to mix your own HTML/CSS skills with Elementor.

[evgeniisharaborin]

Thank you for your very helpful video! I noticed that it is better to fix css file through: Theme Customizing >
Custom CSS > add at the bottom of a text area. I wasted an hour before I found the solution.

[fissunix]

Is it possible to create instances of already build-in elementor widgets, section and columns via php code ? For example, in a plugin (shortcode output), let's say i want to loop through an API request and output it with elementor elements. Thank you.

[rtpHarry]

What is that angle bracket hash/pound tag that you have used around the script elements? Is it PHP? I've search the web and cannot find any reference to it but it's kind of awkward to search for, I can't even write it out here. I have found only one mention of it which was on a stackoverflow question which was immediately closed and deleted. I've never seen it before?

[davidofug]

Yay! Once again, I wanted something brief but comprehensive. Thank you once again!

[juanobrach]

Thanks for the video but, what about Javascript for the admin area of the widget ?

[TheMiaReno]

Thank you for this amazing video, actually I started to programming a custom Elementor Widget for a client and of course, it´s actually the most completed video about the development from scratch.

[rpmarketing]

Nice video, thanks so much, this is the second video i watch about creating my own Elementor Widget, i appreciate how easy you make it

[Geomaverick]

I think you are the only one that actually has this type of tutorial. Pretty cool! I would def take a course on this :)

[morisfalearn]

very very very vert very goood, thank you alex

[adrkolev]

Please make a video how you build a wordpress theme from scratch. What is your workflow ? Thanks!

[technicallyparv]

This is great! More advanced stuff would be awesome! Maybe being able to set up more advanced queries (using, for instance, dynamic categories/tags etc. Thanks for the videos!

[developer_larry]

First of all, thanks for your amazing tutorial Bro. I learn a lot, which I can’t learn in a month. Your lesson is practical and it is cool :) I have one question for you, how can we add some style controls for our custom label_heading to give the user the ability to customize it to fit his needs. I will be waiting for your reply and thank you in advance) Good luck))