How to Build a Custom Elementor Widget Using PHP and JavaScript

  Рет қаралды 59,367

WPCasts

WPCasts

Күн бұрын

Пікірлер: 112
@WPCasts
@WPCasts 4 жыл бұрын
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_
@mjahid98
@mjahid98 4 жыл бұрын
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. 😊
@TheMarouuu
@TheMarouuu 4 жыл бұрын
This is the only Custom Elementor Widget tutorial I've seen out there. And it has
@ashleyredman
@ashleyredman 4 жыл бұрын
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.
@azatkadyrov3634
@azatkadyrov3634 3 жыл бұрын
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
@Switch620
@Switch620 Жыл бұрын
Glad to have found this and it is still relavent 4 years later!
@zsoltb.horcsik3428
@zsoltb.horcsik3428 4 жыл бұрын
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.
@pkg2885
@pkg2885 4 жыл бұрын
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 ^_^
@davidofug
@davidofug 3 жыл бұрын
Yay! Once again, I wanted something brief but comprehensive. Thank you once again!
@Geomaverick124
@Geomaverick124 3 жыл бұрын
I think you are the only one that actually has this type of tutorial. Pretty cool! I would def take a course on this :)
@morisfalearn3965
@morisfalearn3965 3 жыл бұрын
very very very vert very goood , thank you alex
@Thysta
@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.
@rpmarketing9864
@rpmarketing9864 3 жыл бұрын
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
@evgeniisharaborin8071
@evgeniisharaborin8071 Жыл бұрын
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.
@TheMiaReno
@TheMiaReno 11 ай бұрын
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.
@ThorStroliaDavis
@ThorStroliaDavis 4 жыл бұрын
The minute he glitched and said "Direc-dec-dectory..." I felt that so hard. Story of my life.
@technicallyparv
@technicallyparv 4 жыл бұрын
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!
@internet-bro
@internet-bro 4 жыл бұрын
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)
@franciscoc.9653
@franciscoc.9653 4 жыл бұрын
Thank you for the tutorial. How you can activate the "style" tab for your custom widget?
@MakeDreamWebsite
@MakeDreamWebsite 4 жыл бұрын
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/
@DarbazDara
@DarbazDara 3 жыл бұрын
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....
@JohnSmith-is6ns
@JohnSmith-is6ns 4 жыл бұрын
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 :)
@fissunix
@fissunix 4 жыл бұрын
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.
@joseenrique7335
@joseenrique7335 3 жыл бұрын
This is exactly what I was looking for, thank you very much, you got a new subscriber : )
@WilliamAlexanderJr
@WilliamAlexanderJr 4 жыл бұрын
Thanks for this video - super useful, especially with the demo code supplied as well. This worked well for me.
@WPCasts
@WPCasts 4 жыл бұрын
I am so glad! Cheers!
@nassimREHALI
@nassimREHALI 2 жыл бұрын
Thanks for this video - super useful
@developer_larry
@developer_larry 4 жыл бұрын
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))
@Swayam57
@Swayam57 2 жыл бұрын
Thanks for such a great tutorial, It was very easy to understand & implement.
4 жыл бұрын
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!
@acehobojoe
@acehobojoe 4 жыл бұрын
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.
@juanobrach
@juanobrach 4 жыл бұрын
Thanks for the video but, what about Javascript for the admin area of the widget ?
@samirsamir7779
@samirsamir7779 4 жыл бұрын
waw ! thanks. , please more videos on how to customize the css/php for any pro wordpress website ! thanks.
@OliverMaklott-om
@OliverMaklott-om 4 жыл бұрын
Hey Alex! Great Tutorial, thank you so much.
@coreyapotter
@coreyapotter 4 жыл бұрын
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.
@WPCasts
@WPCasts 4 жыл бұрын
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/
@lesterpineda
@lesterpineda 4 жыл бұрын
Thanks for the video, very helpful!
@WPCasts
@WPCasts 4 жыл бұрын
I’m glad you found it helpful! :)
@victorsaisse1340
@victorsaisse1340 3 жыл бұрын
Awesome tutorial, thank you so much!
@josuebarros-desenvolvedorw2490
@josuebarros-desenvolvedorw2490 4 жыл бұрын
Please, make more Elementor development tutorials!!!
@alexlytle089
@alexlytle089 3 жыл бұрын
Please, make more Elementor development tutorials!!! PLEASE PLEASE PLEASE
@amirad6054
@amirad6054 3 жыл бұрын
Thanks for the video, very helpful
@israelrivas3159
@israelrivas3159 3 жыл бұрын
omg... this is great content!! TNXX!!!
@rtpHarry
@rtpHarry 3 жыл бұрын
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?
@pes2013vietnam
@pes2013vietnam 3 жыл бұрын
comment block I think
@rtpHarry
@rtpHarry 3 жыл бұрын
@@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.
@pes2013vietnam
@pes2013vietnam 3 жыл бұрын
@@rtpHarry Thanks for let me know, have a nice day ;)!
@fissunix
@fissunix 4 жыл бұрын
Awesome as usual !
@WPCasts
@WPCasts 4 жыл бұрын
Thanks! The encouragement means a lot :)
@adrkolev8037
@adrkolev8037 4 жыл бұрын
Please make a video how you build a wordpress theme from scratch. What is your workflow ? Thanks!
@saeedjoshani
@saeedjoshani 3 жыл бұрын
Please add more 😍🤩😍
@KentJudeBeldeniza1818
@KentJudeBeldeniza1818 4 жыл бұрын
Thanks for this tutorial.
@piter7757
@piter7757 4 жыл бұрын
Please do elementor widget post with custom settings like columns count based on responsive
@Etroque
@Etroque 2 жыл бұрын
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 :-)
@mexyfries182
@mexyfries182 3 жыл бұрын
awesome stuff :)
@toano8855
@toano8855 3 жыл бұрын
Thank for the tutorial
@kellykillby7118
@kellykillby7118 3 жыл бұрын
veri nice tutorial, thanks u sir.
@chris_ea
@chris_ea 3 жыл бұрын
Awesome - have you made any tutorial about creating a elementor for action plug?
@jonskibonski3368
@jonskibonski3368 3 жыл бұрын
Amazing tutorial, thanks. Is there a similar tutorial for Gutenberg?
@philip9677
@philip9677 2 жыл бұрын
hello can you make more elementor custom control tutorials maybe also to extend the skins widget
@adecuellar8985
@adecuellar8985 2 жыл бұрын
Thank you for the tutorial, I have a question about the updates of elementor, what happen with this changes? they still working?. Thank u :)
@kenbee85
@kenbee85 4 жыл бұрын
Honest question. How were you able to connect the WordPress directory to VSCode? I'm kinda the new to this thing. Thanks
@rezasoltani7982
@rezasoltani7982 4 жыл бұрын
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..
@DOMMYEXPERIMENTAL
@DOMMYEXPERIMENTAL 3 жыл бұрын
Hmm you´re working in the parent theme, isn´t this causing any trouble with updates and such?
@jaceweyant2678
@jaceweyant2678 9 ай бұрын
How do you open the elementor folder in vs code? I can't seem to find the location
@DarbazDara
@DarbazDara 3 жыл бұрын
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....
@mohamudosmanhamud9289
@mohamudosmanhamud9289 4 жыл бұрын
It's good to make simple website That Compatible With Elementor if it's possible. Thank You For help
@YjuriY
@YjuriY 2 жыл бұрын
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
@ojoclinico5128
@ojoclinico5128 3 жыл бұрын
HI!!!!!!!!!!! Great tutorial but how can I include the style.css for them custom component ???!
@AnthonyTilahun
@AnthonyTilahun 3 жыл бұрын
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)
@michaelhofby
@michaelhofby 4 жыл бұрын
Hi can you make a video on how to produce SVG files that are truly vectors?
@epeleg
@epeleg 3 жыл бұрын
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?
@cpyu99
@cpyu99 3 жыл бұрын
thanks
@sunflowerhk100
@sunflowerhk100 4 жыл бұрын
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... :(
@kingmicrogreen3662
@kingmicrogreen3662 3 жыл бұрын
How to create specific sidebar on specific page or post on elementor... Thank before
@Bright-Great
@Bright-Great 2 жыл бұрын
Can I use it on any of my WordPress, e.g install it as a plugin
@muhammadmoneeb1163
@muhammadmoneeb1163 4 жыл бұрын
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.
@alexlytle089
@alexlytle089 3 жыл бұрын
Please do more tutorials on elementor
@parinda.befikar
@parinda.befikar 4 жыл бұрын
Can you please make video on admin side styles updating through a stylesheet file ?
@dogzrgood
@dogzrgood 3 жыл бұрын
Any way to create an option for creating blog (single) page with elementor free version?
@cosciblog
@cosciblog 3 жыл бұрын
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.
@hasan0191
@hasan0191 4 жыл бұрын
I will also be elememtor widgets developer one day.
@internet-bro
@internet-bro 4 жыл бұрын
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?
@internet-bro
@internet-bro 4 жыл бұрын
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', ] );
@darknessblue6901
@darknessblue6901 4 жыл бұрын
How to use custom icon or image in the elementor get_icon() function?
@naisestudio8158
@naisestudio8158 3 жыл бұрын
please make tutorial for create new widget category
@AutosugestionPositiva
@AutosugestionPositiva 2 жыл бұрын
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.
@hiteshchauhan333
@hiteshchauhan333 4 жыл бұрын
hello sir how to add custom categories using elementor can you send me link or video thank you
@MakeDreamWebsite
@MakeDreamWebsite 4 жыл бұрын
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/
@unknownking7835
@unknownking7835 4 жыл бұрын
Please make a video on how to create custom post widget on elementor pro.
@UnlimitedElements
@UnlimitedElements 3 жыл бұрын
you should take a look at our plugin maybe you can make a video about it.
@bintareq115
@bintareq115 3 жыл бұрын
How can active css to my widget?
@kevin_neugebauer
@kevin_neugebauer Жыл бұрын
what are these "" in the code at 19:48 ?
@avinavaggarwal4713
@avinavaggarwal4713 4 жыл бұрын
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🙏
@haroldchoung3858
@haroldchoung3858 3 жыл бұрын
What happen when theme update?
@kellykillby7118
@kellykillby7118 3 жыл бұрын
sir, how do it styling this use sass???
@josuebarros-desenvolvedorw2490
@josuebarros-desenvolvedorw2490 4 жыл бұрын
How can I do this inside plugins folders instead of themes?
@WPCasts
@WPCasts 4 жыл бұрын
It's basically the same, you just need to change where the directories are pointed
@ylebrac
@ylebrac 3 жыл бұрын
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...
@iammukto
@iammukto 4 жыл бұрын
make a slider wedget with owl caresol or slick slider
@alexlytle089
@alexlytle089 3 жыл бұрын
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/
@robertgartside9031
@robertgartside9031 4 жыл бұрын
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...
@pes2013vietnam
@pes2013vietnam 3 жыл бұрын
Contact me at gianghl1983@gmail.com or my Facebook: facebook.com/Giang.IT24.VN
@fejanmalek6697
@fejanmalek6697 4 жыл бұрын
Anybody here who has don't load a elementor in wp
@alexlytle089
@alexlytle089 3 жыл бұрын
why
@PotentStudios
@PotentStudios 4 жыл бұрын
Very basic nothing of coding. How are you calling up the full blocks of code so quickly?
@philiphaugaard757
@philiphaugaard757 2 жыл бұрын
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!
Make Your Own Elementor Widget Using ChatGPT (5 Easy Steps)
21:15
How I Did The SELF BENDING Spoon 😱🥄 #shorts
00:19
Wian
Рет қаралды 36 МЛН
SCHOOLBOY. Последняя часть🤓
00:15
⚡️КАН АНДРЕЙ⚡️
Рет қаралды 13 МЛН
Bony Just Wants To Take A Shower #animation
00:10
GREEN MAX
Рет қаралды 7 МЛН
Advanced Widget Creation - CodePen to Elementor
20:30
Unlimited Elements
Рет қаралды 12 М.
5 JavaScript Concepts You HAVE TO KNOW
9:38
James Q Quick
Рет қаралды 1,4 МЛН
Creating a custom elementor widget with PHP and Javascript
58:31
Arne De Belser
Рет қаралды 2,3 М.
JavaScript Project: Creating a Tawk Style Widget
38:29
Code With Bubb
Рет қаралды 12 М.
The New dialog HTML Element Changes Modals Forever
12:09
Web Dev Simplified
Рет қаралды 584 М.
Why and When you will need Crocoblock - Elementor Pro on steroids
16:04
Part 1: Actions - WordPress Hooks Tutorial For Beginners 2019
12:11
🍎 Зачем покупают Magic Trackpad от Apple?
0:32
ЗЕ МАККЕРС
Рет қаралды 241 М.
🔥НОВАЯ БАТАРЕЯ?😮
0:40
Demin's Lounge
Рет қаралды 266 М.
Как бесплатно замутить iphone 15 pro max
0:59
ЖЕЛЕЗНЫЙ КОРОЛЬ
Рет қаралды 8 МЛН
Low Battery 🪫
0:10
dednahype
Рет қаралды 904 М.
📱магазин техники в 2014 vs 2024
0:41
djetics
Рет қаралды 966 М.
Kumanda İle Bilgisayarı Yönetmek #shorts
0:29
Osman Kabadayı
Рет қаралды 4,6 МЛН