Claude + Elementor = A Full WordPress Website in 15 Minutes

You can now build a complete WordPress + Elementor website using Claude.

Not a screenshot. Not a static export. A real, fully editable Elementor website — with containers, headings, forms, background videos, and custom styling, all living inside WordPress.

And it's built by Claude talking directly to WordPress through an MCP server.

If you run a web design agency, freelance on WordPress, or just want to ship sites faster, this is the workflow that changes your math. Below is the complete step-by-step guide to building WordPress + Elementor websites using Claude Code and the WordPress MCP.

Why this workflow matters

The old way of building a client site looked like this: design a mockup, then spend three to five days manually rebuilding it in Elementor, click by click. The new way collapses that rebuild into a 30-minute conversation. You describe what you want, Claude builds it directly inside Elementor, and you refine it in plain English.

The best part: every plugin in this stack is free. No Elementor Pro subscription required.

Step 1 — Have your project folder ready in VS Code

Before touching WordPress or the MCP, you need a starting point. There are two scenarios.

Scenario A — You already built a site in Claude Code. Open VS Code, open your existing project folder (the one with your HTML, CSS, and assets), and that becomes the reference Claude uses to build the Elementor version. The more complete your existing build, the more accurate the Elementor output.

Scenario B — Starting from scratch. Create a new folder on your desktop named after the client or project, drop a blank index.html file inside, and open that folder in VS Code. You'll brief Claude through conversation instead.

Which is better? Scenario A wins. Claude can read your existing HTML structure, extract colors, fonts, layout decisions, and section order, then rebuild that faithfully in Elementor. Scenario B works but needs a more detailed brief in the chat.

Pro tip: If you run an agency and already do Claude mockups before selling to clients, this workflow was built for you. The mockup you showed the client becomes the Elementor site. No rebuilding from zero.

Step 2 — Download and install Local WordPress

Local WordPress lets you build and test WordPress sites on your own machine before they go live anywhere.

Building locally first means no hosting fees during development, no risk of breaking a live client site, faster iteration with no upload waits, and an easy export when you're ready to push live. This entire workflow runs locally before production.

How to install:

1. Go to localwp.com

2. Download for your OS (Mac/Windows/Linux)

3. Install and open the app

4. Click Create a new site

5. Give it a name that matches your project (e.g. "Arbor Oaks")

6. Click through the default settings

7. Set your admin username and password — remember these, you'll need them in Step 5

8. Click Create Site and wait 2–3 minutes for setup

What you get is a full WordPress installation running on your laptop, a local URL like arbor-oaks.local you can open in any browser, a WordPress admin dashboard, and PHP, MySQL, and Nginx all running in the background. No server setup, no command-line database config, no hosting bills. This also works with live WordPress sites, but start local until you have the workflow dialed in.

Step 3 — Clone the Claude Elementor Kit from GitHub

This kit is what makes the whole workflow possible. It contains the MCP server configuration (which tells Claude how to talk to WordPress), the Claude skill.md file (which defines what Claude knows about Elementor), the bash install script that automates Steps 4–6, and the setup wizard scripts that handle authentication and plugin installation.

How to clone it:

1. In VS Code, open your project folder from Step 1

2. Open the integrated terminal (Terminal → New Terminal)

3. Confirm you're in your project folder (run pwd to check)

4. Copy the clone command from the GitHub repo (linked at the bottom of this post)

5. Paste it into the terminal and hit Enter

6. Wait 10–15 seconds for the download

This drops a new folder called claude-elementor-kit inside your project, with all scripts, config files, and the skill.md pre-installed. After cloning, run:

cd claude-elementor-kit

You're now inside the kit, ready to run the bash install.

One important note: If you already have a Claude skill.md in your project from previous work, the install script will ask if you want to overwrite it. Say yes — the Elementor-specific skill is what gives Claude the knowledge to build in Elementor properly.

Step 4 — Run the bash install script

This command wires everything together. It configures the MCP, installs the Claude skill, and launches the setup wizard.

Make sure you're inside the claude-elementor-kit folder, copy the bash install command from the GitHub README, paste it into the terminal, and hit Enter.

The wizard asks three things:

• "Are you using a local or live host?" → Select Local

• "Which site are you building?" → Select the site name you created in Local WordPress (e.g. "Arbor Oaks")

• "Enter your WordPress application password" → This comes from Step 5. Keep the terminal open, complete Step 5, then come back and paste it here.

Behind the scenes the script sets up the MCP server configuration file (mcp.json), the Claude skill.md with Elementor-specific knowledge, the WordPress API endpoint configuration, and the authentication layer for Claude–WordPress communication. This is the only technical setup step in the entire workflow. After this, everything is done through conversation with Claude.

Step 5 — Create an application password in WordPress

This is how Claude authenticates with your WordPress site. Without it, the MCP can't connect.

1. Open your local WordPress admin URL (e.g. arbor-oaks.local/wp-admin)

2. Log in with the username and password from Step 2

3. Go to Users → Profile

4. Scroll down to Application Passwords

5. In the New Application Password Name field, type: Claude MCP

6. Click Add New Application Password

7. A password appears on screen — copy it immediately. You will never see the full password again after closing the popup.

Then go back to your VS Code terminal, paste the application password when the setup wizard asks for it, and hit Enter.

This gives Claude a secure, dedicated credential for this site — separate from your main WordPress login. If you ever need to remove Claude's access, you just delete the application password. It's WordPress's official API authentication method, the same system used by Jetpack, WooCommerce, and others.

Security note: Never use your main admin password in this field. Always use application passwords. They can be revoked individually without changing your main login.

Cost: $0 · Time: 2 minutes · Result: Claude has authenticated access to your local WordPress site.

Step 6 — Let the installer auto-configure your plugins

After authentication, the setup wizard automatically installs and configures everything Elementor needs:

• Elementor (free version — no pro subscription needed)

• Hello Elementor theme (the official lightweight theme by Elementor)

• Header and footer plugins (required for full-page layouts on free Elementor)

• Fluent Forms (for contact forms and lead capture)

• Essential Add-ons for Elementor (extends free functionality)

The wizard asks two confirmation questions — "Set the theme to Hello Elementor?" and "Install Fluent Forms?" Say Yes to both.

Common error you might see: MCP namespace not yet registered. This just means one plugin didn't auto-activate. Fix it in 30 seconds: go to WordPress admin → Plugins → Installed Plugins, find MCP Tools (it'll show as inactive), click Activate, then return to the terminal and hit Enter to continue. This happens because WordPress's auto-activation queue sometimes backs up when several plugins install at once. Manual activation takes five seconds and only happens once.

After this step, your WordPress site has all needed plugins running, Elementor is ready to build, the MCP connection layer is active, and Claude can communicate directly with Elementor.

Cost: $0 (all free plugins) · Time: 5 minutes (mostly automated) · Result: a full Elementor environment ready for Claude to build inside.

Step 7 — Quit and reopen Claude Code to load the new MCP config

This step is critical and easy to miss. The MCP configuration file was just created by the installer, and Claude Code needs a restart to pick it up.

Quit Claude Code completely — not just the tab, the whole application. Reopen it, navigate back to your project folder, and start a new session. Your first message should be:

"Check if the Elementor MCP is connected and authenticated. Verify the connection to my WordPress site and confirm the site is accessible."

In response, Claude reads the new MCP configuration, sends a test authentication request to your WordPress site, confirms the site is accessible, verifies Elementor is installed and active, sets the brand colors from your project files (if you have an existing HTML build), and confirms it's ready to build. A successful connection looks like Claude creating a small to-do list, checking MCP auth, confirming the site is empty and accessible, then reporting that everything is ready.

If the connection fails: check that Local WordPress is still running in the background, that the MCP Tools plugin is activated, and that you pasted the application password correctly in Step 5. Restart Local WordPress and try again.

Step 8 — Tell Claude to build the full site in Elementor

This is the moment. Paste this brief after confirming the MCP connection:

Build the full website in Elementor based on the HTML project in this folder.

Brand:

• Name: [your site name]

• Primary color: [hex code]

• Secondary color: [hex code]

• Font: [your font]

Pages to build:

• Homepage (with hero, features section, testimonials, contact form)

• [any other pages]

Reference the index.html in this project for section order and layout, copy and content, color usage, and navigation structure. Use the Elementor MCP to build every section as proper Elementor containers and widgets. Use Fluent Forms for any contact forms. Build everything on the free Elementor plan — no pro widgets.

For the next 20–30 minutes, Claude reads your existing HTML, analyzes the layout, sections, colors, and content, creates Elementor pages through the MCP, builds each section as proper containers, adds headings, text, images, and buttons using Elementor widgets, sets colors and fonts through Elementor's style system, adds forms via the Fluent Forms widget, and reports progress after each major section.

Do not interrupt it while it's working. Let it finish completely. When it's done, it reports the pages built, sections created, and any limitations it ran into (background videos, animations, and so on).

Step 9 — Review the site and fix issues through conversation

Claude built the site. Now you review it and fix what needs fixing through conversation — not by touching Elementor manually.

Open your local WordPress URL in the browser and view the live site as a visitor first, taking notes on anything that looks wrong. Then open the Elementor editor to check the structure. Common things that need attention: spacing between sections, a background video not showing (Claude may have used a gradient as a fallback), a scrolling text strip in the wrong position, or some elements converted to custom HTML instead of native Elementor widgets.

You fix all of this in plain English. For example:

"The scrolling text strip that says 'Patience, Craft' should be at the bottom of the hero section, not above it. Move it."

"The hero background should be a Vimeo video. In Elementor you add it under container style, then background, then video. Use this Vimeo URL: [paste URL]."

"The gap between the features section and the testimonials section is too large. Reduce the padding on both sections."

You're not learning Elementor or clicking through menus. You're describing what's wrong, and Claude makes the changes through the MCP. This is vibe coding applied to WordPress. You can ask for spacing and padding adjustments, color changes, background video additions, copy edits, new sections, form configuration changes, and animations where free Elementor supports them. Most sites need 5–10 rounds of fixes. At the end, you have a polished, production-ready Elementor site.

Step 10 — Hand off a fully editable Elementor site to the client

This is what every web design agency dreams of: building fast, delivering quality, at scale.

What you're handing off is a real WordPress site — not a screenshot, not a mockup, not a Claude artifact. It's fully editable in Elementor's visual builder, with every section as a native Elementor container or widget (so the client can edit without touching code), live Fluent Forms connected to email or a CRM, and colors and fonts set through Elementor's global styles. The client can log into WordPress and make changes themselves.

To deliver:

• Option A — Export from Local to hosting. Use Local's Export Site feature to get a zip, then import to the client's hosting using Duplicator or All-in-One WP Migration, and update the domain settings.

• Option B — Build directly on the client's live WordPress. The same MCP workflow works on live sites. Create the application password on their live admin, run the same setup, and build straight to production.

The business model reality

Before this workflow: Claude mockup (2 hours) + rebuild in Elementor (3–5 days) + review and revisions (1–2 days) = about one week per site, capping you at 3–4 sites per month per developer.

After this workflow: Claude mockup (2 hours) + build in Elementor via MCP (30 minutes) + review and fixes via conversation (1 hour) = about half a day per site, putting 15–20 sites per month within reach per developer.

Same quality, same price, 4–5x more output.

What this means for pricing: You don't lower your price because it took less time. Keep your $1,500–$5,000 price and take 10 clients instead of 3. Or drop to $800–$1,200 and undercut every agency in your city while still earning more total revenue per month.

The agencies that figure this out will own their market. The ones still spending five days rebuilding mockups by hand will lose clients to solo operators who deliver the same quality in a day. The window is open. The tool is free. The workflow is ready.

Get the kit

The complete Claude Elementor Kit is on GitHub:

github.com/emersimeon/claude-elementor-kit

As always, thank you for reading. If this helped you, follow me — Shahriar Shuvo — for more workflows like this, and share it with someone who builds WordPress sites.