Transcription
Whoa, that is actually kind of I wasn't expecting this. That's dope.
All right, in my last video, we connected Cloud Code to WordPress. And now in this video, let's take a look at what we could actually do with it. What kind of powers can we unlock? Things like building plugins or creating our own custom abilities and much more. Basically, we are going to experiment because I do believe this is the direction we are going in with WordPress inside of the new AI era.
Here's a tool we could use to unlock a lot of these powers. This is a free MCP by the Dynamic O team called Novameir. And what makes this powerful is that it allows AI like Cloud Code to run and execute PHP and WordPress. And it gives the ability to read and write files.
Now, let's take a look at how this works really quickly so that way it makes sense as we are using it. First, we have WordPress abilities. There is an abilities API that WordPress created and it was created for AI agents like cloud code. This way it could understand and work inside of a WordPress website. WordPress also created the MCP adapter and this acts like a bridge that connects the AI agent like cloud code to our WordPress abilities.
Now by default our abilities are read only. That means it could just get information. And this is where an MCP like Novamera really shines and unlocks a lot of these powers because it adds additional abilities like execute PHP. So if we go back over here, we could see a lot of the examples that they give something like build a cache a purge tool or a plugin which I am going to do in this video. But also this is where the power really shines. We could build custom MCP abilities to add on top of this.
And what I'm going to do in this video is create a custom MCP ability built specifically for Elementor's V4 atomic editor. And this is going to be for Cloud Code to do more updates and add-ons to Elementors V4. And all this is experimental, by the way. We're just having fun and exploring exactly what we could do. So please be responsible. Use this on a testing website.
After you have installed Nova, you're going to see this option over here. And from here, you go ahead and create new application password. And then we have our different options to install the MCP client. You could go ahead and copy and paste this and put it inside of your terminal. You could use claw desktop, cursor, VS Code. If this is your first time setting something like this up or using claw code inside of your WordPress website, check out the video I put out earlier this week. That one's going to walk you through the step-by-step process in more detail, setting up the MCP, adding WordPress skills, and then getting Claude Code connected. In this video, we're just going to jump into Cloud Code and start building stuff.
Now, once you do have your MCP connected, go and ask Cloud Code. Make sure it is connected. I always ask it to check for the MD file, the MCP. I do use Notion because I like to connect that as well. And then our skills, and it shows everything is connected.
Now I want to make sure it could work. I am going to add this prompt to deactivate the light speeded cache plugin. Delete it. Clean up any leftover files. So the plugin is basically a clean install. Let's go ahead and run it.
Okay, Claude is done. You can see all of the work that it did. It cleaned up all the leftover files. Let's go ahead and refresh it. And we can see our website is still alive. No light speed. Nice.
Now we're going to be creating a plugin called the light cleaner. This is basically going to be very similar to WP Rocket WordPress optimization plugin. So I got my prompts ready there and I just work with Claude to get these prompts structured correctly. Then we are going to create an ability. Now this is going to add to the MCP abilities where we are going to have Claude explore and get to know Elementor v4 codebase. And the goal is to create this ability that allows us to better make updates to the new version of Elementor. you know, the atomic elements, components, and all of that. And then in the very end, we are going to do some regular website cleanup.
So, let's get this out of the way. Let's put in our next prompt. And this one is going to be getting started with the lightbox cleaner. Let's set that. And now, as Claude is working on it, I'll show you what we did. All we did was ask it to create a performance optimization plugin. We want to, you know, give it a name. Then I set the foundation. I want this lightweight, secure, modular. I want to build to scale. This way we could add features over time. We want to start off with one feature and that feature is a one-click clear cache button in the WordPress admin bar and a dedicated dashboard. I also asked it to use the front-end design skill as well. This way hopefully it comes out looking better.
This time it asked me to take a look at the structure. So it has the plan. And by the way, we are using the bypass permissions. We wouldn't do this if we are working on, let's say, a real project. This is just so that way it doesn't keep asking us questions. Plan mode is probably best, but still it caught something enough for us to feel like it needs our feedback. So, let's go ahead and say yes. And it's done. Took a little over 5 minutes. It shows everything that was done, but we're going to take a look at the results.
First, it is saying it's not activated. I'm going to say no. I'll activate it. Okay. And now let's take a look at this in real time together. So I did not see this yet. We are going to see the results for everything together for the very first time. So nothing is staged. I just want to get like a real I guess experience into all this. Here we go. The light cleaner. Let's activate it. I don't know why I feel like a white screen of death is always going to come up after doing it, but it doesn't. Okay. We can see the light cleaner here in the side. Okay. Dope. What else does it have? I guess that's it. We have the clear cash up over here. I probably will want to change that and rebrand it, but let's take a look at what we got.
Whoa, that is actually kind of I wasn't expecting this. That's dope. All right. Okay. So, clear all cash. Okay. And it shows what's been cleared. We got our transients. Look at that. They even got coming soon here. Planning for more. And look at this. Built by lightbox. Yes, it is built by lightbox. I did uh one prompt and built it.
Okay, now let's go ahead and add in our second prompt. And what we're doing here now is building on top of it. So at first I asked it to build a solid foundation and I wanted to keep it modular. This way we could add additional features on top of it. We're going to put the database cleaner orphan file scanner clear transient. So let's see now what it does. Okay. And it built one module and looks like it's going one module at a time. Let's go back, refresh it, and we can see now this is active. Let's go and build the next module. And now it is all done. All the modules that I wanted it to build have been completed. That took about 15 minutes, and it did go on for a while, but that's because it was working through bugs on its own. You can see it was using the MCP the whole time. But let's take a look at the final results.
Here we go. Let's refresh it and check that out. Okay. So, it looks like we could toggle on each of these and we have control over what we are going to clear. Let's clear all. Okay. We could see. Wow. Okay. Dope. I mean, this is a great start.
Now, this is fun and all, but the responsible thing to do always is to get a developer involved, especially if you're going to share a plugin or sell a plugin or put this on a client website. But this is all possible because of the MCP. Without the MCP, clock code would be on the outside looking in. It would be like walking through without any lights, blindfolded, stumbling around. With the MCP, we're able to do stuff like this.
Now, let's move on to something much bigger. This is small play compared to what we are about to do. In this one, we are going to create a new abilities. I want to start to use Cloud Code inside of the V4 editor inside of Elementor. So I am going to ask claw code to create a new ability. I wanted to scan the code base for the v4 version of elementor. I wanted to map out everything and then create that ability that could be reused across projects and something that we could work on. And already we could see it's mapping element v4 atomic elements. It is mapping the class manager system, the variable token system. I'm excited for this one. This is the one I've been looking forward to. And once this finishes, I want to test it. I am going to have Claude build a duplicate class option inside of the actual editor.
All righty. We could see. Look at that. It completed it. It now has the V4 atomic system mapped out. This is what I wanted. This is just going to open up a lot of possibilities. And there it goes. That took about a good 10 minutes, but this is big right here. It is saying it is stored inside of the sandbox. So, let's go back over here. We're going to go to Nova Mirror to the sandbox and we can see it here. So, if we want it disabled or deleted, we can. But check this out. I have something else in mind because I want to reuse this on other sites. So, here's a prompt where I could turn this into a plugin and I could use it across different sites. Let's go ahead and do that. And there we go. It shows that the plugin was created. That only took about a minute and a half. was not bad. Let's go over to our plugins. We do have our plugin right here. Let's put it to work.
I want to add a new function into the V4 editor. Go to the class manager. What I want to do is create an option where we click on these three dots to duplicate this class. That would save so much time. And I don't know why it wasn't built into the V4 editor, but it wasn't. When you set this up and you're going to create a bunch of header classes or a bunch of body text classes, it just makes so much more sense to duplicate it, make some changes to the name, make some changes to the token values, and that's it. Instead of having to go through the process of creating everything on its own. So, I do have a prompt ready. And I actually just wrote this prompt out while I was waiting for this other work to go. While I was building a plugin, I was creating a prompt for my next feature. That's how all this works. But this basically is asking to add an option for duplicate class in the atomic elements. That way when it works in the class manager in the V4 editor, we can click on the dots on the right of the class. And above the delete option, add a duplicate class that duplicates the class and all the token styles attached to it with a dash one. Just giving it some clear specific directions. We're going to see can it handle it in the very first attempt.
Oh no, we hit our limit. Okay, I am going to have to upgrade to the max. By the way, this was all on the pro plan for 20 bucks. Looks like I got to upgrade to max. I'll be right back.
Okay, we are back in action. So, I upgraded. Let's see now if it was worth it. And there we go. That took about 7 minutes. So, let's see if this works. And to be quite honest with you, I am not expecting this to work after one prompt. I would be very surprised if it did.
Okay, nothing there. Let's go ahead and refresh this and then we'll go into our class manager and fingers crossed. I guess it's kind of like uh yeah, it's really hard to say when doing this. Okay, let's see. Got it. Click on it. Duplicate. Okay, so it does something a bit weird refreshing. I don't like that. Like I said, I did not expect this to work the very first time out of the box. So, we do got the duplicate class and it did follow my instructions. I just didn't like the way it refreshed it. That's is that's the part where we got to go back and forth with. But let's find out if this actually works. I want to see if it really works. Let's put in this new one right here. We're going to rename this header medium. And look at that. It did carry the style. So, it did work. This just saved us a lot of time. This is already ready right there. I could just go in now and put in my header medium variable. Create that. And we'll make this one, let's say, 2.75 rim. And now we just created a new class. We duplicated it. I could remove this. And I could choose the large medium. Well, I am going to have fun with this. We just made the V4 editor a little bit better.
Now, creating plugins, adding additional functions to Elementor's V4 editor. These are quite big. But what about something a little bit more practical? Back here in my blog post, these are all just really bad blog posts created with Faker Press. It just gives me something to work with inside of my loop grids. I'm going to have Claude delete all of this and rebuild it using Goodenberg blocks. That's just going to look a lot better.
So, here is my prompt. It's quite simple. We are going to have it to clean up all the blogs and replace all the fake posts with three new real blog posts. And there we go. That took about 10 seconds. That was a very easy one. Let's refresh it. Okay, no blog post. And now it is going to write the new three post. Let's let it do its thing. And there we go. It created all three of them. They're not published. They're waiting for our review. Okay, here's our draft. That's a very long title. Very AI like. Ooh. So yeah, it put these weird tables. I don't like tables. It is using Goodutenberg at least. I'm going to publish it. Let's just go and check it out for kicks and giggles. And check that out. We got a blog post. This is content ready to go. I mean, I would definitely rewrite it, but it's a good starting off point.
And just one more very practical use case. We have this homepage here. Built it out. Use a lot of fake text, a lot of Lauram Ipsum. If we go through it, you can see duplicate copy. We can see even in here we have duplicate images. Let's have Claude go through this entire page, write all of the content, change all of the images, and make this page 100% ready to go. And that is exactly what this prompt is going to ask it to do. And that took about 10 minutes. It went back and forth on a lot of things. Let's see now if it works. We're going to do a refresh and okay, it didn't break. I do have to say though, the first time I was doing this, it broke several times. The CSS wouldn't load and that's when I created my Elementor skill because it was something in the way of the database where Elementor data just the way it was stored. It wasn't coming out right after it was being edited. So, if it does break on you, that could be the reason. But, let's take a look at what we got. The content is all updated now. I feel like it's too much content, but it's okay. I could have been a little bit more specific about the amount of content, but we can see it's getting all the content. I don't see any dummy text. Let's take a look at the images. Okay, it did not fix the images. So, it didn't get it right the first time. I wanted to show this in real time. I want to show a real experience because a lot of AI videos out there will show you these magic tricks of something wonderfully happening. This is a process. It takes time to get used to it. I've been working on the Claude MD file now. Getting more clear on what to do, what not to do, working on adding additional skills like what I did with my elementary skill to prevent breaks when making these changes. And you know, when it doesn't work, we just go back and say the images didn't change. And now we just go back with Claude. Let's see what happened. So, okay, this is because of my instructions. Let me see. I'm going to give a new instructions. And there we go. That should have gotten it. Do a quick hard refresh. Let's go check it out. And yes, we got the images changed.
I would love to hear your ideas because the more ideas we share, the more possibilities we could see using tools and workflows like this. And if you want to learn more stuff like this and definitely do that good YouTube stuff, you know the deal. Like and subscribe. It is much appreciated. Thank you for watching. I'll see you in the next one.