WEBVTT

00:00:00.000 --> 00:00:26.195
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 gonna do is we're gonna go to a website called Novamir. Now, there is a link in the video description to this website. It's a free plugin. It does not cost you anything whatsoever.

00:00:26.515 --> 00:00:48.665
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 websites. 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,

00:00:49.145 --> 00:00:52.025
and you will upload that plugin. So upload file,

00:00:52.265 --> 00:00:57.385
choose the file, and then you will select the NovaMira plugin. Here we go. NovaMira.

00:00:57.545 --> 00:00:57.785
Okay.

00:00:58.390 --> 00:01:00.310
And then you'll click on install now.

00:01:01.190 --> 00:01:24.285
Now, one thing I also wanna mention, you know, this is gonna, you know, cause some tension in the comments, but I think cloud 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 another story. Anyways, so here you'll see that NovaMirror is installed, and once you install it on the top left right here, you'll see the NovaMirror tab. Just go ahead and click on configuration.

00:01:25.245 --> 00:01:25.885
Okay?

00:01:26.445 --> 00:01:31.980
Now, the first thing that you want to do is make sure that you check turn on AI abilities, and click on save settings.

00:01:32.140 --> 00:01:35.340
And then here, I'll click on generate application password.

00:01:35.900 --> 00:01:48.185
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 gonna do it the right way. Now, here at the bottom, you're gonna see this link that says, need adjacent configuration.

00:01:48.345 --> 00:01:52.265
We're gonna click on this, and then you're gonna see you have an option for all these different

00:01:53.145 --> 00:02:10.890
operating systems or programs or whatever. You're gonna click on Claude desktop. Okay? And then you're gonna 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 gonna tell you Mac OS, and then also here, it's gonna say Windows.

00:02:11.325 --> 00:02:17.805
But anyways, all you have to do is go over to your cloud application. So you'll open this, and then you're gonna go to your settings tab.

00:02:17.965 --> 00:02:19.885
So up here, settings,

00:02:20.685 --> 00:02:23.005
and then you'll click on the developer,

00:02:23.325 --> 00:02:24.845
and then you'll see edit config.

00:02:25.260 --> 00:02:29.180
Now, if you're using Mac, it might say claud config

00:02:29.980 --> 00:02:33.580
dot json. Okay. It might say that. So you'll just click on the JSON file.

00:02:33.980 --> 00:02:40.755
Okay. And then you're gonna take this, and then delete it, and then just paste that in. Just like that. And that's all you gotta do.

00:02:41.155 --> 00:02:56.280
Next, I'll go to file, and you wanna make sure you select save. If you click save as, it's gonna 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 wanna overwrite it. Once that's done, we can close this window,

00:02:56.920 --> 00:02:57.800
close this,

00:02:58.040 --> 00:03:04.120
and we need to now close Claude because you're gonna see it's not connected. So we just have to close Claude and reopen it.

00:03:04.520 --> 00:03:04.920
Alright.

00:03:05.905 --> 00:03:10.465
Okay. And then to confirm it's connected, I'll go over here to the settings tab.

00:03:11.025 --> 00:03:20.440
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 chats. And if I click on the plus icon,

00:03:20.600 --> 00:03:22.920
you are going to see under the connectors,

00:03:23.080 --> 00:03:25.000
NovaMira is now connected.

00:03:25.560 --> 00:03:34.605
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?

00:03:34.925 --> 00:03:42.125
Alright. 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?

00:03:42.365 --> 00:03:45.170
Create a page called YouTube.

00:03:45.810 --> 00:03:47.890
Alright. I don't know. Something really basic.

00:03:48.370 --> 00:03:52.370
Alright. Done. Now it's created. So we can go over here to pages.

00:03:52.930 --> 00:04:25.050
Click on all pages, and there is my YouTube page. Pretty cool. Now, wanna 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, uh, you know, that we can do. Now, I wanted to make a full on website like these, uh, pages that you saw right here. Something really vibrant, something really complex, and something that's, you know, we need AI for. So what I wanna do now is I wanted to use the Elementor page builder. But before I do that, want to actually adjust some settings. Now, is optional. So you can use your own page builder if if you use, uh, Gutenberg,

00:04:26.515 --> 00:04:39.155
you can use that. If you're using, uh, 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 wanna use this. So I'm gonna click on deactivates,

00:04:39.155 --> 00:04:41.635
and I do not wanna use the atomic editor.

00:04:42.035 --> 00:04:49.580
So I'm gonna go ahead and deactivate that. Also, one other important thing to do is under features, you do wanna make sure container is active.

00:04:49.900 --> 00:04:53.340
My experience is that, uh, if you have it at default,

00:04:53.580 --> 00:04:56.815
sometimes it'll actually create the website with intersections,

00:04:56.815 --> 00:05:15.830
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 an award dog grooming website with vibrant colors for the page YouTube, the one that we just created. Use elements containers and not the atomic elements. Now, probably don't need to put that because we've already disabled that. Right?

00:05:16.310 --> 00:05:19.270
Be creative and make the design high fidelity.

00:05:19.430 --> 00:05:25.365
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.

00:05:25.845 --> 00:05:29.445
And it's done. So you'll see it created all these sections.

00:05:29.765 --> 00:05:40.570
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 of why you want to do that. So here, I'll go ahead and open up this link.

00:05:42.810 --> 00:05:49.975
Okay. And here is my website. It's pretty cool, pretty basic, you know, but, uh, hey, it's a good looking website.

00:05:50.215 --> 00:05:53.415
Now I'll go over here, and I will click on edit with Elementor,

00:05:53.575 --> 00:05:59.815
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

00:06:00.215 --> 00:06:27.065
for the button as well. Whoops. I don't what that's about. But, anyways, just clicking on everything, you're gonna see that in most cases, you'll see right here, it uses the HTML code. But in a 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 gonna see they use pretty much HTML for everything. So if you don't instruct it to use the Elementor elements, it's just gonna use HTML for everything. Now, technically,

00:06:27.640 --> 00:06:33.320
this still is a website, but it's like not the right way. You're gonna see this entire section was built HTML,

00:06:33.560 --> 00:06:48.215
and it doesn't really utilize the elements. So when using Clot, just make sure to instruct it to use actual, um, you know, to use the elements so you don't get a bunch of HTML widgets and stuff like that. Now for those of you who want to try NovaMirror Pro, there is a pro version for this plugin.

00:06:48.375 --> 00:06:55.090
And what NovaMirror does is the pro version actually teaches Claude about the elements and it gives it more of a creative design process.

00:06:55.330 --> 00:06:59.330
For example, I have this website right here and this was created with the Pro version.

00:06:59.890 --> 00:07:03.730
So you can see that, uh, there are some small things you have to fix,

00:07:04.130 --> 00:07:09.650
but, uh, overall, I do like the design of this. I think it's pretty good, you know, for a a one prompt, uh, websites.

00:07:10.075 --> 00:07:14.555
Here you can see that we have to use a flex box. No big deal. We just have to align it to the right.

00:07:14.955 --> 00:07:19.675
Uh, here we have this other section. Scrolling down, we have this, uh, testimonial.

00:07:19.755 --> 00:07:24.190
Here we have a really nice call to action, and then we have like a small footer here at the bottom.

00:07:24.430 --> 00:07:31.710
Now I'll show you exactly what I typed in to get this. So over here, I just typed in, I wanna create a modern design agency websites,

00:07:31.790 --> 00:07:42.965
and it 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 improve the design process. Now, Novomir Pro costs about $49

00:07:43.125 --> 00:07:44.725
I'm sorry, €49.

00:07:44.885 --> 00:07:47.605
I never really buy things in euros, but, uh, yeah, €49,

00:07:47.605 --> 00:07:52.245
and that's good for three websites. And for a thousand websites, it's €99.

00:07:52.245 --> 00:08:07.270
So I think that's probably your best value. So if you do wanna 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 gonna be very interesting.

00:08:07.590 --> 00:08:12.795
As time goes on, I'm slowly starting to lean towards the AI side saying AI can actually

00:08:13.115 --> 00:08:18.475
use, like, WordPress much better than users can. And now that Cloud can use page builders,

00:08:18.875 --> 00:08:24.155
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.