ฝัง
- เผยแพร่เมื่อ 25 มิ.ย. 2024
- I've asked ChatGPT to write me a custom Elementor widget from scratch.
Set up a testing site first (never try this on a live website): wpmkr.com/instawp
Download the starter code for any new Elementor widget: wpmkr.com/wp-content/uploads/...
Download the final code for the widget I made in this video: wpmkr.com/wp-content/uploads/...
You can watch the video, look at my code, and use the same process to make a unique widget of your own!
It's an amazing skill to have, and with ChatGPT, it is easier than ever to learn it.
Timestamps:
00:00 Amazing Custom Widgets You Can Make
01:13 My Custom Widget Idea
01:45 Step 1 - New Widget Setup
05:43 Step 2 - Design Your Widget
12:44 Step 3 - Add Elementor Options
17:08 Step 4 - Expand Your Options
18:26 Step 5 - Test Your Widget
20:23 Final Result
#wordpress #elementor #chatgpt
Check out some more of our guides to level up your WordPress skills!
Learn how to make your first WordPress plugin with ChatGPT: • I Asked ChatGPT To Wri...
I've asked ChatGPT to do a $5000 WordPress job: • I Asked ChatGPT To Do ...
I sincerely hope that this video has helped and inspired you :)
I am amazed to tell you I have created my first plugin by following your video. Thanks a Lot for the amazing tutorial.
Thank youuuu please make more videos on elementor widgets
More videos coming!
I followed along and had a lot of fun making this widget! Great video 😎
You are amazing! Couldn't have made my website without you!
Haha no you are amazing 🙏♥️
Love this type of content, thank you very much I am definitely gonna play around with this :D
Thank you so much Frans, glad you like it! Highly recommend playing around with it, super satisfying to build something like this :)
Great video, thanks for the inspiration to create your own widgets
Unbelievably awesome!!!!
creativity at a high level. I love the final product and the flower website idea. Look forward to have a upgraded product.
Glad you liked it, thank you so much!
Well explained! Thanks a lot!
I hope there will be more interesting videos about widgets. 😃
Loving the ChatGPT content - subbed!
Thank you so much Mark!
Terrific research, thank you much!
Thank you!
Great! Thanks, very interesting!
Thank you!. Excellent content!. Subscribed!
Easy to understand and very well explained. Thanks! Hope you keep making more videos like this one. Subscribed
Thank you so much!
Thank you for the widget. Please make more useful widgets.
Very good. Thank you from manhattan
Great... Works Perfectly on my web...
Love it. It's very informative. I hope you will have more and more video about creating custom elementor widgets.🥳
Glad you liked it, thank you!
Loving the ChatGPT content .
Awsome!
This is great!❤
Awesome content dude!!!
Thank you so much!
It's finally here! Our full tutorial on how to make your own custom Elementor widget!
Check out our channel for more cool WordPress / ChatGPT tutorials. I sincerely hope that these videos help & inspire you, thank you for watching!
Solid knowledge here, thanks a lot
Thank you!
You just giving me incredible ideas for me , very Thank you! from Thailand🔥
So happy to hear that my man! Thank you.
Wow! this is just amazing! thank you so much! I hope to see many more videos from you. you are such a great teacher!! I just finished learning your blog tutorial. with your teaching I might add it didn't look half bad at all. thank you. I'm going to give this a go now! your awesome!
Haha thank you for the comment, glad it helps! More videos coming :)
Pure gold!
Thank you sir!
Sure great idea mate keep doing it
this is amazing :)
woaaa, incredible, please make videos for customize any plugin
Awesome stuff dude, it is nice seeing you diving into the whole coding side of things. I have been hearing about use cases of ChatGPT being used to teach code as well.
I definitely feel it's a great tool to use but from my experience you have to prompt it but by bit for beat results.
Definitely had the same experience, you need to know what to ask for. But now with GPT-4, it will probably keep getting better and better. It's insane how fast this field is making progress right now :)
thank you man
🤣 I'm trying to do a custom elementor widget with ChatGPT now and I saw your video 🤣 Nice timing
Nice! I hope this helps, I'd love to see what you make 😃
thank you sir you are the best
Wow!
Champion, thank you. Would love to see a Divi equivalent.
Thanks Steve, noted! Might give that a shot next :)
My first thought when I read the title was; Omg, another clueless "developer", but you proved me wrong! Well well explained and good lenght of the video.
Only one thing I like to mention.
If you are using this widget, the css and js code will be always inserted. This can be written in a external file and by using class or attribute names. This way you make your code leaner.
Otherwise, great work!
Haha, glad you liked it! Your recommendations are great. I just wanted to keep it as simple as possible for a complete beginner.
Thank you so much for the comment!
Hello Sir. I wanted to separate styles and scripts. How can I pass ID to style.css?
Nice
How professional are you... Greetings ❤, Subscribed done
Thank you so much!
I'm enjoying your custom widget. Works great for a portfolio. I'm just trying to get chat gpt to add a unmute button now 😁
Managed to get chatgpt to add a video unmute/mute button when you mouse over the container 🤗
My man, love to hear that! Awesome that you got it figured out, and a great extension to the widget :)
PS: I love your portfolio design, as well as the way you've expanded and used the widget haha. Beautiful idea and design 👍 best of luck!
Thank you so much for this tutorial. Needed it badly. I want to know more about how to achieve something using API. Can you please make a video that.
How to connect with you?
Great Video!
The text area conditional statement could also be used in the javascript code to only show the overlay if this is set to 'yes'. I found Javscript seemed to give some errors in the console as it was trying to show an element that didn't 'exist'. 🙂
Great tip Jared, thank you!
👏🏼👏🏼👏🏼
Ok this is amazing tutorial to learn with used it to design a custom testimonial widget. honestly hope ChatGPT-4 can learn more about elementor and help me figure out padding issuse with code. Also thanks for this amazing video
I am also like tha video and subscribed
Very good one bro... can you make a tutorial to include 2 or more widgets in ONE plugin... so that for every NEW design we don't have to do many that many plugins...
You can register a separate widget in the same plugin. Try asking ChatGPT how to add (or how to register) another widget inside your plugin, it is pretty good at showing you this sort of thing! :)
I will also consider it for a future video, thanks for your comment and suggestion!
Make more elementor widgets & custom plugins bro
Can you make a main menu element for elementor? The idea is to make a single page website with scroll effect whenever we click each item menu link to each of block inside the single page website?
It would be great to have a Widget creator option natively in Elementor.
You can start from unlimited elementor widget plugin
Maybe one day! :)
@@gabrieleferrari2266 Native option would be much better.
Can you please make a video on how to create a lightnovel or webnovel wordpress website?
this is so awesome.Creating our own widgets for elementor or any page builder out there. But what happens if you update elementor?Will the widget be overwritten?How to fix this without using child theme.
Just use a child theme, there are plugins to generate the Hello Elementor theme
Please can you make booking plugin like "yith booking for woocommerce"
i had also made few wp plugins using chat gtp
for marquee text like news channel ( tickers)
if anyone needs
you can ask me or comment on this
esti tare! mi-ar placea sa colaborez cu tine :)
wow
Please make a video that explains how to createwith ChatGPT a functional .json template simply from a prompt
Hey Gabriele, unfortunately I don't think it can write that (at least for now) :)
are you selling that widget or is it possible to download it and try it?
You can download it for free from the description of the video. You can also watch the video and learn how to make it yourself :)
how can i add another widget ? Cause when i try to upload the file again with a new name i dont find it in elementor i only have the first one
You'll have to look through the code and change the names of the plugin itself, and of the widget, so that they are unique (they can't be the same in two separate plugins if you install it twice). You'll have to do this carefully because they have to be changed in multiple places. Play around with it and you'll get it to work! :)
Can I create widget for flatsome UX builder by following this video?
You can definitely try to ask ChatGPT about it. I'm not too familiar with Flatsome, but if there's a way to insert custom widgets into it, GPT should know about it :)
awesome bro
bro plz make a video on
elementor form data to mailchimp.
i am using mailchimp api all data is going nicely to mailchimp
but problem is when i am testing
if same users want to fill the form
it is giving error 401, 400 some time
how to fix it
please let me know or make video
I'm not sure what your setup is exactly so I don't know. I'd try Mailchimp's support, they might be able to help you figure out where the problem is.
I did a QR code generator with chat gbt for Wordpress 😍 that you can give any product a unique QR code 😍
That's awesome, love to hear it!
million dollar video wow can you mke video how to create and sell plugin
Glad you liked it! I'll keep your suggestion in mind, thank you!
Can you give me the code for the gallery of photos as you showed.
You can download the final code from the video's description :)
I installed this plugin WP, but i don't find him, in anycase, when I edit page or article, contrary with your other plugin for instagram, that I find almost Immediatly.
In sidebar Widgets, I tried to find him. Can someone help me please ?
Hey, it should be in your Elementor sidebar. You could type "WP Maker Image" in the widget search box and it should show up. Of course, make sure the right version of the plugin is installed and activated on your website (link is in the video description), as well as an up to date version of WordPress and Elementor.
I hope you've found it, let me know if you keep running into this problem :) good luck!
@@wpmaker Thank you very much for your answer, I didn’t realize I had to install your personalized elementor in the first place, I had to install the official. I'll test that.
Ok I get it now, it is necessary that I'm in "modify with elementor" mod, when I'm in my page or article modification, for see your widget. Ok, I was thinking that will function like your Instagram widget.
@@unit-spe7558 To clarify, you don't need any personalized version of Elementor. You just install the official Elementor plugin. Then you install the plugin we made in this video (from the link in the description), in addition to Elementor. This one simply adds the additional widget that you see in the video, to Elementor's options.
Yes, you need to be in the Edit with Elementor interface to use this widget :) the Instagram one is a Gutenberg block, while this is an Elementor widget. Best of luck!
is this only for pro?
No, this works fully only with Elementor free :)
Create post grid
Check out my Blog tutorial! We create a post grid there :)
how does this work .. because chatGPT is stuck in 2021 :) ?
Elementor was released in ~2017, so for the most part that's not a problem. I do mention this in the video and give some tips on how you can get more up to date code in case something doesn't work right :)
your video links don't work?
Hello sir, the links are working on my end :) are you still having this problem?
@@wpmaker I managed to install my elementor pro to this test page, my brain hurts, there's certainly a learning curve. Thanks for the tutorial. I'll press on and let you know how it goes
@@detailmasters-calgary2109 There's certainly a learning curve, making a plugin like this from scratch is a fairly advanced endeavour, even with tools like ChatGPT.
There's no need for Elementor Pro for this video (I'm not using it in the video either), the Free version is enough. But there's no downside to having Pro also.
If you keep at it I'm sure you'll make it to the end result and learn a lot along the way! Good luck!
@@wpmaker Thanks, I first read this reply wrong. I thought you were letting me know that a link on my website didn't work lol, and it wasn't working so I went and fixed it so now it works, this is how little sleep I have had lately LOL then I came back to let you know that my video link was working and to let you to know to try it again OMG I'm going Nuts. sigh. So... Thanks eh!
Do another video like this, except use Oxygen instead of Elementor. That one I would actually take the time to watch. IMHO: Oxygen > Elementor in just about every way.
йоур инглишь из пьорфект
Very bad code. The main `plugin.php` file uses deprecated registrations methods.
Have these just been deprecated in the last 2 years or so, beyond the knowledge limit that ChatGPT has?
This doesn't seem to be the case, I couldn't find anything about the methods being deprecated and there are no PHP deprecation warnings when running the plugin.
It is simply the easiest/simplest way to register a new plugin with the fewest lines of code, and for simple projects like this there is no downside to it.
your video is too fast it's difficult to keep track
in configuration put spees ,5
@@pedrocosta1889 oh yeah, Thanks. I'm sure it helps you to make a shorter video as well. Thanks for the tip.