Make Your Own Elementor Widget Using ChatGPT (5 Easy Steps)

Рет қаралды 23,530

Күн бұрын

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

Пікірлер: 125

@muhammadbilalarif Жыл бұрын

Thank youuuu please make more videos on elementor widgets

@wpmaker Жыл бұрын

More videos coming!

@marjoriehopegross281 8 ай бұрын

You are amazing! Couldn't have made my website without you!

@wpmaker 8 ай бұрын

Haha no you are amazing 🙏♥️

@aiPROFITz Жыл бұрын

I followed along and had a lot of fun making this widget! Great video 😎

@VictoriaAlfredSmythe 9 ай бұрын

Very good. Thank you from manhattan

@Thiarara1 7 ай бұрын

creativity at a high level. I love the final product and the flower website idea. Look forward to have a upgraded product.

@wpmaker 6 ай бұрын

Glad you liked it, thank you so much!

@prozuktibidda88 Жыл бұрын

Unbelievably awesome!!!!

@asukagmbh Жыл бұрын

Great video, thanks for the inspiration to create your own widgets

@MUHAMMADASHRAFMUNIR 27 күн бұрын

I am amazed to tell you I have created my first plugin by following your video. Thanks a Lot for the amazing tutorial.

@WordPressandSEO 8 ай бұрын

Well explained! Thanks a lot! I hope there will be more interesting videos about widgets. 😃

@wpmaker Жыл бұрын

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!

@fransbrewis4776 Жыл бұрын

Love this type of content, thank you very much I am definitely gonna play around with this :D

@wpmaker Жыл бұрын

Thank you so much Frans, glad you like it! Highly recommend playing around with it, super satisfying to build something like this :)

@arnauduu3765 Жыл бұрын

Great! Thanks, very interesting!

@endritsusuri7974 Жыл бұрын

Awsome!

@ambersaugier4112 Жыл бұрын

This is great!❤

@lautarob Жыл бұрын

Thank you!. Excellent content!. Subscribed!

@storworx4793 Жыл бұрын

Terrific research, thank you much!

@wpmaker Жыл бұрын

Thank you!

@konteche-learning828 Жыл бұрын

Thank you for the widget. Please make more useful widgets.

@SunakshiA Жыл бұрын

Loving the ChatGPT content .

@DarmaMatok-rz9md Жыл бұрын

Great... Works Perfectly on my web...

@Yosie432 Жыл бұрын

Easy to understand and very well explained. Thanks! Hope you keep making more videos like this one. Subscribed

@wpmaker Жыл бұрын

Thank you so much!

@markmckeown87 Жыл бұрын

Loving the ChatGPT content - subbed!

@wpmaker Жыл бұрын

Thank you so much Mark!

@kkkkkate Жыл бұрын

Love it. It's very informative. I hope you will have more and more video about creating custom elementor widgets.🥳

@wpmaker Жыл бұрын

Glad you liked it, thank you!

@buildingabetterwebsite Жыл бұрын

this is amazing :)

@dimejisaheed7546 11 ай бұрын

Wow!

@knightride9635 Жыл бұрын

Solid knowledge here, thanks a lot

@wpmaker Жыл бұрын

Thank you!

@tanawitjnew2155 Жыл бұрын

You just giving me incredible ideas for me , very Thank you! from Thailand🔥

@wpmaker Жыл бұрын

So happy to hear that my man! Thank you.

@barmolino Жыл бұрын

Sure great idea mate keep doing it

@Thebigrace-01 4 ай бұрын

thank you man

@user-vl7uw9sj4u 7 ай бұрын

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!

@wpmaker 7 ай бұрын

Haha thank you for the comment, glad it helps! More videos coming :)

@379rale Жыл бұрын

Pure gold!

@wpmaker Жыл бұрын

Thank you sir!

@moments.xyz11 Жыл бұрын

thank you sir you are the best

@invitify9948 Жыл бұрын

woaaa, incredible, please make videos for customize any plugin

@codingcompiled Жыл бұрын

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.

@wpmaker Жыл бұрын

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

@centraldeexames7300 Жыл бұрын

Awesome content dude!!!

@wpmaker Жыл бұрын

Thank you so much!

@nikasiradze13 Жыл бұрын

🤣 I'm trying to do a custom elementor widget with ChatGPT now and I saw your video 🤣 Nice timing

@wpmaker Жыл бұрын

Nice! I hope this helps, I'd love to see what you make 😃

@DanielSpycher 9 ай бұрын

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!

@wpmaker 9 ай бұрын

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!

@user-tq9mm9wy6w 6 ай бұрын

Hello Sir. I wanted to separate styles and scripts. How can I pass ID to style.css?

@muhaa5578 Жыл бұрын

Nice

@StevenDoig Жыл бұрын

Champion, thank you. Would love to see a Divi equivalent.

@wpmaker Жыл бұрын

Thanks Steve, noted! Might give that a shot next :)

@matejcalic4008 9 ай бұрын

👏🏼👏🏼👏🏼

@digital.olimon Жыл бұрын

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 😁

@digital.olimon Жыл бұрын

Managed to get chatgpt to add a video unmute/mute button when you mouse over the container 🤗

@wpmaker Жыл бұрын

My man, love to hear that! Awesome that you got it figured out, and a great extension to the widget :)

@wpmaker Жыл бұрын

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!

@HatemFrere Жыл бұрын

How professional are you... Greetings ❤, Subscribed done

@wpmaker Жыл бұрын

Thank you so much!

@jaredspooley9273 11 ай бұрын

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'. 🙂

@wpmaker 11 ай бұрын

Great tip Jared, thank you!

@latefilms2 Жыл бұрын

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

@utsabdeepray6030 Жыл бұрын

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?

@thozhathozha 3 ай бұрын

I am also like tha video and subscribed

@rahulbaghel1680 Жыл бұрын

Make more elementor widgets & custom plugins bro

@rakesh.dsouza 4 ай бұрын

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

@wpmaker 4 ай бұрын

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!

@rocaivan Жыл бұрын

It would be great to have a Widget creator option natively in Elementor.

@gabrieleferrari2266 Жыл бұрын

You can start from unlimited elementor widget plugin

@wpmaker Жыл бұрын

Maybe one day! :)

@rocaivan Жыл бұрын

@@gabrieleferrari2266 Native option would be much better.

@clarea_zoanctionct Жыл бұрын

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?

@baylonyap1113 Жыл бұрын

wow

@Mygoldenhamdan 6 ай бұрын

Can you please make a video on how to create a lightnovel or webnovel wordpress website?

@Bhardwajweb 11 ай бұрын

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

@etsytipsandtricks7781 Жыл бұрын

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.

@PerryPalmtree Жыл бұрын

Just use a child theme, there are plugins to generate the Hello Elementor theme

@Ali_dev Жыл бұрын

Please can you make booking plugin like "yith booking for woocommerce"

@bobelism Жыл бұрын

esti tare! mi-ar placea sa colaborez cu tine :)

@sulaimanalmaraghi Жыл бұрын

I did a QR code generator with chat gbt for Wordpress 😍 that you can give any product a unique QR code 😍

@wpmaker Жыл бұрын

That's awesome, love to hear it!

@gabrieleferrari2266 Жыл бұрын

Please make a video that explains how to createwith ChatGPT a functional .json template simply from a prompt

@wpmaker Жыл бұрын

Hey Gabriele, unfortunately I don't think it can write that (at least for now) :)

@AmanSpace365 10 ай бұрын

million dollar video wow can you mke video how to create and sell plugin

@wpmaker 10 ай бұрын

Glad you liked it! I'll keep your suggestion in mind, thank you!

@ManishSingh-wl5ey Жыл бұрын

Can I create widget for flatsome UX builder by following this video?

@wpmaker Жыл бұрын

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

@iswin-2861 Жыл бұрын

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

@wpmaker Жыл бұрын

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

@0619ricardo6190 Жыл бұрын

are you selling that widget or is it possible to download it and try it?

@wpmaker Жыл бұрын

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

@Bhardwajweb 11 ай бұрын

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

@wpmaker 11 ай бұрын

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.

@mohobbathjahan7515 Жыл бұрын

Can you give me the code for the gallery of photos as you showed.

@wpmaker Жыл бұрын

You can download the final code from the video's description :)

@unit-spe7558 Жыл бұрын

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 ?

@wpmaker Жыл бұрын

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!

@unit-spe7558 Жыл бұрын

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

@wpmaker Жыл бұрын

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

@instagramaccount6748 6 ай бұрын

Create post grid

@wpmaker 5 ай бұрын

Check out my Blog tutorial! We create a post grid there :)

@kevinpatel1143 3 ай бұрын

is this only for pro?

@wpmaker 2 ай бұрын

No, this works fully only with Elementor free :)

@detailmasters-calgary2109 Жыл бұрын

your video links don't work?

@wpmaker Жыл бұрын

Hello sir, the links are working on my end :) are you still having this problem?

@detailmasters-calgary2109 Жыл бұрын

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

@wpmaker Жыл бұрын

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

@detailmasters-calgary2109 Жыл бұрын

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

@fatjay9402 Жыл бұрын

how does this work .. because chatGPT is stuck in 2021 :) ?

@wpmaker Жыл бұрын

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

@serusok Жыл бұрын

йоур инглишь из пьорфект

@RamiYushuvaev-nf1eo Жыл бұрын

Very bad code. The main `plugin.php` file uses deprecated registrations methods.

@markmckeown87 Жыл бұрын

Have these just been deprecated in the last 2 years or so, beyond the knowledge limit that ChatGPT has?

@wpmaker Жыл бұрын

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.

@jmarino715 Жыл бұрын

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.