Install the Novamira WordPress Plugin
I made these websites with Claude with just one simple prompt, and guess what? You can, too. You can use Claude to create blog posts, adjust code snippets, and do anything you want right inside of WordPress.
So, in this tutorial, I'll walk you through exactly how to connect Claude to your WordPress website. It's actually really easy, so let's get into it.
Now, the very first thing that we're going to do is we're going to go to a website called Novamira. Now, there is a link in the video description to this website. It's a free plugin. It does not cost you anything whatsoever. Now, once you get to this page, you'll click on download for free. What this will do is this will actually integrate an AI agent onto your WordPress website. Now, I've used many different methods. I've used the browser. I've used terminal, and this method by far is the easiest way to go. Trust me. Trust me. I have I have licked the pot clean.
And then you'll go over to plugins and click on add a plugin. And you will upload that plugin. So, upload file, choose the file, and then you will select the Novamira plugin. Here we go. Novamira. Okay. And then you'll click on install now.
Now, one thing I also want to mention, you know, this is going to, you know, cause some tension in the comments, but I think Claude works 10 times better with desktop than it does with Mac. I used Mac before, and I just get so many errors. It doesn't work well, but that's a whole 'nother story. Anyways, so here you'll see that Novamira is installed, and once you install it on the top left right here, you'll see the Novamira tab. Just go ahead and click on configuration. Okay?
Now, the first thing that you want to do is make sure that you check turn on AI abilities and click on save settings. And then here, I'll click on generate application password.
Now, it's going to give us this application password, and it's just going to say, "Oh, yeah, just go ahead and connect your AI agent." This doesn't work too well, so we're going to do it the right way. Now, here at the bottom, you're going to see this link that says, "Need the JSON configuration." We're going to click on this, and then you're going to see you have an option for all these different uh operating systems or programs or whatever. You're going to click on Claude desktop, okay? And then you're going to copy this. Now, this works for Windows and Mac. I've tested it on both, so just follow the same exact process. In fact, right here, it's going to tell you Mac OS, and then also here it's going to say Windows.
But anyways, all you have to do is go over to your Claude application, so you'll open this, and then you're going to go to your settings tab. So, up here, settings. And then you'll click on the developer, and then you'll see edit config. Now, if you're using Mac, it might say Claude config uh dot JSON, okay? It might say that. So, you'll just click on the JSON file. Okay? And then you're going to take this, and then delete it, and then just paste that in, just like that. And that's all you got to do.
Next, I'll go to file, and you want to make sure you select save. If you click save as, it's going to create a duplicate file, and when Claude reloads, it's going to reload the old script. So, make sure that you just put save. You want to overwrite it. Once that's done, we can close this window. Close this, and we need to now close Claude, cuz you're going to see it's not connected. So, we just have to close Claude and reopen it.
Verify the Connection and Run a Basic Test
All right. Okay. And then, to confirm it's connected, I'll go over here to the settings tab, and under developer, you'll now see that this is connected, okay? Now, we can double-check this by going over to our chat, so I'll type in new chat, and if I click on the plus icon, you are going to see under the connectors, Nova Mira is now connected.
Now, here is the actual domain. So, let's go ahead and test this out, right? Let's go ahead and see how this works. So, I'll go over here, and I'll ask, "Are you connected to my website?" All right, cool. WordPress is hooked up, and now we can perform some tasks. So, let's just give it something really basic. You know, let's just create a basic page, right? Create a page called YouTube. All right, I don't know, something really basic. All right, done. Now, it's created, so we can go over here to pages. Click on all pages and there is my YouTube page. Pretty cool.
Now, I want to do something more complex, right? I mean, that's really simple. Any idiot can do that, right? So, let's give it something that's you know, that we can do. Now, I wanted to make a full-on website like these pages that you saw right here. Something really vibrant, something really complex, and something that's you know, we need AI for.
Generate an Elementor Website with a Detailed Prompt
So, what I want to do now is I wanted to use the Elementor page builder. But before I do that, I want to actually adjust some settings. Now, this is optional, so you can use your own page builder if you use Gutenberg, I mean, Gutenberg, you can use that. If you're using any sort of page builder, it can adapt to any page builder. But I want to disable the atomic editor, so I don't really want to use this. So, I'm going to click on deactivate, and I do not want to use the atomic editor. So, I'm going to go ahead and deactivate that.
Also, one other important thing to do is under features, you do want to make sure container is active. My experience is that if you have it at default, sometimes it'll actually create the website with inner sections, which is a very old model. So, I usually change the container to active.
And now that we've done that, so let's go ahead now and give it a command. Create a war dog grooming website with vibrant colors for the page YouTube, the one that we just created. Use Elementor containers and not the atomic elements. Now, I probably don't need to put that because we've already disabled that, right? Be creative and make the design high fidelity. So, I'm just essentially saying I want this to be really good, right? So, let's go ahead now and run this prompt and see what we get.
Reviewing the AI-Generated Site & Pro Tip
And it's done. So, you'll see it created all these sections. Now, what I did here was I actually instructed it to use the Elementor widget, so I added the video and I'll explain a little bit more why that you want to do that. So, here I'll go ahead and open up this link.
Okay, and here is my website. Pretty cool, pretty basic, you know, but uh hey, it's it's a good-looking website. Now, I'll go over here and I will click on edit with Elementor. And here's the website. Now, if I click on a section like the heading, you'll see it's actually utilizing the actual elements. Same thing here for the button as well. Whoops, I don't know what that was about. But anyways, just clicking on everything, you're going to see that in most cases, you'll see right here it uses the HTML code, but in the majority of instances, it'll use the Elementor elements.
Now, this was the website I generated before, but I forgot to actually say use the Elementor elements. And you're going to see they use pretty much HTML for everything. So, if you don't instruct it to use the Elementor elements, it's just going to use HTML for everything. Now, technically, this still is a website, but it's like not the right way. You're going to see this entire section was built with HTML, and it doesn't really utilize the elements. So, when using Claude, it just make sure to instruct it to use the actual um you know, to use the elements, so you don't get a bunch of HTML widgets and stuff like that.
Novamira Pro and the Future of AI Web Design
Now, for those of you who want to try Nova Mira Pro, there is a pro version for this plugin. And what Nova Mira does is the pro version actually teaches Claude about the element, and it gives it more of a creative design process. For example, I have this website right here, and this was created with the pro version. So, you can see that uh there are some small things you have to fix, but uh overall, I do like the design of this. I think it's pretty good, you know, for a a one prompt uh website. Here you can see that we have to use the flexbox, no big deal, we just have to align it to the right.
Uh here we have this other section. Scrolling down, we have this uh testimonial. Here we have a really nice call to action, and then we have like a small footer here at the bottom. Now, I'll show you exactly what I typed in to get this. So, over here, I just typed in I want to create a modern design agency websites, and I just gave it some really basic things. This wasn't too much, but just giving it a little bit, you can see it really drastically improved the design process.
Now, Nova Mira Pro costs about $49. I'm sorry, 49 Euros. I never really buy things in Euros, but uh yeah, 49 Euros and that's good for three websites and for 1,000 websites, it's 99 Euros. So, I think that's probably your best value. So, if you do want to try it out, uh you can. I'm not saying you have to, but uh it does help Claude kind of uh guide it with design process.
So, that is pretty much it. So, that is how you can connect Claude to WordPress. I think the future is going to be very interesting. As time goes on, I'm slowly starting to lean towards the AI side saying AI can actually use like WordPress much better than users can. And now that Claude can use page builders, well, I don't know what the future holds. So, we'll see what happens. My name is Daryl Wilson and I will see all of you party people later.
