WordPress Websites Using AI

I'm not a developer. I don't know how to write code from scratch. I can understand HTML and CSS when I see them, and I can edit small things with the help of AI, but I'm not someone who builds full websites by hand.

For years, Elementor was my go-to. It takes time, but not as much time as manual coding. I've built many websites from scratch using it. Because I know design, I could create clean and modern layouts even without writing code.

Things changed with AI.

Not in the "AI builds my whole website" way. My problem was different, I still needed WordPress. I need it for SEO, blogging, publishing, and long-term maintenance. So even when AI could build beautiful landing pages in React or HTML, it wasn't useful for me unless I could use that inside WordPress.

Now that's finally possible.

This is how I build complete WordPress websites using AI. from design to development without writing any code myself.

So the whole flow is:

WordPress Studio → Claude Code → custom WordPress theme → test locally → live website

Some recent sites I built this way:

Step 1 – Set Up a Local WordPress Using WordPress Studio

Everything starts with a local WordPress site. "Local" just means the website runs on your own laptop instead of on hosting. No domain, no hosting bill, nothing public, and nothing you can break.

I use WordPress Studio: https://developer.wordpress.com/studio/

It's free and it's made by the WordPress.com team. Download it, install it like any normal app, and open it.

Creating the site

• Open WordPress Studio.
• Click Add site (big button, usually bottom left).
• Give the site a name. Something simple like my-new-site or the client's name. This name also becomes the folder name on your computer, so keep it short and without spaces.
• Studio shows you where it will save the site. You can leave the default. Just notice it, we'll need this folder in Step 2.
• Click Add site and wait a few seconds. Studio downloads and sets up a full WordPress installation for you.

Checking that it actually works

Once it's created, your site shows up in the list on the left with a green "running" dot next to it. Two buttons matter:

• Open site – opens the website in your browser at an address like http://localhost:8881. If you see a plain default WordPress site, it's working.
• WP Admin – opens the normal WordPress dashboard. Studio logs you in automatically, no password to remember.

If both of those open, you're done with this step. That's a real WordPress site, just living on your laptop.

Why I like working this way:

• live preview
• normal wp-admin access
• direct access to WordPress files
• fast development (because everything is local)
• nothing is public until I decide it is

This becomes my safe "testing version" of the website. to understand how to use WordPress studio, check this:

Step 2 – Open the WordPress Project in an AI Coding Tool

This is the part that confuses most people, so I'm going to go slowly here.

The AI coding tool needs to be pointed at the folder where your local WordPress site lives. That's it. Once it can see that folder, it can build your theme inside it.

The tools you can use:

• Claude Code – what I use
• Cursor
• Antigravity

I'll explain it with Claude Code, and cover the other two at the end of this step.

2.1 – Find the folder WordPress Studio created

In WordPress Studio, click your site in the left list, then open the Settings tab. There's a field called Local path. That's the folder.

It normally looks like this:

• Mac: /Users/yourname/Studio/my-new-site
• Windows: C:\Users\YourName\Studio\my-new-site

Easiest way to actually see it: go to the Overview tab, find the Open in… row, and click Finder (Mac) or File Explorer (Windows). The folder opens straight away.

2.2 – Make sure it's the right folder

A real WordPress folder always has the same things inside it. Open the folder and look for:

• wp-admin (folder)
• wp-content (folder)
• wp-includes (folder)
• wp-config.php (file)
• index.php (file)

2.3 – Copy the folder path

The "path" is just the full address of the folder on your computer. You need it to tell the AI tool where to work.

• From Studio: in the Settings tab, hover over the Local path and use the copy icon.
• Mac: right-click the folder in Finder, hold the Option key, and the menu changes to "Copy … as Pathname".
• Windows: in File Explorer, click once in the address bar at the top. The full path gets highlighted. Press Ctrl+C.

2.4 – Open that folder in Claude Code

Claude Code doesn't have a normal "File → Open" window. You start it from inside the folder you want it to work on. Sounds odd, but it's actually easier once you've done it once.

You'll need Terminal for this. Terminal is an app that's already on your computer where you type commands instead of clicking buttons. On Mac press Cmd+Space and type "Terminal". On Windows open "Terminal" or "PowerShell" from the Start menu. Nothing scary happens, it's just a text window.

The shortcut: WordPress Studio can open Terminal for you, already inside the right folder. Overview tab → Open in… → Terminal. If you do that, skip straight to point 4 below.

The manual way:

1. Open Terminal.
2. Type cd followed by a space. (cd means "change directory", directory just means folder.) Don't press Enter yet.
3. Now drag your WordPress folder from Finder / File Explorer and drop it onto the Terminal window. The full path types itself. (Or paste the path you copied in 2.3.) Press Enter.
4. To confirm you're in the right place, type ls on Mac or dir on Windows and press Enter. You should see wp-admin, wp-content, wp-includes and wp-config.php listed. If you see those, you're in.
5. Install Claude Code once, following the install command on claude.com/claude-code. It's one line you copy and paste into Terminal.
6. Type claude and press Enter. The first time, it opens your browser to log in with your Anthropic account.

Small tip: keep this Terminal window open while you work. If you close it, just open Terminal again, cd into the folder again, and type claude.

2.5 – If you'd rather use Cursor or Antigravity

Same idea, just with a normal app window instead of Terminal.

• Open Cursor (or Antigravity).
• Go to File → Open Folder and select the same WordPress folder from 2.1.
• Open the AI chat panel, usually on the right side.
• Type your instructions there instead.

WordPress Studio even has a one-click Open in… → Cursor shortcut, so you can skip the folder hunting entirely.

The tool doesn't really matter. Pointing it at the correct WordPress folder is what matters. I use Claude Code because the results have been the most consistent for me.

Step 3 – Give the AI the Full Website Context

The more context you give, the better the website. This is the single biggest difference between a generic-looking AI site and one that actually looks like your brand.

What I give it:

• what the business or product is
• what the website is for
• who the target audience is
• the list of pages I need
• the actual content and copy for those pages
• logo and brand assets
• colours
• typography / fonts
• design references and screenshots
• reference websites I like, and what I like about them
• images I want used
• features and functionality (forms, pricing tables, blog, search, etc.)
• animations and interactions
• how it should behave on mobile
• SEO requirements
• a design.md file or any doc I already have

Practical way to do it: drop your logo, images, screenshots and any docs into a folder inside the project (I usually make one called brand-assets), then tell Claude to read that folder. You can also drag image files straight into the Claude Code prompt.

Then I ask for the build. And this next bit is important:

Here's the kind of prompt I actually use:

"Read everything in this project first: design.md, the brand-assets folder, and the reference screenshots.

Using all of that context, content, assets and design references, design and build this website as a complete custom WordPress theme inside this existing WordPress installation. Create it as a new folder in wp-content/themes/ and don't modify WordPress core files.

It should include:
– every page listed in design.md, with the real content and images, no placeholder text
– a working header, footer and WordPress navigation menu
– blog, single post, archive, search and 404 templates
– fully responsive layouts for mobile and tablet
– the animations and interactions described in the references
– clean semantic HTML with proper titles and meta descriptions for SEO
– site title, logo and menus editable from the WordPress admin

When you're done, tell me exactly how to activate and test it."

Adjust it to your project, but keep the structure: context first, "custom WordPress theme" clearly stated, then a checklist of what must be included.

I also ask for extra things like:

Then it goes off and writes the theme files, the PHP templates, the CSS, everything. I just watch.

Step 4 – Review and Iterate

Once the theme is built, go back to WordPress Studio and click Open site to preview it. (You may need to activate the theme first, that's Step 5.) Every time Claude changes something, refresh the browser and you see it immediately.

This is where most of the real work happens, and it's all conversation. I don't open the code. I describe what I want in normal English and let Claude modify the theme.

Real examples of things I say:

• "the hero section feels crowded, add more spacing and make the headline bigger"
• "the pricing cards break on mobile, fix the layout under 768px width"
• "add a Contact page with a form that sends me an email"
• "make the header sticky and fade the sections in as I scroll"
• "the blog page shows only 5 posts, make it 10 with pagination"
• "this button colour doesn't match the brand, use the colour from the logo"
• "images load slowly, optimise them"

Adding a whole new page later works the same way. "Add a Case Studies page with these three case studies, match the style of the About page." Done.

Step 5 – Activate and Test the Theme

In your local site's dashboard, go to:

Appearance → Themes → Activate

Pick the new theme Claude created, hit Activate, then click Visit Site. The website is now live locally.

Then test it properly before it goes anywhere near a real domain:

• Pages – every page loads, no blank pages, no error messages
• Navigation – menu links go to the right pages, logo links back to home, footer links work
• Mobile – resize your browser window narrow, or open it on your phone. Check the menu opens, text doesn't overflow, nothing is cut off
• Tablet – the in-between sizes are where layouts usually break
• Forms – actually submit one and confirm you receive it
• Images – all load, none broken, and they look sharp not blurry
• Blog – publish a test post and check the blog list, the single post page, categories, pagination and search
• 404 page – type a wrong URL and see what shows up
• Animations – smooth, not janky, and they don't block scrolling
• Buttons and CTAs – every one goes where it should
• Browsers – check in Chrome and Safari at least

Anything broken goes straight back to Step 4. Tell Claude what's wrong, refresh, check again.

Step 6 – Move the Website to the Live Domain

When everything works locally, the last step is moving it to your real hosting and domain. This is called migration, and it just means copying the WordPress files and the database from your laptop to your hosting so the same site runs on the real domain.

Two ways I do it:

• Full migration – use a migration plugin like All-in-One WP Migration or Duplicator. Export from the local site, install a fresh WordPress on your hosting, import the file. Everything comes over: theme, pages, content, settings.
• Theme only – if the live site already exists and only the design is new, copy the theme folder from wp-content/themes into the same place on the live site (via your host's File Manager or FTP), then activate it from Appearance → Themes.

watch this video to understand how to do this:

After it's live, quickly check: all pages load on the real domain, permalinks work (if not, go to Settings → Permalinks and just hit Save), forms still send, https is working, and analytics and Search Console are connected.

The One Big Con

You cannot edit this website from the WordPress backend like Elementor. All design edits must be done:

• in Claude Code (or Cursor / Antigravity)
• or manually in the theme files

This is the only drawback. I reduce it by asking Claude to make the important things editable from wp-admin anyway, menus, logo, site title, and obviously blog posts and pages. Publishing and blogging stay completely normal.

Final Thoughts

AI didn't replace WordPress for me. AI finally made WordPress easier.

And it keeps getting simpler. I used to need one tool to design and another to build. Now I set up a local WordPress, open it in Claude Code, describe the website I want, and it designs and builds it as a real WordPress theme.

AI handles the design and development. WordPress handles the publishing, SEO, and maintenance.

A perfect partnership.