Claude + Elementor Pro — Claude Code & OpenClaw Skill

Build WordPress sites with AI — design with Claude Code, then have Claude build it directly inside your Elementor Free or Pro site. No more rebuilding mockups by hand.

A Claude Code & OpenClaw skill that teaches Claude to build directly inside Elementor. Not just a mockup tool — Claude places real sections, widgets, colors, and typography into your live Elementor site, with Pro/free auto-detection and a widget-vs-HTML discipline.

The short version: This kit teaches Claude (Anthropic's AI) how to talk to your WordPress site through the Elementor MCP server. You design pages in Claude Code, then Claude places sections, widgets, colors, and typography directly into Elementor for you. Works on local sites (Local-by-Flywheel) and live hosts.

Naming note: the GitHub repo is claude-elementor-pro, but the skill itself installs and invokes as elementor-pro-studio (published on ClawHub under "Elementor Pro Studio" — OpenClaw-neutral branding). Same kit, same repo — just a repo-independent skill name.

Part of the Aura Design Engine

These are the free skills behind Aura — one AI web-agency lifecycle you can run standalone or orchestrate across a whole client fleet from a single dashboard.

→ Orchestrate all of it across your client fleet with Aura — governed agent ops with approvals and a full audit trail on top of these skills.

What's inside

claude-elementor-pro/
├── INSTALL.sh          ← Installer for Mac & Linux
├── INSTALL.bat         ← Installer for Windows (double-click)
├── INSTALL.ps1         ← Windows installer (PowerShell)
├── files/
│   ├── SKILL.md                  ← The cheat sheet Claude reads
│   └── setup-elementor-mcp.sh    ← The robot that connects Claude to WordPress
├── docs/
│   ├── QUICKSTART.md       ← Short "how to use this" guide
│   ├── WHATS_INSTALLED.md  ← One-page map of every file/plugin the kit touches
│   └── LESSONS.md          ← Deep-dive on why it works the way it does
├── LICENSE             ← MIT — free for any use
└── README.md           ← You are here

How it works (in 30 seconds)

There are two pieces:

1. The skill (SKILL.md) — a guide Claude reads every time you ask it to work on Elementor. It encodes every quirk and gotcha learned the hard way (correct widget parameter names, when to use HTML vs native widgets, the auth gotchas, etc.).

2. The setup script (setup-elementor-mcp.sh) — a wizard that connects Claude to one specific WordPress site. It installs the MCP plugins, wires up authentication, and writes a .mcp.json file in your project directory.

After running both, you can tell Claude "build me a hero section with this design" and watch it appear on your WordPress site in real time.

Prerequisites

The kit touches five layers of stuff. Some you install yourself, some the wizard handles for you. Here's the full picture so nothing surprises you mid-setup.

Layer 1 — On your computer (install once, ever)

• ☐ Claude Code — the AI assistant the kit plugs into
• ☐ Local by Flywheel (only if you want offline WordPress — skip if you have a live site)
• ☐ Git Bash (Windows only — gives you bash, curl, python, zip that the setup script needs. Mac and Linux users already have these.)

Layer 2 — Inside Local (or your hosting panel)

• ☐ A WordPress site. Create a fresh one in Local, or have admin access to a live host.
• ☐ An Application Password. WP Admin → Users → Profile → scroll to Application Passwords → click Add. Copy the password — that's the credential the wizard uses. (WordPress docs)

Layer 3 — WordPress plugins + theme

You can install these yourself OR let the setup wizard auto-install them for you (it asks). All are free, on the WordPress.org plugin directory.

Required:

Optional but useful:

Layer 4 — The MCP plugins (automatic — wizard handles these)

You don't install these yourself. The setup wizard downloads them from GitHub and installs them automatically.

Layer 5 — This kit (handled by INSTALL.sh / INSTALL.bat)

The two files in this repo's files/ folder get copied to:

• ~/.claude/skills/elementor-pro-studio/SKILL.md — the cheat sheet Claude reads each session
• ~/.claude/scripts/setup-elementor-mcp.sh — the wizard you run per WordPress site

📋 Want a one-page reference of every file/plugin the kit touches? See docs/WHATS_INSTALLED.md.

Install

Mac / Linux

# 1. Clone or download this repo
git clone https://github.com/Digitizers/claude-elementor-pro.git
cd claude-elementor-pro

# 2. Run the installer
bash INSTALL.sh

Windows

1. Download this repo as a ZIP (green "Code" button → Download ZIP)
2. Unzip it anywhere
3. Double-click INSTALL.bat

The installer copies two files into your ~/.claude/ folder:

• ~/.claude/skills/elementor-pro-studio/SKILL.md
• ~/.claude/scripts/setup-elementor-mcp.sh

Safe to re-run — it'll ask before overwriting existing files.

Use it

One-time per WordPress site

# In your project folder (anywhere you want .mcp.json to live)
bash ~/.claude/scripts/setup-elementor-mcp.sh

The wizard walks you through 8 steps:

1. Local or live host?
2. Site URL or Local site name
3. Connectivity check
4. WordPress username + Application password
5. Reports which baseline plugins/theme are already active
6. Offers to auto-install missing ones (Elementor, UAE, Hello Elementor, optionally Essential Addons + Fluent Forms)
7. Installs the two MCP plugins from GitHub
8. Writes .mcp.json to the current folder

If you say "yes" at step 6, the wizard installs the required plugins from wordpress.org for you. If you say "no" — say if you're using an existing site you don't want auto-modified — install them manually via WP Admin → Plugins → Add New.

Onboard a client fast (non-interactive)

For spinning up many client sites, new-client.sh is a flag-driven, headless version of the wizard — resolves the site, verifies auth, detects Pro, installs the MCP plugins, and writes .mcp.json in one command:

# Local-by-Flywheel site (resolved from Local's sites.json — works even when the
# site lives outside ~/Local Sites/):
bash new-client.sh --local "ClientName" --user wpuser --app-pass "xxxx xxxx xxxx xxxx xxxx xxxx" --with-api-pro

# Live host (prints the two MCP zips to upload, then re-run):
bash new-client.sh --live "https://client.com" --user wpuser --app-pass "..." --project-dir ~/projects/client

Useful flags: --project-dir <path> (where .mcp.json goes), --with-api-pro [path] (also install the wordpress-api-pro companion skill), --name <id> (MCP server name), --dry-run (report only). Idempotent — skips the plugin install if the MCP route is already registered.

Every session

1. Restart Claude Code in the project folder so it picks up .mcp.json
2. Approve the new MCP server when prompted
3. Tell Claude what to build:
   • "Use the Elementor MCP to build a homepage based on the design in this folder"
   • "Add a hero section with a video background"
   • "Set my global colors to navy and gold"

The skill auto-loads, and Claude already knows how to drive Elementor correctly.

What this can and can't do

Can do:

• Create pages, set them as the homepage
• Build sections — heroes, listings grids, neighborhoods, stats, journals, contact
• Set Elementor global colors and typography
• Add containers, headings, images, buttons, tabs, accordions, dividers
• Drop in custom HTML/CSS for things native widgets can't do
• Edit existing pages, find elements by ID, update settings, restructure layouts
• Work on local AND live WordPress sites

**With Elementor Pro (auto-detecte