Build a WordPress Website with Claude

This local coffee shop website plays a video as you scroll. Google PageSpeed Insights has it at 97 on mobile and the owner can change the menu, edit the hours, or create an event all on their own. I built the whole thing on WordPress with Claude Code. No page editor like Elementor, no templates, and anyone can make edits to it. If your local business sites still look like a standard template, stay with me. I'll give you the WordPress skill and every prompt that I used in order to make this site. Hey, my name is Sean. Welcome to AI Builds. Today we're going to build a local WordPress site for a demo coffee shop. It has a login for the owner where they can make their own edits for menu items, hours, events, no matter what it is, they can make their own edits, but they're still kind of locked out of the plugins, the themes, anything that can actually hurt the WordPress site. They When they login, they have a nice clean dashboard with access only to the items that we choose for them. Now, it's really fast. It's 97 on mobile and 100 on desktop through Google PageSpeed Insights. Again, there's no Elementor, there's no other builders. I'm going to give you all the skills I used, all the prompts, everything you need to be able to do this on your own. Let's jump in. All right, let's go over what you need for this build today, guys. You're going to need a pro Claude account. That's a $20 a month. It's in order to use Claude Code, you have to be on that tier. I'm on the $200 a month plan, but again, the $20 plan, guys, I promise you it's worth it. You will be able to build a ton of cool stuff and 20 bucks is is a life changer for sure. Next you're going to need a WordPress host. For this build, I'm using Hostinger. That's what I use for all my own sites. I probably use Hostinger for over 10 years for emails and hosting and basically I basically use them for everything for the last 10 years, but you can use Bluehost or whatever you want to use. Just in this tutorial, we're going to use Hostinger. And then we're also going to use Higgsfield. I'm going to use that to generate the images and the video. You can use OpenArt or Key.ai, whatever your editor of choice is. For me, it's Higgsfield. I use Higgsfield for everything. So, that's what we're going to use in this demo. And then you're going to need my five skills. They're in my free Skool community and the links in the description. Again, there's five skills for this build. There's a lot going on. I never usually give away this many skills on one video, but it's a big build. There's a lot of moving parts. You're going to need them in order to cut your time in half and in order not not to make a ton of mistakes. So, let's move on. Let's start building. Hey, this is future Sean. I'm jumping in here because I think I was just a little bit too excited about this build. I moved a little bit fast and I didn't give you step-by-step instructions on how to do this. So, in the description I put a link to my free community. The prompt has everything side-by-side inside Claude and do everything I'm doing in this video along with me. Now, back to the video. All right, first thing we're going to do is we're going to add these skills to Claude Code. So, again, download these in my free Skool community. The link's below. Five skills get the WordPress engine, anti-slop, scroll hero, asset check, and brand deck. So, there's a lot going on. Just put those skills in the Claude. Copy this prompt, throw it in there, and Claude's only going to use that skill when we actually call on it. What skills are for guys you don't know is it's just a a basic set of instructions that Claude follows every single time so that you get the same results that I did. And again, these are yours to use. So, once you download them, you can edit them and do whatever you want to them just to make them custom to your needs. Next guys, we're in the planning phase. We're doing research here. A lot people say this is optional. I don't. Every build that I do, even though this is a demo site, I actually deploy these agents and did research in my local community. I live in Boise. All of this research is done on all of the coffee shops in Boise and the surrounding areas and I do this for every build that I do. I want to see I want to see what kind of reviews people have on Yelp and Google. I want to see what kind of pages they have for a coffee shop. I want to see what their menu looks like. I want to see all this stuff. So, what I do is I have a prompt that tells Claude to act as the orchestrator and it deploys four agents to do as much research as possible on the area, on the niche, absolutely everything. It just does a deep dive and it gives us a research brief that we can reference in our build to make sure there's no content gap and it makes sure that we have at least what our competitors, the top competitors have and some. We want to we want to outshine everybody. Every time I do a build, I do this so that I have everything I need at my fingertips so that I don't miss anything. Does take a lot tokens. A lot of you guys might be hesitant to do this. It's going to be between I think I was like 480,000 tokens, which is a lot. I limit each agent to 1,000 tokens and then I limit I limit the whole build to 500,000 tokens. So, with Claude acting as the orchestrator plus the four agents, I ended up being about 487,000 tokens, I think is what it was, to do this research. But again, I'm on the $200 a month plan. For me, this is 100% non-negotiable. This has to happen if I'm doing a build, even if it's a demo site. But I highly recommend you guys do this because it's going to save you a lot of time down the road and you're going to be able to see things that you wouldn't normally see uh just doing your own research. So, I highly recommend it. Okay, now we're going to gather all the assets. So, if you already have a brand deck with your logos and all your fonts and everything, that's awesome. Go ahead and put that on your desktop, make it easily accessible for Claude. I didn't have any of that, so all I did was I created it a logo in ChatGPT and then I created a skill called brand deck. And what it does is it generates all the fonts I want, all the colors, everything based off of that logo. Uh so, if you guys need that, go ahead and use that skill below. So, create that project folder, name it whatever the project is, put it on your desktop, and load up all your assets, your logos, your colors, your fonts, absolutely everything. If you got images of employees, if it's your own business, or if you got your clients' employees, or the outside uh location of the business, whatever it is, all the assets that you have for this project, put it in one folder cuz we're going to have Claude go through it and tell it um and it's going to tell us exactly what we have and exactly what we're missing. So, if we're missing a bunch of items, if we need to generate it through Higgsfield, or if we need to make a list to give to our client, or if we need to go and take an hour or so and take pictures of our own business. If this is your business, go ahead and load up everything in there now. We're going to create a list of what we're missing so that we have everything for this build. Yeah, Claude's going to build from that folder. Next is the brand kit. So, we're actually going to going to deploy my brand skill called Brand Deck. And basically, I put one logo in and it gets me a whole brand kit out. I get all the colors, all the fonts, basically all of it with just a logo. So, everything you see on the screen was generated from a logo using that skill. The reason why we do this is that every page is going to match our brand design. It's also super super helpful for social media posts. If I If I have this one brand deck or this brand kit ready to go, anytime I'm doing anything for social media on Instagram or Facebook or TikTok or whatever, I can just tell Claude, "Hey, pull from this brand deck, layer these assets on top of this video or this carousel or whatever." So, it's pretty awesome. It's just super handy to have. Because of this skill, I just It's all easy. It's at my fingertips and I never have to search for it. All right, guys, we're in the building phase. Let's go. Step one is the wireframe. What a wireframe is is just a gray sketch of every page for the website. So, based on the research brief that we had Claude do before in the planning phase, Claude's determined what pages that we actually need to build. For this site, we are doing the homepage, menu page, visit page, our story page, shop page, and events page. So, six total. What the wireframe is is just a layout of the photos, the texts, everything we need. So, those of you that are familiar with building websites that have done web development or web design in the past, you know exactly what I'm talking about. But basically, when we Before we actually design any assets, we want to layer the structure of the website down so we know exactly what the homepage is going to look like. We're going to have a scrolling hero. We're going to have the menu. We're going to have some about info. We're going to have a We're going to tell a story on our homepage. And then every other additional page, like the menu page, is going to have all the products in it. About page or our story page is going to have all the owner's images, the staff images, all that in there. So, it's way easier to edit during the wireframe phase than it is to do it after, right? It just takes less time, burns less tokens. Right now is the time to structure what you want it to be. So, if you have any changes you want Claude to make, this is where you tell Claude what changes you want to make to the wireframe before we actually design this. So, again, we have the four the six pages plus the four pages that we're doing for the owners' dashboard inside of WordPress. Each photo spot is marked. So, now we're checking the wireframe. We're going to run the anti-slop skill on the wireframe. So, basically, we're asking Claude like, "Does this look like trash?" Check the 37 checks or whatever I have for this skill and make sure that it doesn't look like the standard template crap that you get for AI slop from Claude or ChatGPT. People can basically spot this a mile away. It looks cheap, looks like every other template. A clean site does look custom-built. That's what it's all about. Nothing fired means that it found zero AI slop. So, a lot of you might get that out the gate. If not, no big deal. We just make those changes and we clean it up before we actually do the build. this is it, the WordPress engine, step three, guys. What this prompt does is everything. >> [laughter] >> One command does It builds a WordPress site. It creates the free cadence theme, which is a super small It's got very tiny amount of code so that we are as fast as possible. The three plugins we need to keep it smooth and clean. It loads every page, creates the menu, the forms. It creates absolutely everything we need for the site. Again, we're not doing we're not using a builder. We're not doing Elementor. We're not doing some other crazy theme. Like this This is the least amount of code we need to make the the site look amazing and keep it fast. And again, nothing we're putting in here will slow the website down. This is going to be as fast as humanly possible. Here, next step we is connecting our hosting. I'm using again Hostinger. It's what I've used for over 10 years. You guys can use whatever hosting platform you like. Hostinger hosts the website. It also handles my business emails. And then, you have to be on the premium plan or higher, which actually gives you like three or more sites. So, premium plan or higher will give you uh the SSH and the WP-CLI and then everything we need for the WordPress skill to actually work. So, it it starts off the SSH and then you just turn it on. And Claude will walk you through these exact steps on how to do this. And I'll show you what I did for this build. Guys, if you don't have Hostinger, I have the link in my description. It is an affiliate link, so I appreciate you helping out the channel. Uh basically, we're setting it up once. We're going to install WordPress on the main site with Hostinger's installer. That's another reason why I chose Hostinger because with WordPress, it was it's absolutely seamless. For me, Hostinger was just overall the easiest to use for email, hosting, absolutely everything. We're going to turn on SSH in the HPanel. And then Claude makes a key. So, you paste the key into Hostinger's SSH page. That's basically all you got to do. Claude tests the connection and that's it. It It takes maybe 90 seconds total. Claude does most of the work. It's super easy. And then you'll be able to host this site plus a couple other sites unless you choose a higher plan and you'll be able to do this. Uh that's how Claude puts your site online for you. And then after this, it's just one command and it's done. All right. So, now we're going to check it on the computer. It's all local right now. So, before we put it on Hostinger, we're going to check and scroll through and look at our build and make sure that everything is smooth and seamless and that we have all the assets that we wanted on there. So, every page is a file. Every page is a file of the project folder. And then the checks run on those files. The movie parts, like the scroll video, open as test pages in the browser. So, that's again, it's not actually up on a live server yet. So, then we put it on a hidden test site. One command puts it on Hostinger at an address only you know. So, that way it's not going to be like indexed everywhere for the whole world to see. The only you're going to know what it is for a short period of time before you put it on the real domain. So, again, it's hidden from Google, so no one can find it. And then now it's a real WordPress website. You check every page on a desktop and on the phone. It's live. It's real. This thing's loaded. So, some things only break on a real server, like my cache broke on the scroll video twice. There's no way for me to test that locally until I actually put it on the real server. Then then I could see where it broke. And again, it it got fixed right away once it was live. So, with this WordPress skill, there's basically two ways to make this site go live. You can do a demo on your own site and just no index it so that technically it is live online, but it's not going to be nobody's going to see it because they can't search for it. The URL exists, but it's you can't find you're not in search. It's like impossible to find it. Or you can just go for it and put it on the real site. For a client, here's what I would do. I would build it as a demo on my own site first, send the customer the link. If they like it, everything checks out, then I would just build it on their domain. It needs to be live in order for you to check everything though. All right. Now, I'm going to create the pictures and the videos for the for this website for the scrolling part of this website. So, we're going to do the baristas, the bar, do the video frames for the actual scrolling video. If you're doing this for your business or you have your a client, I would take real photos. If you don't or you just need some stock photos or some placeholder photos, do what I'm doing here. Now, we're going to jump into Higgsfield again and the link's in my description. This is how we're going to do our image and video generation. First, I'm going to handle the baristas. What I did is I did it in three steps. So, I created their face and then I used their faces a reference to create their uniform and then used their uniform as a reference with their face to create a character sheet. Once I have a character sheet, then I can put them in any scene I want. So, those are those are the basic steps. For that, I used Nana Banana Pro in 4K and then generated four images and then chose the best image out of those four for each one of those steps. Now, for the scene, we're going to attach both sheets. You attach both the reference or both the character sheets. And then I want to use GPT image 2.5 sunburst for this one. That's the newest one. When I originally did this project, GPT image 2 was the was the best one out. Now, I'm going to use GPT image 2.5 sunburst or that's what I recommend you guys to use to build the scene for this. So, for the first one, the bar was too bright. It didn't look like it didn't have the same feel as the rest of the coffee shop and then the steam looked really fake and some things are just super fake with AI and you have to be like very specific and have a bunch of patience. So, I had to regenerate to get that steam just right off the coffee, otherwise it wouldn't look good at all. Uh then I created the three video frames. So basically I did right before the pour, uh the slide when she's like sliding the coffee to the customer, and then a close-up of her like smiling, right? Cuz you want this customer service aspect of it too. Like I wanted to be like, "Man, I made this just for you." Like I thought that'd make a great hero uh for a coffee shop, right? And it does look good. It's just a nice clean scrolling hero. It's exactly what I would want if I had a coffee shop uh here in Boise. These same two baristas show up in every shot. So like I wanted to make sure that I actually created character sheets for them. You don't have to do that for everything that you're doing here. Like I didn't do character sheets for the rest of the staff. They were showing up in the videos and then also um showing up on multiple pages. I wanted to look consistent. So that's why I decided to create character sheets for for both these baristas. And hey, if you like this content, if you think it's really helpful, I would really appreciate if you liked and subscribed to the channel. Just lets me know that you like what I'm doing and it just allows me to continue to make content like this for you. Also, if there's a certain build you want to see or if you have questions about any of the builds that you're doing, either join my free Skool community, which again the link's below, or uh put a comment in the video and I answer every comment. I look at each and every one of them. So if you have any questions or anything, feel free to reach out. I'd be happy to help. And now we're moving on to the video and uh this is where it gets expensive if you don't take your time and plan out the shots. C-Dance 2.5 is the number one model right now, so that's what we're using. You need to have the highest quality video you can possibly get for a scroll animation. So make sure to use C-Dance 2.5. Uh what we do is we give it a start frame and then we give it an end frame and then AI kind of we we kind of guide AI to fill in the gaps between what happens from the start frame to the end frame. And that's why we generated those high quality 4K images. We tested at 480p. What happens is I think I think 480p only cost 24 credits and it's something like 128 for 1080p, so you don't want to generate a bunch of 1080p videos until you know your prompt works. You can even regenerate in 1080, but be careful that you you might get something different if your prompt is not spot on. If you make any tweaks, have Claude help you with with the prompt. If you're having any issues, don't just tell Higgsfield, "Hey, make this change." Have Claude give you a new prompt to tell Higgsfield. That way that this is done correctly. You're not going to go back and forth and have a bunch of and use up a bunch of credits you didn't have to use up. Just make sure it's clean and concise. Be very specific with Claude in what you want fixed. I had a couple changes I had to make here, and that's why I think it's super important to test it cheap first and then use 1080p for the final product. All right, the real pour frame-by-frame. The first draft's got the steam and the pour wrong, right? So, the steam just it didn't look it it looked like vapor hanging above, like it was way off. And then I studied a real pour like a real pour frame-by-frame. You have to just dissect this cuz any error is going to be amplified when it's a hero of a website, right? So, you can it's got to be dialed in right here. All right, here it is, finished video. Pour looks really good. And the way she slid it, too, like she treated it like a real cup of coffee, which is like what I wanted or, you know, latte or whatever. But it looks really good. It's super smooth. So, for this I had to create two videos. So, I did The first video is before the pour and then her her doing the pour and sliding it over. The second video was for her sliding it up and then looking at you to give that customer service feel, right? So, two small videos and then we matched it. We're going to have Claude match them together with the scrolling hero skill to make it look perfect. All right, now here's where the magic happens. We have all the skills loaded up in Claude. We're in the same chat as we were before. We're going to upload We're going to reference the scroll hero skill and then we're going to upload the video into Claude. And what Claude does it cuts the video in, in my case, into 179 pictures. So, individual frames that make it smooth as you scroll. So, as you scroll the mouse, it slowly makes this video happen. But, what it is is that it's a bunch of chopped images are completely smoothed out with the Scroll Hero skill that we use. And then, the phone gets a tall crop. So, it gets a completely different crop for the phone. So, again, this skill works for both the desktop as well as mobile and makes both seamless with multiple videos. Again, the video plays as you scroll and then the page stays fast. That's what makes this whole thing stay fast. Check the page speed now. This is super important. It's really hard to rank for SEO when you have a slow website. So, we always shoot for 97 or better. 92 used to be good back in the day. But, for me now, 97 or better is what I'm shooting for. It test the live page on the phone and desktop. And then, mine got flagged for the logo. We had to create small copies of the logo in order to fix it, which is it's what you do for any design website. 97 on a phone, 100 on desktop. That's huge. Guys, it doesn't get much better than that. And a video just usually kills your speed completely. And then, a slow site not a slow site not only loses people, but again, because of that, Google just punishes you for it. 97's really freaking fast on mobile and 100 is it's perfect on desktop. All right, last page, owner dashboard. Again, we're handing this off or if you're not familiar with WordPress you're building this for your own site, this is what keeps you like from not breaking anything, right? There's just a lot going on on WordPress. You got to keep it updated. There's a lot of back-end stuff that could go wrong. So, giving an owner a dashboard where they can't break it a bunch of stuff is ideal. If you're handing this off to a client and they feel comfortable using it knowing that they can't break it, that's awesome. That's what you want. That's the best of both worlds. So, we're going to paste the dashboard prompt. They log in to big buttons, not the crazy WordPress dashboard that we're all used to. They're locked out of the plugins, the themes, and the settings. They run their own site. So, they're not calling you to say, "Hey, I need to change this price. I need to change the hours, or whatever." They can make all them changes themselves, and again, like that's that's huge that's huge for a business owner. If I need to change the hours, I don't want to have to call somebody to make that happen. I want to just be able to log on and make that happen quickly. Now, you're able to do that. Change the hours, add event, change the price, mark something sold out. Uh it shows on the site right away. And then, photo boxes tell them the size and the crop for them. So, if they're adding photos for a new product, it actually says like, "Here's the size you need for a product photo." Uh help card has your name, email, and website. So, like all my contact info's on here. But, it's nice just to leave my contact info where they can contact me if they need any help, or need some maintenance, or need something done on the site. It's just it's easy for them. It's good for them, and it's good for us, obviously. Uh they actually use this one, and they feel like they have control of their own company, which is super important. All right, guys, this is the finished site. This is it. Um I think it looks awesome. Having a WordPress site that's super fast, where you can hand it to over to a client, and they can make whatever edits they want is a really big deal. Uh it looks great. Let's take one last look. Here it is. I mean, it's smooth and seamless. Uh this menu section is absolutely incredible. I made a few edits to it. Um again, it's all built with Claude, but I'm going to show you how I did this in another video. From bean to cup, I think it's really cool to show the story on the homepage. I think it's it's really important for a site like this uh to have that, to show that it's a neighborhood shop, not a not a chain, right? All that stuff plays into That was all done because of our our research that we did in the beginning. Everybody displays testimonials on their page, and I think it's really cool to do it this way. It's a little bit different. When you click on it, it actually stops, so you can see what the review says. The visit page looks awesome. The story page with the owners is awesome. Again, I would do that same thing, and just put real owners in there. I think it looks really good. Everything about this build I loved, guys. I think it's it's super clean. Uh this is something I would sell to somebody right away. We built out six badass pages. There's five skills for you guys to use, which is freaking awesome. Like, I put everything I had into this one, guys. I hope you find it super useful. Again, everything is in my description below. My Skool community has all the skills, all the builds that I do are in there. Check it out. It's a lot of fun. I hope you guys found this useful again. Please like and subscribe. I enjoy doing this content and I would love for you guys to let me know if you have any questions or need any help on your builds. Appreciate you guys watching. I'll see you on the next one.