Vibe Code WordPress Plugin Masterclass 🤯 ![rw-book-cover](https://i.ytimg.com/vi/0IDiK1DBOtc/maxresdefault.jpg) ## Metadata - Author: [[WP Minute Tutorials]] - Full Title: Vibe Code WordPress Plugin Masterclass 🤯 - Category: #articles - Document Note: --- tags: - #WordPress - #VibeCoding - #PluginDevelopment Author: Matt Maderas Source: YouTube - Vibe Code WordPress Plugin Masterclass 🤯 Reference: https://www.youtube.com/watch?v=0IDiK1DBOtc date created: 2025-05-31 15:30 --- # Title: Vibe Coding a WordPress Plugin: A Practical Masterclass ## Table of Contents:  - 📝 Summary - 📖 Main Content - 🗒️ Notes - 📖 References - 🗣️ Paraphrase - 📰 Newsletter - ✅ Action Items - 🧪 Hypotheses - 📊 Methodology - ❓ Questions - 🔮 Future Research - 💡 Implications - 🧠 Learning Styles Assessment - 📊 Accessibility Assessment - 🌍 DEIB Assessment - ✅ Logical validity - 🔍 DARVO Analysis - 🔍 SEO Evaluation - 🎯 Conclusion ### References: - YouTube, "Vibe Code WordPress Plugin Masterclass 🤯" by Matt Maderas (https://www.youtube.com/watch?v=0IDiK1DBOtc) - WordPress.org Plugin Developer Handbook ## 📝 Summary: This masterclass video explores "vibe coding"—an experimental approach using AI tools (ChatGPT 4.5, Claude Opus) to rapidly ideate, prototype, and develop a WordPress plugin that embeds and manages YouTube videos inside the WordPress dashboard. The presenter walks through initial ideation, snippet testing, transitioning to a modular plugin, and syncing with GitHub for version control. The session highlights challenges of AI-generated code, emphasizes learning through iteration, and reflects on current gaps in seamless WordPress AI development environments. ## 📖 Main Content: The video starts by defining "vibe coding" as using AI-generated prompts to build WordPress plugins with minimal traditional coding background. It shows how to ideate a plugin for embedding YouTube videos via ChatGPT 4.5, create quick testable snippets with a code snippets plugin, and then expand this into a modular, multi-file WordPress plugin with improved UI and features using Claude Opus and Cursor IDE. Key steps include: - Creating a comprehensive prompt outline for AI to follow WordPress coding best practices. - Testing initial plugin code in a lightweight environment (snippets plugin). - Setting up local WordPress development using WordPress Studio. - Using GitHub Desktop for version control and repository management. - Converting a single PHP file snippet into a traditional plugin with separate files, styling, and admin menu integration. - Iterating UI and functionality through AI-driven refactoring. - Handling errors and debugging within the AI-generated code. - Recognizing limitations of current AI tools for production-ready, secure, optimized plugins. - Reflecting on the future need for better developer tools that bridge React/JavaScript app ease with WordPress hosting environments. The presenter advises that while AI can speed up development and aid learning, users must critically review and understand the generated code. The approach suits experimentation and learning more than production deployment currently. ### 🗒️ Notes - [00:04 - Introduction and Context](https://www.youtube.com/watch?v=0IDiK1DBOtc&t=4) - Vibe coding = AI-powered rapid prototyping. - Presenter is a power user, not a seasoned developer. - Tools used: ChatGPT 4.5, Claude Opus, WordPress Studio, GitHub Desktop, Cursor IDE. - [02:15 - Plugin Idea and Planning](https://www.youtube.com/watch?v=0IDiK1DBOtc&t=135) - Embed and manage YouTube support videos inside WP dashboard. - Features: add videos, create galleries, manage videos. - Planning with AI: outlining admin menus, custom post types, data storage options. - [07:28 - Snippet Testing](https://www.youtube.com/watch?v=0IDiK1DBOtc&t=448) - Using WordPress snippets plugin for fast trial. - Paste single-file PHP snippet to quickly test plugin functionality. - Activate/deactivate easily without full packaging. - [09:39 - Expanding to Traditional Plugin](https://www.youtube.com/watch?v=0IDiK1DBOtc&t=579) - Using Cursor IDE to modularize code. - Add multiple files: CSS, JS, PHP includes. - Better structure for scalability and maintainability. - [13:36 - Version Control](https://www.youtube.com/watch?v=0IDiK1DBOtc&t=816) - Using GitHub Desktop for repo creation, commits, and pushes. - Enables tracking, branching, collaboration. - [15:43 - Demonstration of Plugin Features](https://www.youtube.com/watch?v=0IDiK1DBOtc&t=943) - Adding YouTube videos, creating galleries, deleting videos. - UI enhancements including previews of YouTube URLs. - Settings page for customization (pagination, embed sizes). - Encountering and resolving errors (e.g., failed streams). - [19:58 - Analyzing and Refactoring Codebase](https://www.youtube.com/watch?v=0IDiK1DBOtc&t=1198) - Understanding entire plugin codebase for WordPress standards. - Features: custom post types, admin dashboard, YouTube integration. - [22:24 - Learning Pathways in Plugin Development](https://www.youtube.com/watch?v=0IDiK1DBOtc&t=1344) - Conversational prompting to guide AI coding. - Importance of tracking and understanding code changes. - [26:22 - Publishing to GitHub](https://www.youtube.com/watch?v=0IDiK1DBOtc&t=1582) - Commit and push code changes. - Using version control as backup and collaboration tool. - [28:08 - Updating Plugin Metadata](https://www.youtube.com/watch?v=0IDiK1DBOtc&t=1688) - Editing author name in plugin file. - Syncing changes with GitHub and WordPress dashboard. - [32:09 - Summary of Development Process](https://www.youtube.com/watch?v=0IDiK1DBOtc&t=1929) - Plugin features preview and settings. - Local development with GitHub syncing. - [34:04 - Reflections on AI Tools and WordPress](https://www.youtube.com/watch?v=0IDiK1DBOtc&t=2044) - AI tool limitations on security and optimization. - Need for integrated AI dev environments for WordPress. ## 📖 References: - https://wordpress.org/support/article/plugins/ - https://developer.wordpress.org/plugins/ - Vibe Code WordPress Plugin Masterclass 🤯 (YouTube Video by Matt Maderas) ## 🗣️ Paraphrase: 1. Original: "I am just a power user of WordPress. I understand code, but I am not a developer by nature... this is just my way." Paraphrased: "Though I’m proficient in using WordPress and have some coding knowledge, I don’t consider myself a traditional developer. This approach reflects my personal method." 2. Original: "The biggest challenge with vibe coding is that code is always going to be different, which makes it a bit of a lottery when generating." Paraphrased: "One major difficulty with vibe coding is the inconsistency in AI-generated code, which often varies unpredictably, making outcomes somewhat random." ## 📰 Newsletter: 👩‍💻 **This Week in WordPress: AI Meets Plugin Development!** 🚀 Ever wondered how to build a WordPress plugin with zero heavy coding? Meet *vibe coding* — an experimental approach that combines AI tools like ChatGPT and Claude Opus with local dev environments such as WordPress Studio. Matt Maderas walks through creating a YouTube embed plugin that lives inside the WordPress dashboard, covering everything from ideation and snippet testing to modular plugin structure and GitHub version control. While AI can turbocharge your plugin creation journey, caution is key: review generated code carefully before deploying in production. This approach is a fantastic learning tool for WordPress advocates and developers wanting to push their limits without getting lost in boilerplate. Stay tuned as we watch the AI ecosystem evolve toward smarter, more secure WordPress development tools that could change the game for creators and agencies alike. 💡 For a deep dive, check out the full video here: [Vibe Code WordPress Plugin Masterclass](https://www.youtube.com/watch?v=0IDiK1DBOtc) ## ✅ Action Items: - Highlight this video as a teaching tool on how AI can aid rapid WordPress plugin prototyping. - Use the AI-assisted ideation and code modularization steps as examples in developer advocacy workshops. - Emphasize importance of code review and security when using AI-generated code, aligning with WordPress security standards. - Incorporate version control best practices demonstrated (GitHub Desktop) into onboarding materials. - Advocate for better AI-integrated WordPress development environments in OSPO disc - Summary: Build WordPress plugins in a sane vibe code approach! I'm using a combo of ChatGPT, Claude, Github, WordPress Studio, and Cursor to build a simple WordPress plugin. Let me know what you build in the comments. Chapters 00:00 Introduction to Vibe Coding 01:15 Setting Up the Development Environment 02:24 Ideating the Plugin with ChatGPT 06:53 Creating the Plugin with Claude 08:15 Testing the Plugin with Code Snippets 17:14 Enhancing the Plugin with Cursor 32:48 Final Thoughts and Recommendations 34:34 Conclusion and Call to Action WordPress news: https://thewpminute.com/ Subscribe to the newsletter: https://thewpminute.com/subscribe/ Donate to us or join the membership: https://thewpminute.com/support/ - URL: https://www.youtube.com/watch?v=0IDiK1DBOtc Oh, welcome back to the channel. Today we're talking about vibe coding. We're going to vibe code some WordPress plugins. I'm going to vibe code one WordPress plugin. We're going to talk about my approach to vibe coding. Lots here. Going to show you a bunch of different apps. This is just my way. I am just a power user of WordPress. I understand code, but I am not a developer by nature. And that'll be pretty obvious as we move about. Just some four warning throughout this. Number one, I'm gonna make a very simple WordPress app or plugin, sorry. I haven't even tested this out yet. This will be a first run. So, you know, depending on what AI does because it is a slot machine half the time of what you're going to get back, especially if you're just doing it from that vibe coding perspective. Uh, we'll see how things go throughout this video. You be the judge at the end of it. Number two, I wouldn't be shipping this in any kind of production setting. It's fine if you want to test these things out. I won't hold it against you if you want to vibe code your way to selling plugins and themes, if that's a thing in the WordPress ecosystem. I certainly wouldn't do it. I certainly wouldn't do it in any kind of um really critical client agency relationship. Let's dive into some of the things that we're using today. It's going to be a a bit of an amalgamation of things that we're putting together here. I'm going to start with idiating in chat GPT45. We're going to then jump to write a sample plugin using I don't know last week's favorite coding AI platform, Claude Opus 4. We're going to put that into our WordPress site. And we are running WordPress Studio from WordPress.com/automatic. I found this to be a great way to do local development for WordPress. I'm sure those of you who are much more developer oriented have your favorite local way of developing tools. This is what I'm using in this case. And then I'm also using GitHub desktop app to deploy our code changes as you'll see as we progress into a GitHub repo so that we can version control and track all of this stuff. So trying to show this in the most sane way of vibe coding. Your mileage may vary. Okay, here's the idea. Years ago, I built a plug-in called Easy Support videos. It's still available and I want to kind of recreate that experience. So, first I'm going to build out the idea with chat GPT 4.5. I like to create my outlines and at least some thought processes, you know, in a regular vanilla prompt first before I go and code it in anything else like cursor. And by the way, we are going to use cursor as well in this as we expand this into a full-fledged plug-in. Okay, ID8. I want to build a WordPress plugin that allows the WordPress admin to embed YouTube videos inside the WordPress dashboard. These videos should be placed on their own their own option or own admin page with a menu item in the WordPress admin menu as support videos. The user will have the ability to view these videos, add videos, and create galleries of topics for embedded YouTube videos. Help me outline this idea. that I can use in a prompt to build the code. Don't write code. Let's just think about best WordPress plug-in developer practices. Are you still with me? Let's hit enter and see what chat GPT4.5 does. Now remember I am going to jump to claude for no other reason other than just to demonstrate different tools available to us. I guess you could do everything inside of chat GPT 4045 or whatever you want to use or do it all in claude but I know that some folks are using free plans and you're being you know being able to lessen the impact of token usage. You can bounce between these these AI platforms. But hey, good news is you're still burning down the same rainforests to get this stuff developed, right? So there's that. So chat GPT45 is going ahead and outlining this for us. Admin menu integration. This all makes sense. Menu placement. Admin interface. Separate dedicated admin page for managing videos. Clearly structured sections. All videos. Add new video. Galleries allows user to create and manage galleries. Create topics to organize videos. We'll see how well that works. Core functionality. Embed YouTube videos. store embedded in a custom post type or database. Data storage option one use the WordPress custom post type for videos recommended for ease of use. Alternative custom database tables, user roles and permissions. Ensure appropriate capabilities, validation and security, sanitize text. I mean I think for the most part it's thinking everything logically. Admin interface must follow WordPress standards. Database interaction design of hooks documentation and support recommended file structure. Using this comprehensive outline as a prompt ensures the results resulting code adheres to WordPress best practices in and secure. So with most of this stuff uh I joked at the start of the video that it is a bit of a lottery as you ask things over and over again like we're getting different responses most of the time. You could build out this theoretically you could build this out into a chat GPT project and have instructions inside of your project and you could have a chatgpt project that is just for ideulating. I'm not going to do all of that overhead now, but that is something you could do. It's only as good as the prompt that you provide. But then also the other side of that coin is most of the time things are going to be generated differently. I don't know 99% of the time like code is always going to be different which is the biggest challenge with vibe coding. Okay, we have a solid base here. Let's go ahead and now ask it to create the prompt for us that we're going to use in claude. So now I'll ask now that I see the idea is can you create a complete prompt of this idea that I can post into claude which will write the code for me. Also mention that this is a single file plug-in solution. Don't recommend your complete file structure from above. So, one of the things I've found as I test out plug-in ideas super quick, like if you don't want to run WordPress local, which I showed you, if you don't want to use cursor and developing stuff, you know, using that as your IDE of choice and integrating with GitHub, etc. what you can do, especially if your idea is small, and I and I want to emphasize that, like if you have a small idea that you just want to experiment with, I would even say like this idea is kind of pushing the limits of what I would consider a small plugin or add-on for WordPress. I think you can be relatively safe to use something like we're going to use today in our local site, which is the snippets plugin and the code snippets plugin. I just search for code snippets plugin in in the repo and add it because how what I found as an easy way to test things is to just have a new snippet and we'll call this support videos. I can type v1. What I found is we can just paste a single file, a single PHP file which acts like a plugin right in the snippet plugin and then we can run that and just just for testing purposes. That's all it is. It's just to say like I don't want to package up a plugin. I don't want to run a local environment. I don't want to run cursor. I don't want to run GitHub. Just want to copy this code from claude or get chatgpt and just put it right into my WordPress site and just test it and see if it runs. Maybe the idea you have is just that. It's just a couple hundred lines of code. A snippet's fine. It works. You're starting to develop a full plugin. Maybe you can test it out in the beginning, but eventually you really need to break it out and make it a comprehensive plug-in. So, let's go ahead and take a look at what chat GPT did. It gave us this whole outline here. I don't particularly love it because it's not really recommending. Okay. Right here, a single file WordPress admin plugin allowing admins to embed organize. Okay, let's go. Let's run with it. So, let's copy all of this and bring this into Claude. Now, I have Opus 4 selected because allegedly last week, maybe not today, it's the best performing coding AI. So, let's go ahead and execute that. One of the nice things about Opus or Claude, as long as this thing doesn't break and run out of a context window, is that it should do its artifact thing on the right hand side. And you can see the code being built as we go as it's you know executing here. So let's just think about this thing logically. It does look like the standard what I call header of a plug-in file. This is something that will declare all the important meta information inside of WordPress dashboard. Obviously plug-in name, who's making it, version number, website, you know, these are this is like the fundamentals of what's needed for a plugin, of course, then all the corresponding code below that. But for the uninitiated, this is what it normally looks like. And this is how you would kind of show up in the WordPress plug-in repo and what it would look like in the dashboard. And I'm wanting to illustrate that picture because if you're out there and you want to make your own WordPress plugins, why not? Maybe this is a way to go about it or at least learn how to do it. I wouldn't ship any of this thing in production. I don't want any of my developer friends knocking on my door or leaving me bad YouTube comments. I already get that enough from the public. Okay, so code is being executed. It's being written. Looks like we're on the frontend styling of it right now because I see some HTM I see some HTML and some CSS classes. So I think the logic has maybe already been created or not. I don't know. I'm not a developer. This is going to continue here. What I might do is just skip ahead when this is done. Okay, it looks like it's wrapping up. Don't know if this is something that is going to work just yet, but it's going to mention on the right hand on the lefth hand side here the plug-in structure, admin menu integration, support videos, admin interface, add new video, create new gallery, all videos, data storage, is going to be custom post type. There's a lot of stuff going on here, believe it or not. at the at the end of the day like all we want to do is embed support videos inside the WordPress dashboard. Maybe we can help our clients that way. Uh it tells us how how how we're going to use it. I want to So I'm going to copy this and just as a sidebar here and now I'm going to paste this into my snippets functions PHP. 476 lines of code. Not bad. But is it going to work? We don't know yet. So we can just go back down to the bottom, hit save changes, click on save changes and activate. But just one of the things I I do want to mention because I I see this question coming up and I think one of the things I'm really concerned about when it comes to coding for developing for WordPress in the future, especially in the context of AI is platforms. Replet, bolt, these are platforms I've covered before in the past. It's, you know, you're writing JavaScript script code, it's hosting it, you're seeing the preview right there. it's all-encompassing environment that's that excitement or that ease of use is uh not achievable in any kind of WordPress hosting right now. And I think that's one of the things that's actually going to slow down this excitement around WordPress unless well you're seeing it kind of solved today in today's video or unless WordPress.com or automatic comes up with something or another web host comes up with something. But I think what we see is this adoption to use Reactbased JavaScript apps because even if you're not a developer, as AI is developing it, you're seeing it being built. Whereas WordPress, we have to put it in. We have to make the code and then put it inside of WordPress and say, "Okay, plugin, turn on, activate, rinse, repeat." I mean, we're going to do that here. I'm going to show you how I do it, but I think that's a missing link when it comes to exciting AI development with WordPress. Save changes and activate. Let's see what happens. So, we're going to save changes and activate. I always like to just double check all snippets. And sometimes, like we can toggle this on and off. Um, I can turn that on. Sometimes if the code is failing with maybe like a critical failure, this plugin won't activate, but it did. And you can see right up here, we now have a support videos link. So, let's go ahead and click that or menu item. Let's go ahead and click that. All right. YouTube or excuse me, add new video title, YouTube URL or video ID and create new gallery. Let's just before we create a add a video, let's just say Matt's gallery. The gallery was created, but God knows where it went. So, there's no way of navigating it. Maybe once we put in Oh, right here. Select galleries, we can add the video there. All right, let's go ahead and grab a YouTube video. Let's go. youtube.com wpminute podcasts. Let's grab the new series that's running on WP Minute with Kurt and Toby and let's add this video here. So, we'll paste that in and we'll say Kurt and Toby. Add the video. There it is. Kurt and Toby. The video is there. So, it worked. We're executing against it fairly well so far. Matt's gallery. I don't know why that's like pulsating, but it must be some kind of hover effect. And Matt's gallery is really just a badge at this point, but that's okay. We can always iterate on that. So, let me just click out of it and then go back in because sometimes that's just saving in memory and not actually saving to a database. Let's go ahead and grab one more just so we can visualize this. So, let's copy when to delegate. when to delegate. Paste this in. We'll also select Matt's gallery one more time and add the video and see what happens. Now, now that there's two videos, I just want to see if I can click on Matt's gallery. I cannot. So, I can't filter it. That's okay. Let's test the delete functionality. Are you sure you want to delete this video? Okay, done. Now, at this point, you could say we're 17 minutes in with all of my rambling. You've now built a little plugin where if you wanted to make a screencast for the WordPress website you've just built your client and put it right inside of WordPress. That way they know how to use this site, you know, and you can put in other information here. You know, you essentially built it in 500 lines of code, little bit of ideating inside of chat GPT and then we brought that code over to Opus. Why? I don't know. Because the internet AI coders told me to. And now we've taken that code and pasted it into just a simple snippet. And that's it. Like it could just exist like like this. And you could paste this snippet in every WordPress website that you go about. But what we'll do next is sort of enhance this into a more featurerich a more sane WordPress plug-in through using cursor and now setting up more of a an efficient pipeline so that it's being developed in a more again a more sane fashion. Okay, so our snippet works. YouTube videos there. We're creating a gallery. We can delete a video. Let's add some more. Let's add other features to it, but let's build it in a more traditional plug-in first. Okay. What I like to do is use the GitHub desktop app to uh sync my files and and do version control to GitHub through this app. I know it's built into cursor. I know you can do that, but I've always had I don't know. It just failed a lot. It was just clunky for whatever reason. I don't I don't know. I just like using the desktop app. It's just like that extra step that makes me feel like it's working. And that's what I do. So, first thing I'll do is create a new repository on my local drive. And I'm choosing the plug-in directory inside of the local WordPress site that's running thanks to WordPress Studio or WordPress.com Studio. So, if you take a look at the local path here, it's user/mat projects/vibite2. And I am going to go into the WP content folder and then the plug-in folder. And I'm going to say open to here. And we'll call this support videos. I'll leave the description blank. And we'll create the repo. And what that's going to do is actually create the folder support videos inside of inside of the plug-in folder. So that way if we show in Finder, you can see plugins and then support videos. If you create the folder support videos first, then it'll create another support videos folder inside of that. And we don't want to do that, right? So now this is ready to start syncing up to GitHub, right? When we start to deploy this data, right? this data. So what I'll do is I'll go into cursor and I'll create a new file. Again, all of this is at your own a discretion. Actually, let me just open the folder first. This is just the way that I do it. Doesn't mean that it's the right way. Doesn't mean it's the way that that you should be doing it. It's just how I do it. So I'm going to create a new file called support videos. plugin.php and I'm going to go to my snippet. And remember, we prefaced our claude prompt to create this as a single file because we're using it in the snippet plugin. But now we're going to enhance this and turn this into a traditional plugin. So I've pasted the entire file here into this PHP file support videos plugin. And I like to just have conversations. I feel like it jogs the memory of cursor. We're downgrading the experience to sonnet. In this case, I don't have a max account. I have just whatever their pro account is. So theoretically, we're downgrading our intelligence is how I see it to Claude 4 sonnet or if you have a Max account, then it'll work. Or you can pick any of these other models to to code against. But what I'll say is I've pasted my entire plug-in code here. Can you analyze the code base and understand what it does? So I like to have that initial conversation first just to make sure it sees the file, it understands the codebase and it can tell me like with just analyzing it that it understands what we're trying to achieve here. So this might take a moment and then we'll come back. Okay, it's coming back with how it understands this codebase. And as I just see it coming down the stream here, I see plug-in overview, custom post type, support videos, admin dashboard, create gallery section, YouTube integration. I'm not going to read this line for line in this video, but it looks like everything is is going the right way. WordPress standards compliant code structure, responsive CSS, grid layout. Okay, so it kind of understands the code. Now I'll prompt it to turn this into a traditional plugin. And so I'll say, "Help me turn this into a traditional WordPress plugin, removing the single file plug-in approach and a more modular approach. Please consider WordPress plug-in development standards and to optimize our plug-in for scale and additional future features. This is the way that I prompt. I have these more, I don't know, human prompts. It's not directly some kind of like developer language. I know people are, you know, excelling at that. Really quick prompts or really deep, you know, guard rails to prompting, but I just like to have those conversations and sort of let it do its thing. So now I'll follow this, but these are some points where we might skip ahead. So it's going to start to make the folders that that are needed for traditional plugins. So I'll accept that in cursor as I mentioned I do have uh cursor I think it's pro plan whatever first step is you need to pay to get access to this fantastic but again I'm not a developer I haven't been lost in it too much everything is you know pretty straightforward if you are kind of familiar with code and using these other chat systems the learning curve isn't too steep unless you're just like brand new to WordPress develop velment and maybe development in general. The most important piece of advice here is to closely watch the code that it's changing. Try to understand why it's changing the code that it's changing. And when I started learning a little bit of JavaScript, I would also have it go back and make sure that it was documenting all like the components and API paths it was creating because you're learning, right? And above all else, like that's the big thing. Like everyone's excited because they can build stuff with Vibe Coding and all these other platforms. And you know, I'm right there with you. But I'm looking at it much more so as well, I don't know what the future holds. Like I don't know how good these things really are at writing code, but can I learn along the way? Can I understand in this case WordPress plug-in development or JavaScript development? you know, and these things are at least helping me understand that. Okay, so it's building out all the necessary PHP, JavaScript, and front-end styling stuff. On the lefth hand side, we can see the folders being created that's housing some or soon to house some CSS and JavaScript included PHP files, so on and so forth. We'll jump ahead and then we'll come back to when cursor finishes. Okay, it is finally finishing up the entirety of our code refactoring. This took this took about 5 minutes for it to finish and it has added a considerable amount of code to our original concept which was roughly five four to 500ish lines of code in our snippet and now is pushing three over 3,000 lines of code here. It created a readme file of course and probably some documentation. Number one thing to do is always hit accept all. So now we have accepted all of the changes. The readme file is fantastic by the way. Explains absolutely well almost absolutely everything which is great. I can almost guarantee this is it would be on my experience a quite a godsend if this is going to work right out of the box h having it refactor so much of the plugin. But I'd be pleasantly surprised if it does work, which you know ends up the whole rabbit hole of vibe coding where you just start prompting your way to trying to fix things, especially if you don't know how to code things. But before we take a look at that, what I want to make sure that I stress is with the GitHub app now, we see all of the changes that that has been made, all the files, all of the code. And what I'm going to do is say initial version just to keep this Easy. And this is our first complete commit. And I'm going to commit these 10 files to the main branch. Okay. Publish repository. The name is support videos. And repository name already exists. Sorry, because I had that was testing before. So I'll do v2. Publish that repository. So now this is going to take all of our code changes, ship it up to GitHub. So we're already ready for if we click on view GitHub, here it is right here. This is all the code. Here's the readme file we just looked at. PHP 70%, JavaScript 17%, CSS 12%. If you're not a developer and this is the first time you walk through this, it feels kind of nice to like have a complete plugin. And if you've just been on the sidelines like I have for years to be like, I wish I could make a plug-in, put it on GitHub, get other people to, you know, commit and contribute and I could ship it out. We're, you know, we're feeling pretty good, right? This is just a private repo for now. But all the code is there. And as we progress with making our changes, you can create other branches. So you can have test branches and experiment branches and new feature branches can merge that into main. This is what is going to allow you to develop these things with what I'll call for the novice a backup plan. It's not a the a true backup, but when you're version control, you can track these changes. You can write your documentation around it like what you were trying to test with a particular feature. It's just a very sane way to do it. And especially if you want to bring this to a developer to help you get this over the finish line in your primary business, this Yeah, you're going to need to do this. Okay. All right. So, cursor is done. I've hit accept. Let's go into our WordPress website. Now, remember, we're going to disable the snippet. And when we do that, our support videos link will go away once I refresh. So, you don't see it there anymore. So, our snippet is no longer running. And here is our support videos embed embed, view, and organize YouTube videos directly within the WordPress dashboard. Your name, visit plug-in site. And if I just bounce back over to cursor and we go to the support videos PHP file, I can change your name just so you can see. Hey, here's some coding that I can do. I can replace this and I can say Matt Maderas. We'll save that. Command S to save. And then I will also go to GitHub. And you'll see right here, look, author name went from your name to Matt Maderas. very simple view just for those of you who have never seen GitHub before and you can see that's what I'm removing this is what I'm adding my update message would be updating author name brought to you by me and we'll commit that now our our change has been tracked and committed we'll go back to our WordPress site refresh this there's no way I broke that by changing my name and now it says by Matt Maderas. Perfect. Let's activate it. Fingers crossed. Okay. So, I activate it. Activated it. Nothing broke. I see support videos up here like we saw before. Now, when I hover over it, I have all videos, add new video, galleries, and settings. Like I said, we went from 500ish lines of code to 3,000 plus lines of code and a lot more options. Let's go to all videos. and actually use the same database as our previous snippet because here's the video of Matt's gallery and also use Matt's gallery gallery name which was also saved allegedly in the database. We have this new video counter gallery counter which I never ask for a little drop down so that we can filter things. Pretty cool. So like I said little bit of a slot machine when you roll with vibe coding. I didn't ask for any of these features. Vibe coding did it which can be fun sometimes and scary at other times. Let me just see what happens when I delete this video. Browser prompt or browser dialogue prompt. I don't really love that. So, we would fix that. But the UI has been enhanced dramatically compared to our last sort of like one file version. And let's just see what's in the settings. Okay, right here. So, if we go into the settings, this is where we see we have some issues with these files here. failed to open stream. I'm not going to try to patch this in this video because I think we've already demonstrated our logical path of vibe coding, but I would literally take this here, copy it, go into cursor, and say when accessing our settings page, I receive this error. And I would paste that error in if it was something that I had no idea, which in this case I don't know. I never asked it to create a settings page. So it might have been guessing at like what settings we'd want. So I paste that in. It's doing its thing, thinking of the settings page. But now if I go and I grab one of our videos again, again, the new series on WP Minute Plus. Please go and watch or listen to that. Let's go and add a new video. and it's not going to work because it is probably figuring things out and writing code right now. So, let's just give that a second and we'll pop back in once that's done. Okay, so it finally finished. It added a bunch of code, modified a bunch of code, came back and gave me all the things that it did. Apparently, there was a lot of pages missing. I can now add my first video, which is great. The interface still looks pretty good. There's a lot of form fields here. I'd like to see a little bit better organization, but that's all the stuff that we can go back in and vibe code. It added a bunch of helpful stuff down here. If I paste in the YouTube URL, it immediately shows me the preview there. That's really cool. And now that settings page that I was trying to access before allows us to adjust how many pages or excuse me, how many videos are on a page, what that embed size is, which is pretty cool. Data management. really kind of thought forward thinking on that. It's a big thing with WordPress plugins. Yeah, plug-in information kind of cool. Systems requirements kind of cool. Export data, import data. It's already thinking about those features. I would say these things probably don't work, but we're not going to test that on today's video. So, now you can at least see the steps to how I approach the vibe coding with WordPress. Let me recap it one more time here at the end. I idiate on chat GPT45. I built it a single page example that we could use as a snippet with claude 4 just to show you of using two different sets of tokens. We have connected up GitHub to a local WordPress environment. So we're running WordPress locally. We're not hosting it anywhere. We're developing our plug-in locally. And all of this stuff is being synced up to GitHub. So we have a more sane development environment. And then when I was ready to build this into a fully functional plugin, something that was it's a lot more robust than our first version, I brought it into cursor, which allowed me to expand upon it more and, you know, vibe code some of these other additional features. The caveat one more time, would I ship this publicly only if somebody really wanted to use it and they knew that I use AI to code it? Would I use it on my own sites? Maybe if it was something that I was really wanting to use for me or my clients, I wouldn't be, you know, pawning this off as I am a WordPress engineer, unless these tools get a lot better and can really start to hone in on the security and the optimization side of development. And that's either WordPress or if you're making JavaScript apps with like Bolt or Replet. Like there's just a lot of stuff on the back end that if you're not a developer, you don't know how to sustain or maintain these things until agents come out that are actually doing that for you on these services. I don't know when that's going to be. Hopefully I'm still here when that happens. youtube.com/thewpmin the podcast. Search for the WP Minute in your favorite podcast app. Definitely check out if you're a WordPress agency and you want to talk about agency life. got a whole new series on the WP Minute podcast YouTube channel as well, so check that out. Hosted by Kurt Vonin and Toby Kines. Let me know in the comments below what you thought about today's tutorial. This was a long one. It's good to be back and talking about WordPress again. Thumbs up if you like the video. Subscribe to the channel if you want more. I will see you in the next one., Vibe Code WordPress Plugin Masterclass 🤯, WP Minute Tutorials, 01jwer8jf40q2cbs9zc5eqs9cj.