How to Build a Custom Elementor Widget Using PHP and JavaScript
Вставка
- Опубліковано 23 лип 2024
- 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.
Link to code: github.com/alexander-young/cu...
Try Elementor Pro: elementor.com/pricing/?ref=4670
Sign up for the newsletter: wpcasts.tv
*SOCIAL*
Twitter: / _wpcasts_tv_
Instagram: / the_alex_young
Facebook: / wpcasts.tv - Наука та технологія
Thanks for watching! If you want to have me cover more advanced features in Elementor. Let me know in the comments or on Twitter: twitter.com/_WPCasts_tv_
Hello dear brother (wpcasts),
I'm a new php developer. I watched your video. really informative and helpful. Carry on the good work.
I wanted know 'Can I use elementor/WP Backery/or Any Page Builder in core php? ' if yes then how?...
if not then is there any alternative like elementor or any page builder to use in core php website?
Thank you. 😊
This is the only Custom Elementor Widget tutorial I've seen out there. And it has
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
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.
Yay! Once again, I wanted something brief but comprehensive. Thank you once again!
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.
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
Glad to have found this and it is still relavent 4 years later!
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.
I think you are the only one that actually has this type of tutorial. Pretty cool! I would def take a course on this :)
Hey Alex! Great Tutorial, thank you so much.
This is exactly what I was looking for, thank you very much, you got a new subscriber : )
Hey man, Thanks for this. I know it's super niche, but it was helpful for me. Was looking to create one in the form of a plugin just for learning more on plugin development.
Thanks for such a great tutorial, It was very easy to understand & implement.
Thanks for this video - super useful, especially with the demo code supplied as well. This worked well for me.
I am so glad! Cheers!
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.
very very very vert very goood , thank you alex
Hey Alex, thank a lot a lot a lot.... From website sample for adding widget is not working (widgets not loading), but yours did :) You saved my day! Cheers!
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.
Thanks for this video - super useful
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 ^_^
Awesome tutorial, thank you so much!
Thanks for the video, very helpful!
I’m glad you found it helpful! :)
Thanks for the video, very helpful
Hello dear,
Thanks for this tutorial it is very useful and a long waited content to be honest. even Elementor team didn't do this (in video tutorials). I really appreciate your efforts and many thanks....
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!
If you meant, how to add the Button for dynamic content to paste into a registered control-field, see my comment and answer from (2020-07-07)
omg... this is great content!! TNXX!!!
Thanks for this tutorial.
Hi, do you know how i can add my own Styling Tab to my custom Widget/Element? I coulnd't find anything on the web by now.
Honest question. How were you able to connect the WordPress directory to VSCode? I'm kinda the new to this thing. Thanks
Awesome as usual !
Thanks! The encouragement means a lot :)
Thanks for the video but, what about Javascript for the admin area of the widget ?
Thank you for the tutorial. How you can activate the "style" tab for your custom widget?
In the start_control_section() method, for the tab key's value, you need to pass "\Elementor\Controls_Manager::TAB_STYLE". For details check this: developers.elementor.com/elementor-element-panel-tabs/
do you have a video that shows how to do a widget that has a form that gets data that is sent to the backend, then processed and displayed in a widget? i.e. something like an encoder where the logic is hidden in the php and only the result is displayed to the user?
Hi there, hoping you can help me figure this out. I'm trying to add WordPress default RSS widget in elementor to being able to load a url dynamically from a custom field? Do you know how to alter the default behavior where it only takes a single static defined url ( entered url)
Hi can you make a video on how to produce SVG files that are truly vectors?
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.
Thank you for the tutorial, I have a question about the updates of elementor, what happen with this changes? they still working?. Thank u :)
How do you open the elementor folder in vs code? I can't seem to find the location
How to use custom icon or image in the elementor get_icon() function?
Can I use it on any of my WordPress, e.g install it as a plugin
Any way to create an option for creating blog (single) page with elementor free version?
Awesome - have you made any tutorial about creating a elementor for action plug?
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))
I am asking myself if it’s possible to make changes to Elementor core and make the background slideshow dynamic? I looked into the code and tried to add the dynamic related lines to the background slideshow but it resulted in an error. Is it possible to do such changes? Thx in advance
Hey, thanks for the Video!
Could you explain how to add an dynamic content option button to the simple text fields that we created in this video?
I want my Widget Control Textfield to be able to get the post title of the current post.
Do You know how to handle this?
OK I got it myself already, for all who are asking the same:
You just have to add the lines
$this->add_control(
'NOT_IMPORTANT',
[
'label' => __( 'Link', 'elementor' ),
'type' => Controls_Manager::URL,
'dynamic' => [ ### This Lines!!
'active' => true, ### This Lines!!
], ### This Lines!!
'placeholder' => 'your-link.com',
'default' => [
'url' => '',
],
'separator' => 'before',
]
);
waw ! thanks. , please more videos on how to customize the css/php for any pro wordpress website ! thanks.
Thank for the tutorial
awesome stuff :)
Can you please make video on admin side styles updating through a stylesheet file ?
veri nice tutorial, thanks u sir.
How do you move the Elementor codes to your "Visual Studio code" software for editting? Sorry, I am a newbie but there is a jump of steps in your instructions so I could not follow there... :(
How to create specific sidebar on specific page or post on elementor... Thank before
The minute he glitched and said "Direc-dec-dectory..." I felt that so hard. Story of my life.
HI!!!!!!!!!!! Great tutorial but how can I include the style.css for them custom component ???!
Please do elementor widget post with custom settings like columns count based on responsive
DUDE THIS WAS SOOOO GOD I hate their documentation and this part between pho side and js rendering of user edit options, now i'm catching, now its easy :)
Hi, we just start with elementor and i am really lucky to find your tutorial. while this is for 2.7.5, i wonder if i can easily adapt it for latest elementor-versions? thx anyway :-)
sir, how do it styling this use sass???
Amazing tutorial, thanks.
Is there a similar tutorial for Gutenberg?
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?
comment block I think
@@pes2013vietnam thanks for replying! I've been looking for this as I eventually discovered what it is! It is the marker for moustache template in javascript which is the templating library used by elementor.
@@rtpHarry Thanks for let me know, have a nice day ;)!
I'm really enjoying your content! I'm not necessarily a developer, but I do alot of custom WP work and your videos are really helping me understand the basics well enough to talk to the developers I hire for projects.
Not necessarily related to this, but I'm curious if you have any tools or methods for packaging a set of Elementor templates and demo pages so that it can be easily imported onto an existing site. I know you can fairly easily use WP/Elementor tools, but I'm trying to find a better interface for people who aren't really familiar with WordPress at all.
I actually haven't had to do this exact thing, so I don't have a great answer. However, if it were me I would either look into making an XML export that can be imported into a demo site. Also, Elementor itself also has a template exporter that can be re-imported using the same interface. www.wpcrafter.com/how-to-elementor-import-export-templates/
How can active css to my widget?
Hi sir,
This is very useful Video, I just have one question that is "How can i add dynamic controls to Elementor custom widget'.
For Example: I have added a list in custom widget. and no. of list items could be any.
can you guide me with this.
thanks.
what are these "" in the code at 19:48 ?
Hmm you´re working in the parent theme, isn´t this causing any trouble with updates and such?
hello can you make more elementor custom control tutorials maybe also to extend the skins widget
Hi Alex.
Thank you so much for this clear and easy to follow tutorial. I was looking for such a tutorial for a while... and I couldn't find any other than yours; again, thank you :-)
I saw that you used the theme's style.css file to style the widget.
Personally, I would prefer the styling to be in a separate file, included in the widget's folder, so that it is only loaded when the widget is used.
I tried it, following the example in the Elementor documentation for developers, but that doesn't work :(
Do you think this is possible? If yes, can you explain how?
Thanks in advance...
Please add more 😍🤩😍
What happen when theme update?
Please do the advanced version as well. and could you start from the design to the Elementor and the php structor... what I mean is usually the designer or in this case myself I do the HTML CSS JS first and then I want to make it a widget. it will be much clearer for newbies like me to understand the way that I can make my custom widget from the codes I am making....
Please make a video on how to create custom post widget on elementor pro.
hello sir how to add custom categories using elementor can you send me link or video thank you
To add a custom category you need to use the 'elementor/elements/categories_registered' action of elementor. For details you can check this developers.elementor.com/widget-categories/
How can I do this inside plugins folders instead of themes?
It's basically the same, you just need to change where the directories are pointed
Hello sir i need your small help. I am creating a online compiler for my website. I have both Widget code and APi key. But i unable to build. pls pls. If you can help me ..so pls help🙏
It's good to make simple website That Compatible With Elementor if it's possible.
Thank You For help
Hi,
First of Tanks lot
but can you please make a video on making woocommrce widget in elementor(How to get woocommerce posts(products) in elementor widget) how to query theme the right way, filter them or ....
tanks again..
Please, make more Elementor development tutorials!!!
Please, make more Elementor development tutorials!!!
PLEASE PLEASE PLEASE
please make tutorial for create new widget category
Hey Alex, thanks for this great Workshop. Keep sharing, you do a great job.
Can you please explain or give me lights about how to create a widget to display conditional content: A message for visitors and content for registered users (subscribers).
Thanks in advance, dude!
Hope you be very well.
thanks
Please do more tutorials on elementor
Please make a video how you build a wordpress theme from scratch. What is your workflow ? Thanks!
you should take a look at our plugin maybe you can make a video about it.
I will also be elememtor widgets developer one day.
make a slider wedget with owl caresol or slick slider
Thanks for tutorial man! Why did you include add_render_attribute?? its not mentioned in the documentation is there a reason for the extra code? Here is the link for the docs they are pretty good. developers.elementor.com/add-inline-editing/
Hey can anyone help me, i need to hire someone who can make Elementor Widgets. Really need to hire someone, we have over 200 that need to be made...
Contact me at gianghl1983@gmail.com or my Facebook: facebook.com/Giang.IT24.VN
Anybody here who has don't load a elementor in wp
why
Very basic nothing of coding. How are you calling up the full blocks of code so quickly?
people who teach others to build their custom stuff directly inside the theme or website itself, should stop teaching...
always pack your customs in plugins people! encapsulate and isolate your work!