How to Build a Custom Elementor Widget Using PHP and JavaScript

Поделиться
HTML-код
  • Опубликовано: 16 сен 2024

Комментарии • 112

  • @WPCasts
    @WPCasts  4 года назад +18

    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 года назад +21

    This is the only Custom Elementor Widget tutorial I've seen out there. And it has

  • @ashleyredman
    @ashleyredman 4 года назад +2

    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 года назад +1

    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

  • @zsoltb.horcsik3428
    @zsoltb.horcsik3428 4 года назад +1

    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 года назад +8

    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 ^_^

  • @Switch620
    @Switch620 Год назад

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

  • @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 :)

  • @davidofug
    @davidofug 3 года назад

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

  • @franciscoc.9653
    @franciscoc.9653 4 года назад +6

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

    • @MakeDreamWebsite
      @MakeDreamWebsite 4 года назад +5

      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/

  • @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.

  • @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.

  • @fissunix
    @fissunix 4 года назад +2

    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.

  • @technicallyparv
    @technicallyparv 4 года назад +1

    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)

  • @TheMiaReno
    @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.

  • @samirsamir7779
    @samirsamir7779 4 года назад +2

    waw ! thanks. , please more videos on how to customize the css/php for any pro wordpress website ! thanks.

  • @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

  • @morisfalearn3965
    @morisfalearn3965 3 года назад +1

    very very very vert very goood , thank you alex

  • @juanobrach
    @juanobrach 4 года назад +1

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

  • @ThorStroliaDavis
    @ThorStroliaDavis 4 года назад

    The minute he glitched and said "Direc-dec-dectory..." I felt that so hard. Story of my life.

  • @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 :)

  • @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....

  • @rtpHarry
    @rtpHarry 3 года назад +2

    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 года назад +1

      comment block I think

    • @rtpHarry
      @rtpHarry 3 года назад +2

      @@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 ;)!

  • @adrkolev8037
    @adrkolev8037 4 года назад +3

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

  • @josuebarros-desenvolvedorw2490
    @josuebarros-desenvolvedorw2490 4 года назад +1

    Please, make more Elementor development tutorials!!!

    • @alexlytle089
      @alexlytle089 3 года назад +1

      Please, make more Elementor development tutorials!!!
      PLEASE PLEASE PLEASE

  • @developer_larry
    @developer_larry 4 года назад +1

    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))

  • @WilliamAlexanderJr
    @WilliamAlexanderJr 4 года назад +1

    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!

  •  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!

  • @Swayam57
    @Swayam57 2 года назад

    Thanks for such a great tutorial, It was very easy to understand & implement.

  • @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.

  • @joseenrique7335
    @joseenrique7335 3 года назад

    This is exactly what I was looking for, thank you very much, you got a new subscriber : )

  • @piter7757
    @piter7757 4 года назад +1

    Please do elementor widget post with custom settings like columns count based on responsive

  • @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 года назад +1

      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/

  • @OliverMaklott-om
    @OliverMaklott-om 4 года назад

    Hey Alex! Great Tutorial, thank you so much.

  • @lesterpineda
    @lesterpineda 4 года назад +1

    Thanks for the video, very helpful!

    • @WPCasts
      @WPCasts  4 года назад +2

      I’m glad you found it helpful! :)

  • @victorsaisse1340
    @victorsaisse1340 3 года назад

    Awesome tutorial, thank you so much!

  • @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

  • @chris_ea
    @chris_ea 3 года назад

    Awesome - have you made any tutorial about creating a elementor for action plug?

  • @nassimREHALI
    @nassimREHALI 2 года назад

    Thanks for this video - super useful

  • @jaceweyant2678
    @jaceweyant2678 9 месяцев назад

    How do you open the elementor folder in vs code? I can't seem to find the location

  • @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

  • @jonskibonski3368
    @jonskibonski3368 3 года назад

    Amazing tutorial, thanks.
    Is there a similar tutorial for Gutenberg?

  • @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)

  • @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..

  • @philip9677
    @philip9677 2 года назад

    hello can you make more elementor custom control tutorials maybe also to extend the skins widget

  • @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 :-)

  • @Bright-Great
    @Bright-Great 2 года назад

    Can I use it on any of my WordPress, e.g install it as a plugin

  • @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 :)

  • @kingmicrogreen3662
    @kingmicrogreen3662 3 года назад

    How to create specific sidebar on specific page or post on elementor... Thank before

  • @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?

  • @mohamudosmanhamud9289
    @mohamudosmanhamud9289 4 года назад

    It's good to make simple website That Compatible With Elementor if it's possible.
    Thank You For help

  • @ojoclinico5128
    @ojoclinico5128 3 года назад

    HI!!!!!!!!!!! Great tutorial but how can I include the style.css for them custom component ???!

  • @kellykillby7118
    @kellykillby7118 3 года назад

    veri nice tutorial, thanks u sir.

  • @saeedjoshani
    @saeedjoshani 3 года назад

    Please add more 😍🤩😍

  • @cosciblog
    @cosciblog 4 года назад

    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.

  • @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... :(

  • @KentJudeBeldeniza1818
    @KentJudeBeldeniza1818 4 года назад

    Thanks for this tutorial.

  • @michaelhofby
    @michaelhofby 4 года назад

    Hi can you make a video on how to produce SVG files that are truly vectors?

  • @dogzrgood
    @dogzrgood 3 года назад

    Any way to create an option for creating blog (single) page with elementor free version?

  • @israelrivas3159
    @israelrivas3159 4 года назад

    omg... this is great content!! TNXX!!!

  • @darknessblue6901
    @darknessblue6901 4 года назад

    How to use custom icon or image in the elementor get_icon() function?

  • @alexlytle089
    @alexlytle089 3 года назад

    Please do more tutorials on elementor

  • @DOMMYEXPERIMENTAL
    @DOMMYEXPERIMENTAL 3 года назад

    Hmm you´re working in the parent theme, isn´t this causing any trouble with updates and such?

  • @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',
      ]
      );

  • @toano8855
    @toano8855 4 года назад

    Thank for the tutorial

  • @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.

  • @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....

  • @kevin_neugebauer
    @kevin_neugebauer Год назад

    what are these "" in the code at 19:48 ?

  • @kellykillby7118
    @kellykillby7118 3 года назад

    sir, how do it styling this use sass???

  • @bintareq115
    @bintareq115 3 года назад

    How can active css to my widget?

  • @hiteshchauhan333
    @hiteshchauhan333 4 года назад +1

    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/

  • @fissunix
    @fissunix 4 года назад

    Awesome as usual !

    • @WPCasts
      @WPCasts  4 года назад

      Thanks! The encouragement means a lot :)

  • @UnlimitedElements
    @UnlimitedElements 4 года назад

    you should take a look at our plugin maybe you can make a video about it.

  • @unknownking7835
    @unknownking7835 4 года назад

    Please make a video on how to create custom post widget on elementor pro.

  • @naisestudio8158
    @naisestudio8158 3 года назад

    please make tutorial for create new widget category

  • @hasan0191
    @hasan0191 4 года назад

    I will also be elememtor widgets developer one day.

  • @haroldchoung3858
    @haroldchoung3858 3 года назад

    What happen when theme update?

  • @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🙏

  • @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.

  • @mexyfries182
    @mexyfries182 3 года назад

    awesome stuff :)

  • @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

  • @cpyu99
    @cpyu99 3 года назад

    thanks

  • @alexlytle089
    @alexlytle089 4 года назад +1

    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/

  • @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

  • @robertgartside9031
    @robertgartside9031 4 года назад +1

    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

  • @PotentStudios
    @PotentStudios 4 года назад

    Very basic nothing of coding. How are you calling up the full blocks of code so quickly?

  • @fejanmalek6697
    @fejanmalek6697 4 года назад

    Anybody here who has don't load a elementor in wp

  • @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!

  • @amirad6054
    @amirad6054 3 года назад

    Thanks for the video, very helpful

  • @parinda.befikar
    @parinda.befikar 4 года назад

    Can you please make video on admin side styles updating through a stylesheet file ?