claude-wp-builder

---

How It Works

/wp-create  →  /wp-demo  →  /wp-init  →  /wp-header  →  /wp-section hero  →  /wp-seed  →  /wp-audit  →  /wp-finalize
     ↓             ↓            ↓              ↓                ↓                 ↓             ↓              ↓
  WordPress    Demo HTML    Scaffold      header.php     ACF fields +      Populate      Security,       Pre-delivery
  + database   for client   theme +       + nav CSS +    template +        all fields    SEO, a11y,      validation
  + server     approval     CLAUDE.md     ACF fields     section CSS       from demo     performance     checklist

Installation

Option 1: Plugin Marketplace (Recommended)

Step 1 — Add the marketplace:

/plugin marketplace add yojahny55/claude-wp-builder

Step 2 — Install the plugin:

/plugin install claude-wp-builder@claude-wp-builder

Or use the interactive UI: run /plugin, go to the Discover tab, and select claude-wp-builder.

Option 2: Direct from CLI

claude --plugin-dir /path/to/claude-wp-builder

Option 3: Project-level auto-install

Add to your project's .claude/settings.json so all collaborators get it automatically:

{
  "extraKnownMarketplaces": {
    "claude-wp-builder": {
      "source": {
        "source": "github",
        "repo": "yojahny55/claude-wp-builder"
      }
    }
  },
  "enabledPlugins": {
    "claude-wp-builder@claude-wp-builder": true
  }
}

Workflow

0. Set up the local environment (optional)

/wp-create --path=/var/www/html/my-project

Detects available tools (Docker, DDEV, Lando, Nginx, Apache, Caddy, PHP versions), lets you choose your environment, then downloads WordPress, creates the database, configures the web server, installs plugins, and generates a .wp-create.json manifest. Supports adopting existing WordPress installs.

1. Scaffold the project

/wp-init

Prompts for project name, slug, languages, industry. Copies the starter theme, replaces placeholders, generates .claude/CLAUDE.md with project config. When .wp-create.json exists, skips redundant questions and activates the theme via WP-CLI.

2. Create the demo

/wp-demo

Generates a responsive HTML demo (demo/index.html) for client approval. Uses frontend-design and ui-ux-pro-max skills for design quality. Sections are clearly separated with comments for easy WordPress conversion.

/wp-demo iterate

Re-read existing demo and iterate on changes.

2b. Or polish an existing demo

/wp-polish path/to/existing-mockup.html

Normalizes any HTML file into a plugin-compatible demo: detects sections, adds section delimiters, normalizes semantic HTML5, adds BEM class naming. Preserves the original at demo/original.html.

/wp-polish

Polish the existing demo/index.html in place.

3. Build header and footer

/wp-header
/wp-footer

Each reads the demo, dispatches specialized agents (wp-template, wp-css, wp-acf) to generate:

• Template files (header.php, footer.php)
• Navigation walker and menu registration
• CSS styles
• ACF fields added to the Header and Footer tabs in the settings page

4. Build sections

/wp-section hero
/wp-section services
/wp-section values
/wp-section contact

Each command generates three files in parallel:

• fields/<section>.php — ACF field definitions with bilingual support
• template-parts/section-<name>.php — PHP template consuming those fields
• CSS block appended to styles.css

Provide a screenshot for visual reference:

/wp-section hero /path/to/screenshot.png

CF7 Contact Forms: Sections named contact, contact-us, contacto, or get-in-touch automatically integrate Contact Form 7. Use the --cf7 flag to force integration for other sections. Generates CF7 forms with branded email templates per language, creates forms via WP-CLI with IDs injected into templates, and saves reference files to cf7/.

5. Add page templates