How to Build a Website With Claude AI and WordPress in 2026 (Step-by-Step)

Yes, you can build a complete WordPress website using Claude AI in 2026 — and you don't need to write a single line of code or pay for a premium page builder to do it. The workflow is straightforward: you describe your business and design preferences to Claude, Claude generates the site structure and content, and you import that into WordPress using the NovaMira MCP plugin. From there, you refine everything visually in Elementor. The entire stack runs on free WordPress plugins and budget hosting from a provider like Hostinger.

What makes this different from the AI website builders that Hostinger, Wix, and Squarespace now offer is control. When an AI builder generates your entire site on its own platform, you are locked into their editor, their templates, and their pricing. When Claude generates your site and you bring it into self-hosted WordPress, you own it. You can change themes, swap plugins, move hosts, or hand the site to a developer — nothing is held hostage.

This guide walks through the full process step by step: the tools you need, the prompt that produces a real site (not generic filler), the MCP connection that lets Claude write directly to WordPress, and the common pitfalls that trip people up on the first try.

The 2026 Tool Stack (All Free or Budget)

Before you start, here is every tool in the stack and what it does. None of these require a paid license to get a working site live.

Claude AI (Anthropic) — You need the Claude desktop app, not the browser version. The desktop app is the only one that supports MCP (Model Context Protocol) connections, which is how Claude talks to WordPress. You can use Claude's free tier (Sonnet) or a paid plan. Claude Opus 5, released July 24, 2026, is the newest model and costs $5 per million input tokens and $25 per million output tokens on the API, but you don't need API access — the desktop app handles everything through the chat interface. Claude Pro is $20/month and Claude Max starts at $100/month if you need higher usage limits.

WordPress — Self-hosted WordPress.org, not WordPress.com. You install this on your hosting account. WordPress itself is free and open-source.

Elementor — The free Elementor page builder plugin from WordPress.org. Elementor has over 10 million active installations as of 2026, making it the most widely used page builder in the WordPress ecosystem. The free version gives you a drag-and-drop editor with dozens of widgets. Elementor's V4 update in March 2026 brought a new atomic CSS engine that significantly improved page load speed. You do not need Elementor Pro for this workflow.

NovaMira MCP — This is the bridge. NovaMira is a free WordPress plugin that installs an MCP server on your site, letting Claude read and write pages, posts, and Elementor layouts directly through the chat interface. Without NovaMira, you would have to copy and paste Claude's output manually. With it, Claude can build your entire site while you watch.

Blocksy — A free, lightweight WordPress theme from Creative Themes with over 300,000 active installations. Blocksy is built for speed and works cleanly with Elementor. You can use any Elementor-compatible theme (Astra is another good option), but Blocksy is a strong default because it doesn't bloat your site with unnecessary features.

Advanced Custom Fields (ACF) — A free WordPress plugin with over 2 million active installations that lets you add custom fields to posts and pages. You use it to store structured data — like service descriptions, pricing tables, or team member bios — that Elementor can then display dynamically. The free version covers most needs. ACF Pro adds repeater fields, gallery fields, and flexible content layouts.

WPForms — A free WordPress form plugin with over 6 million active installations. You need a contact form on your site, and WPForms Lite gives you that without paying. The free version includes basic form templates, spam protection, and email notifications.

Essential Addons for Elementor — A free Elementor extension with over 2 million active installations and 50+ additional widgets. If you need a post grid, testimonial slider, pricing table, or animated heading that Elementor's core widgets don't provide, Essential Addons fills the gap without a paid plugin.

Hostinger — For hosting. Hostinger's Premium plan starts at $2.99/month (introductory rate on a 48-month term) and includes a free domain for the first year, free SSL, and support for 100 websites. The Business plan at $3.99/month adds NVMe storage, daily backups, and WordPress staging. You don't need the Business plan for a single site, but the staging feature is useful if you want to test changes before pushing them live.

Total cost for the stack: $2.99/month for hosting (introductory rate) plus a Claude plan if you want higher usage limits. Everything else is free.

Step 1: Set Up WordPress on Hostinger

Sign up for a Hostinger account and choose the Premium or Business plan. During signup, you'll pick a free domain — choose carefully, because this is the domain your site will live on.

After purchase, Hostinger's setup wizard walks you through installing WordPress. The process takes about five minutes:

1. Log in to your Hostinger dashboard (hPanel).
2. Navigate to Website → Auto Installer.
3. Select WordPress.
4. Enter your site title, admin username, admin password, and admin email.
5. Click Install.

Once installed, you can access your WordPress admin at yourdomain.com/wp-admin. Bookmark this URL — you'll use it constantly.

Step 2: Install the Plugin Stack

From your WordPress admin, go to Plugins → Add New and install each of these plugins by searching for them:

• Elementor (the free page builder)
• NovaMira MCP (the Claude-WordPress bridge)
• Blocksy (install as a theme, not a plugin — go to Appearance → Themes → Add New)
• Advanced Custom Fields (ACF)
• WPForms Lite
• Essential Addons for Elementor

Activate all of them after installation. There are no configuration screens you need to touch right now — the defaults work.

Step 3: Connect Claude to WordPress via NovaMira MCP

This is the step that makes the whole workflow possible. NovaMira creates an MCP server on your WordPress site that Claude's desktop app can connect to. Here's how to set it up:

1. In WordPress admin, go to the NovaMira settings page (usually under Settings → NovaMira or a top-level menu item).
2. Generate an application password — WordPress creates a long, random string. Copy it.
3. NovaMira will display a JSON configuration block. Copy that block.
4. Open the Claude desktop app's config file:
   • On macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
   • On Windows: %APPDATA%\Claude\claude_desktop_config.json
5. Paste the NovaMira configuration block into the mcpServers section of the config file.
6. Restart Claude desktop.

When Claude restarts, it will connect to your WordPress site through NovaMira. You can verify the connection by asking Claude: "What pages exist on my WordPress site?" If Claude responds with a list of pages, the connection works.

Important: You must use the Claude desktop app for this step. The browser version of Claude (claude.ai) does not support MCP connections. This is a hard requirement, not a preference — there is no workaround.

Step 4: Write the Prompt (This Is Where Most People Fail)

The single biggest mistake people make is writing a vague prompt like "build me a website." Claude will produce a generic template with placeholder text that looks like every other AI-generated site. To get a real, customized website, your prompt needs to include:

• Your business name and what you do
• Your services or products, listed specifically
• Your target audience (who the site is for)
• SEO keywords you want to rank for
• Pages you want (Home, About, Services, Contact, Blog, etc.)
• Design style (modern, minimal, bold, corporate, warm — pick one)
• Specific instructions for images (use placeholders, describe what images you'll add later)
• SEO readiness (ask Claude to write meta descriptions and title tags)

Here is a prompt template you can adapt:

Build a WordPress website for my business. Here are the details:

Business name: [Your Business Name]
What we do: [one-sentence description]
Services: [list 3-5 specific services]
Target audience: [who your customers are]
SEO keywords: [list 5-10 keywords]
Design style: modern, clean, with a [color scheme] color palette

Pages I want:
1. Home — hero section with value proposition, services overview, testimonials, CTA
2. About — company story, team, values
3. Services — detailed service pages with pricing
4. Contact — contact form, map, hours
5. Blog — list of recent posts

For each page, write real content based on the business details I provided. Do not use placeholder text like "Lorem ipsum" or "Your content here." Write actual headlines, paragraphs, and calls to action.

Use Elementor widgets for all layout elements. Set images as placeholders that I can replace later. Make the site SEO-ready with proper heading structure, meta descriptions, and alt text descriptions for images.

The key phrases that make a difference: "write real content based on the business details" and "do not use placeholder text." Without these, Claude defaults to generic filler. With them, you get a site that reads like it was written for your actual business.

Step 5: Let Claude Build the Site

Send the prompt to Claude in the desktop app. Claude will begin creating pages in WordPress through the NovaMira MCP connection. You can watch the progress in real time — Claude will tell you what it's doing as it works.

This typically takes 5-15 minutes depending on the complexity of your site. Claude will create the pages, write the content, set up Elementor layouts, and configure basic structure.

What to watch for: Claude sometimes falls back to HTML widgets in Elementor instead of using native Elementor widgets. This happens when Claude isn't sure which Elementor widget to use for a particular layout. NovaMira teaches Claude about Elementor elements, but it's not perfect. If you see HTML widgets, ask Claude to replace them with native Elementor widgets. The prompt fix: "Replace all HTML widgets with native Elementor widgets. Use the Section and Column structure."

Step 6: Fix the Common Issues

After Claude finishes the initial build, there are three issues that almost always appear:

Missing header or footer. Claude may forget to create the header and footer sections. To fix this, ask Claude: "Create a custom header and footer using Elementor's theme builder. Set the header to display on the entire site and the footer to display on the entire site. Publish both templates."

Flexbox wrapping problems. Claude often sets Elementor flexbox containers to "wrap" by default, which causes elements to stack vertically when they should sit side by side. To fix: in Elementor, select the section that's wrapping incorrectly, go to Layout → Flexbox, and change the Wrap setting from "Wrap" to "No Wrap."

Mobile menu not working. Ask Claude: "Check the mobile menu. If it's not working, fix the responsive settings for the navigation widget." Claude can usually resolve this by adjusting Elementor's responsive breakpoints.

Step 7: Debug and Polish

Once the common issues are fixed, ask Claude to do a final pass:

Polish up the website. Fix any design inconsistencies. Debug any errors.
Check that all buttons and links work. Verify the mobile menu works.
Make sure all images have alt text. Check that the contact form works.

Claude will go through the site page by page and fix remaining issues. This is where having the MCP connection pays off — Claude can make changes directly without you having to describe what to fix in the Elementor editor.

Step 8: Add Custom Fields With ACF

If your site needs structured data — service pricing tables, team member profiles, product specifications — use Advanced Custom Fields. Here's a practical example:

1. In WordPress admin, go to Custom Fields → Field Groups → Add New.
2. Name the field group (e.g., "Service Details").
3. Add fields: Service Name (text), Price (number), Description (textarea), Icon (image).
4. Set the location rule: Show this field group if Post Type is equal to Service.
5. In Elementor, use the ACF dynamic tag to display these fields in your service template.

This lets you add a new service by creating a post and filling in the fields — no need to edit the page design each time. It's the difference between a site that's easy to maintain and one that requires you to call a developer for every change.

Step 9: Set Up the Contact Form

WPForms is already installed. To configure it:

1. Go to WPForms → Add New in WordPress admin.
2. Choose the Simple Contact Form template.
3. Edit the fields if needed (name, email, message is the default).
4. Go to Settings → Notifications and confirm the email address where submissions should be sent.
5. Embed the form on your Contact page using the WPForms block in Elementor.

Test the form by submitting it yourself. If you don't receive the email, check your hosting email configuration — Hostinger's SMTP settings may need to be configured for outgoing mail.

Step 10: Test and Launch

Before you consider the site done, run through this checklist:

• Desktop view: Open every page on a desktop browser. Check alignment, spacing, and that all images load.
• Mobile view: Open every page on your phone. Check that the mobile menu works, text is readable, and images scale correctly.
• Contact form: Submit a test entry and confirm you receive the email.
• Page speed: Run your site through Google PageSpeed Insights. Elementor sites can be heavy — if your score is below 60 on mobile, consider enabling a caching plugin (LiteSpeed Cache is free and works well on Hostinger) and optimizing images.
• SEO basics: Check that each page has a meta title and description (Elementor's SEO settings or a free plugin like Yoast SEO handle this).

Once everything checks out, your site is live. You didn't write code, you didn't hire a developer, and you didn't pay for a premium page builder — you built it with Claude, WordPress, and a stack of free plugins.

When to Upgrade From Free Plugins

The free plugin stack covers a basic business website completely. You'd only need to pay for plugins if:

• You need repeater fields in ACF (lists of items that repeat, like multiple team members on one page) — that's ACF Pro at $49/year.
• You need advanced form features like payment integration, conditional logic, or multi-page forms — that's WPForms Pro, starting at $49.50/year.
• You need theme builder features in Elementor (custom headers, footers, popup builder, WooCommerce builder) — that's Elementor Pro, starting at $59/year for a single site.
• You need premium widgets beyond Essential Addons' free 50+ — that's Essential Addons Pro at $49.97/year.

Start free. Upgrade only when a specific need forces you to. Most small business sites never need the paid tiers.

Who This Workflow Is For

This approach suits freelancers, small business owners, and anyone who wants a custom-designed WordPress site without hiring a developer or learning to code. If you can describe your business in a paragraph, you can use Claude to generate a site that looks professional and works.

It's not for you if you need a complex e-commerce store, a membership site, or a custom web application. For those, you need a developer — AI can help with pieces, but the architecture requirements go beyond what a single prompt can produce.

Internal Resources

• Claude Opus 5 Prompting Guide: What to Delete From Your Prompts in 2026 — How to write prompts that produce better output from Claude, including what to remove.
• Claude Skills Tutorial for Beginners: The Complete 2026 Guide — A deeper look at extending Claude with custom skills for specific tasks.
• How to Build a No-Code AI Agent Army for Your One-Person Business in 2026 — Building automated systems that handle repetitive business tasks using AI agents.
• Impeccable Design Skill: How to Fix AI Slop in Claude, Codex, and Cursor (2026 Guide) — How to avoid the generic, templated look thatAI-generated designs often fall into.
• Grok Build Mode: How to Turn One Sentence Into a Working App (2026 Guide) — A similar approach using xAI's Grok instead of Claude, for comparison.

Sources

1. Elementor — WordPress.org plugin page. 10+ million active installations. wordpress.org/plugins/elementor. Accessed August 2026.
2. Blocksy — Creative Themes. 300,000+ active installations. wordpress.org/themes/blocksy. Accessed August 2026.
3. NovaMira MCP — WordPress plugin connecting Claude to WordPress via Model Context Protocol. wordpress.org/plugins/novamira-mcp. Accessed August 2026.
4. Advanced Custom Fields — WordPress.org plugin page. 2+ million active installations. wordpress.org/plugins/advanced-custom-fields. Accessed August 2026.
5. WPForms — WordPress.org plugin page. 6+ million active installations. wordpress.org/plugins/wpforms-lite. Accessed August 2026.
6. Essential Addons for Elementor — WordPress.org plugin page. 2+ million active installations. wordpress.org/plugins/essential-addons-for-elementor-lite. Accessed August 2026.
7. Hostinger Pricing — Premium plan from $2.99/month (48-month intro term). Free domain for 1 year. hostinger.com/pricing. Accessed August 2026.
8. Claude Opus 5 — Released July 24, 2026. API pricing $5/$25 per million tokens. anthropic.com/news/claude-opus-5. Accessed August 2026.
9. Anthropic Claude Pricing — Claude Pro $20/month, Claude Max from $100/month. claude.com/pricing. Accessed August 2026.

FAQ

Can you build a WordPress website with Claude AI? Yes. Install the NovaMira MCP plugin on your WordPress site, connect it to the Claude desktop app, and describe your site in a detailed prompt. Claude generates the pages and content directly in WordPress through the MCP connection.

Is Claude desktop required, or can I use the browser version? The Claude desktop app is required. The browser version of Claude (claude.ai) does not support MCP server connections. You need the desktop app running on macOS or Windows to connect Claude to WordPress.

Do I need Elementor Pro to build a website with Claude? No. The free Elementor plugin from WordPress.org is sufficient. Elementor Pro adds the theme builder (custom headers/footers), popup builder, and WooCommerce support, but none of these are required for a standard business website.

How much does it cost to build a website with Claude and WordPress? Hosting starts at $2.99/month (Hostinger Premium, introductory rate), which includes a free domain for the first year. All required WordPress plugins — Elementor, NovaMira, ACF, WPForms, Essential Addons — have free versions. Claude's free tier (Sonnet) works for the initial build. Total: under $3/month plus optional Claude Pro at $20/month.

What is NovaMira MCP? NovaMira is a free WordPress plugin that installs an MCP (Model Context Protocol) server on your WordPress site. This allows the Claude desktop app to read and write pages, posts, and Elementor layouts directly through chat, without manual copy and paste.

Can I use a different theme instead of Blocksy? Yes. Any theme that is compatible with Elementor will work. Astra and GeneratePress are popular alternatives. Blocksy is recommended for its speed and clean integration with Elementor, but it is not a hard requirement.

Why does Claude sometimes create HTML widgets instead of Elementor widgets? Claude falls back to HTML widgets when it is uncertain about which Elementor widget to use. NovaMira helps by teaching Claude about Elementor elements, but it's not perfect. If you see HTML widgets, ask Claude to replace them with native Elementor widgets.

How long does it take Claude to build a WordPress site? A 5-page business website typically takes 5-15 minutes for Claude to generate through the MCP connection. Debugging and polishing the site takes another 15-30 minutes of back-and-forth with Claude.