15 Minutes: Automating WordPress Site Building with Claude and Elementor MCP

In traditional site‑building workflows, turning a design mockup into an editable WordPress page often takes several hours. Designers slice the design, front‑end developers recreate it, and page‑level drag‑and‑drop adjustments are made—each step can introduce discrepancies. Recently I tried a completely different approach: using Claude AI together with the Elementor MCP plugin, I turned a design description directly into an Elementor page. No manual drag‑and‑drop was required, and the generated page can be edited even with the free version of Elementor. From environment setup to page generation and launch, the whole process takes about 20–25 minutes. The core idea is to convert the AI‑generated design intent into structured Elementor commands via the MCP protocol, rather than simply outputting a block of HTML.

Letting AI control WordPress’s page builder may sound a bit convoluted, but once it works, its value goes beyond just site creation—subsequent content‑operation automation is where the real efficiency gains appear.

Preparation: What Tools and Environment Do You Need?

Before you start, set up a local development environment. I recommend using Local by Flywheel to spin up a local WordPress instance; it works on macOS and Windows and takes about five minutes to install. If you already have XAMPP or MAMP, you can use those instead without affecting later steps.

You’ll also need:

• Visual Studio Code – to run Claude Code commands
• Claude Code – Anthropic’s official CLI for interacting with Claude
• Elementor Free – installed and activated in the local WordPress
• Hello Theme – a lightweight, highly compatible starter theme from the Elementor team
• Fluent Forms Plugin – for creating a contact form
• An HTML design file, or a clear mental description of the page you want

The whole preparation takes less than ten minutes. Once the local environment, VS Code, and Claude Code are installed, the rest is handled by the command line and the AI.

Installing the Elementor MCP Plugin: Letting Claude Directly Control WordPress

The key step is installing the Elementor MCP plugin. This plugin acts as a bridge between Claude and WordPress, allowing the AI to call Elementor’s page‑building API via the MCP protocol.

Installation steps:

1. Clone the repository from its dedicated GitHub repo to your local machine
2. Run the bash install script in a terminal
3. The script launches a setup wizard that asks for the WordPress site URL and an application password

How to generate an Application Password: In the WordPress admin → Users → Edit your profile → scroll to “Application Passwords” → enter a name (e.g., “Claude MCP”) → click Add → copy the generated password string.

The script automatically downloads and activates the required plugins: MCP Tools, Elementor, Hello Theme, and Fluent Forms. The script runs for about two minutes. One small caveat: automatic activation can occasionally fail. If you see that a plugin isn’t activated after the script finishes, go to the WordPress admin plugins page, locate MCP Tools, and activate it manually. Then return to the terminal and press Enter to let the installer finish its configuration.

When installation is complete, the MCP status icon turns green, indicating that Claude can now control Elementor.

Claude Auto‑Builds the Site: From Design Mockup to Editable Page

After installation, the fun part begins. Launch Claude Code in a terminal and feed it your design requirements—either a detailed description or an HTML file as a reference.

Claude receives the instruction and, via the MCP protocol, generates the Elementor page piece by piece. You can watch the construction in real time in the terminal: it first creates the page container, then fills in text, images, buttons, etc., and finally tweaks styles and spacing.

After roughly 20 minutes, a complete homepage is ready. Throughout the process, Claude calls Elementor’s API to create the page rather than producing static HTML—so you can edit every module, adjust layouts, and change styles in the Elementor backend just as if you had dragged them in yourself.

How to set a Vimeo background video: If the design includes a video background, select the corresponding container in Elementor → go to the Style panel → find Background Video → paste the Vimeo video URL. This works in the free version.

Note that the free version of Elementor has some limitations: certain advanced widgets (e.g., pop‑ups, sliders, forms) are rendered as custom HTML blocks. Front‑end display is usually fine, but in the backend you’ll see a “Custom HTML” block that can’t be tweaked like a native widget. When this happens, you can manually replace it with another available component in Elementor, or continue describing the adjustment to Claude using “vibe coding” and have it regenerate the element.

“Vibe coding” means continuously describing your modification requests to Claude—“make the navigation bar sticky”, “reduce the second paragraph’s font size by two points”, etc. Each change triggers Claude to update the page via MCP. This is less labor‑intensive than dragging, but avoid excessive style tweaking because Claude might disrupt the existing structure. In my tests, a few AI‑driven adjustments caused a block to shift left/right, and I ended up centering it manually in Elementor.

From Site Building to Content Automation: How to Keep AI Publishing Articles for You

Building the site is only the first step. Ongoing content updates drive traffic growth. Claude + Elementor MCP solves the page‑design problem, but daily SEO content production—publishing dozens of high‑quality articles each week, covering various keywords, and syncing to multiple platforms—still requires a lot of manual work.

That’s where SEONIB comes in. SEONIB automatically discovers trending topics, generates SEO‑optimized articles, and schedules publishing to WordPress, Shopify, SHOPLINE, and other platforms, creating a complete automated content pipeline. Claude handles page design; SEONIB handles daily content operations—together they cover the full chain from site creation to sustained growth.

SEONIB’s workflow is more content‑pipeline oriented: you set a publishing frequency (e.g., three posts per day), and the AI monitors industry trends, writes articles, optimizes SEO metadata, and publishes on schedule—no manual triggers needed. For solo site owners or cross‑border e‑commerce teams, this “set‑and‑forget” model is far more efficient than manual work. SEONIB supports 40 languages, so you don’t need separate pipelines for each language in international scenarios.

A typical scenario: you use Claude + Elementor MCP to build a product‑page homepage with a contact form in under an hour, then set SEONIB to automatically publish five SEO‑focused blog posts per week around your target keywords. The former ensures the site “has a look”; the latter ensures the site “has content”—both are essential.

You can refer to a case study on automated content creation that details how SEONIB tracks trending topics and generates articles. If you want to dive deeper into SEONIB’s features—brand context configuration, internal linking strategies, multi‑platform sync logic, etc.—the SEONIB documentation provides complete instructions, and I’ve found it valuable for building an automated content pipeline.

Frequently Asked Questions (FAQ)

How long does the entire setup take?

From a fresh local environment to a finished page, it’s about 20–25 minutes. Local WordPress installation ~5 minutes, MCP plugin installation ~2 minutes, Claude page generation ~20 minutes.

Do I need programming knowledge?

No coding is required, but you should be comfortable with basic terminal operations—running bash scripts and launching the Claude Code CLI. Understanding file‑directory structures helps troubleshoot minor installation hiccups.

Can the generated site be deployed online?

Yes. Migrate the local WordPress instance to a live server, or enter the live site URL and application password during installation. It’s best to test locally first, verify the page’s appearance, then move to production.

What limitations does the free version of Elementor have?

Some advanced widgets become custom HTML blocks. Front‑end rendering is usually fine, but you can’t edit their style parameters directly in the backend. You’ll need to replace them manually with other components or use AI adjustments.

What if the generated result isn’t satisfactory?

Continue “vibe coding”—describe the needed tweaks to Claude (“font too large”, “center the button”, “reduce spacing”)—and Claude will update the page via MCP after each request. You can also manually drag‑and‑drop in Elementor; the page fully supports backend editing.