A Claude Code plugin and standalone skill that converts an HTML, CSS, and JavaScript project into a WordPress Block Theme with Full Site Editing, Interactivity API, and Block Bindings support.
Claude Code
> /plugin marketplace add siddik-web/wp-block-theme-converter> /plugin install wp-block-theme-converter@siddik-web
Codex
$ npx skills add siddik-web/wp-block-theme-converter -a codex
Cursor
$ npx skills add siddik-web/wp-block-theme-converter -a cursor
Gemini CLI
$ npx skills add siddik-web/wp-block-theme-converter -a gemini-cli
GitHub Copilot
$ copilot plugin marketplace add siddik-web/wp-block-theme-converter$ copilot plugin install wp-block-theme-converter@siddik-web
OpenCode
$ npx skills add siddik-web/wp-block-theme-converter -a opencode
Windsurf
$ npx skills add siddik-web/wp-block-theme-converter -a windsurf
A Claude Code plugin (and standalone skill) for converting any HTML/CSS/JavaScript project into a production-ready WordPress Block Theme (Full Site Editing).
Author: Md Siddiqur Rahman Version: 3.0.0 License: MIT
A real run, not a mock-up: one slash command turns a static landing page into a block theme, the bundled doctor checks it (5/5 passing), and the result runs in WordPress.
Watch the full-quality video (MP4) · Source page · Generated theme · How this demo was made
| Before: static HTML, CSS and JS | After: the generated theme in WordPress |
|---|---|
 |
Converts static HTML/CSS/JavaScript projects into complete, production-ready WordPress block themes that are:
| Command | Purpose |
|---|---|
/convert-to-wp-theme | Full conversion of HTML/CSS/JS project to complete block theme |
/scaffold-wp-theme | Create empty block theme scaffold (no source needed) |
/wp-pattern | Convert single HTML section into a registered block pattern |
/wp-theme-json | Generate theme.json from CSS custom properties / design tokens |
/wp-template | Convert single HTML page into FSE template |
/wp-block | Scaffold a custom block (block.json, edit.js, save.js/render.php, CSS) |
/wp-migrate | Migrate existing WP content (Classic Editor, ACF, widgets, CPTs, shortcodes) to block theme |
/wp-plugin-theme | Declare plugin dependencies and generate plugin-specific CSS / compatibility code |
/wp-variation | Generate a style variation (styles/*.json) — dark mode, color palette swap, font swap |
/wp-classic-to-fse | Convert an existing WordPress classic theme (PHP templates) to FSE block theme |
/wp-debug | Diagnose and fix FSE/block-theme failures — block validation errors, theme.json issues, patterns not showing, DB template overrides, PHP warnings, and more |
This repository is also a Claude Code plugin marketplace. Install it directly from GitHub:
# Run these inside Claude Code:
/plugin marketplace add siddik-web/wp-block-theme-converter
/plugin install wp-block-theme-converter@siddik-web
Installing the plugin registers everything at once:
/convert-to-wp-theme, /wp-debug, …)wp-block-theme-converter skill (auto-triggers on WordPress requests)wp-theme-reviewer agent for auditing generated themestheme.json validation hook that runs after editsManage or disable it any time with /plugin.
.skill (Options 2–4)Options 2–4 install the skill without the plugin system. Cloning the repo into a skills folder is not enough: the Markdown refers to bundled files as ${CLAUDE_PLUGIN_ROOT}/…, which only Claude Code's plugin loader fills in. Build the standalone package, which rewrites those paths to plain relative ones:
bash scripts/build-skill.sh
# → wp-block-theme-converter-v3.0.0.skill and wp-block-theme-converter-latest.skill
Build the package as above
Unzip it into your Claude Code skills directory:
unzip wp-block-theme-converter-latest.skill -d ~/.claude/skills/
Restart Claude Code or run claude reload
Verify: type any of the slash commands listed above
wp-block-theme-converter-latest.skillUnzip the built .skill so the wp-block-theme-converter/ folder sits in your skills directory. Path varies by environment:
~/skills/CLAUDE_SKILLS_DIR environment variable/convert-to-wp-theme
I have a 3-page landing site for "Acme Co".
Use Vite 6, no WooCommerce.
[paste HTML/CSS/JS]
/convert-to-wp-theme
Convert my Northaven Co. eCommerce design system to a WooCommerce block theme.
Include all six aesthetics as style variations.
[attach HTML files]
/wp-pattern
Convert this hero section into a WP block pattern:
<section class="hero">
<h1>Welcome</h1>
<p>Subheading</p>
<a href="#" class="btn">CTA</a>
</section>
/wp-block
Scaffold a "Testimonial Slider" custom block with server-side rendering,
an edit.js with InspectorControls, and per-block CSS.
/wp-classic-to-fse
Convert my existing classic PHP theme to a full FSE block theme.
The theme uses a custom page builder and ACF fields.
wp-block-theme-converter/ # Plugin root (also a marketplace)
├── .claude-plugin/
│ ├── plugin.json # Plugin manifest
│ └── marketplace.json # Marketplace entry (installable)
│
├── SKILL.md # The bundled skill (auto-triggers)
├── README.md # This file
│
├── commands/ # 11 slash command definitions
│ ├── convert-to-wp-theme.md
│ ├── scaffold-wp-theme.md
│ ├── wp-block.md
│ ├── wp-classic-to-fse.md
│ ├── wp-debug.md
│ ├── wp-migrate.md
│ ├── wp-pattern.md
│ ├── wp-plugin-theme.md
│ ├── wp-template.md
│ ├── wp-theme-json.md
│ └── wp-variation.md
│
├── agents/ # Subagents
│ └── wp-theme-reviewer.md # Audits a generated block theme
│
├── hooks/
│ └── hooks.json # PostToolUse theme.json validation
│
├── references/ # Detailed reference docs
│ ├── defaults.md # Default values for placeholders
│ ├── methodology.md # 10-phase conversion methodology
│ ├── modern-blocks.md # WordPress 6.5+ features (Interactivity API, Block Bindings, etc.)
│ ├── file-structure.md # Required output directory layout
│ ├── block-conversion-map.md # HTML → WP block lookup table
│ ├── theme-json-schema.md # theme.json v3 reference
│ ├── quality-rules.md # Non-negotiable do's and don'ts
│ ├── multi-turn-strategy.md # Splitting large projects
│ ├── woocommerce.md # WC-specific theming
│ ├── validation-checklist.md # Post-generation checks
│ ├── custom-blocks.md # Custom block development (block.json, edit.js, render.php)
│ ├── content-migration.md # Classic-to-block, WP-CLI, ACF, CPTs, page builder migration
│ ├── asset-optimization.md # Fonts, images, WebP, lazy load, Core Web Vitals
│ ├── plugin-compatibility.md # Plugin detection, CSS conflicts, caching compat
│ ├── interactivity-api-advanced.md # Shared store, server hydration, async, focus traps
│ ├── accessibility.md # WCAG 2.1 AA, ARIA, skip links, screen reader testing
│ ├── ci-cd.md # GitHub Actions, PHPCS, ESLint, Stylelint, deployment
│ ├── backward-compatibility.md # Feature availability by WP version, conditional loading
│ ├── e2e-testing.md # Playwright, visual regression, a11y scans, CI integration
│ └── i18n.md # i18n functions, plural forms, JS translations, RTL
│
├── templates/ # Reusable boilerplate
│ ├── style.css.tpl
│ ├── theme.json.tpl
│ ├── functions.php.tpl
│ ├── pattern-header.php.tpl
│ ├── template-skeleton.html.tpl
│ ├── package.json.tpl
│ ├── vite.config.js.tpl
│ ├── github-actions-ci.yml.tpl
│ └── patterns/
│ ├── hero.php.tpl
│ ├── features-grid.php.tpl
│ ├── testimonials.php.tpl
│ ├── pricing-table.php.tpl
│ ├── cta-section.php.tpl
│ ├── faq-accordion.php.tpl
│ ├── team-grid.php.tpl
│ └── stats-row.php.tpl
│
├── examples/ # Worked examples
│ ├── northaven-ecommerce.md # Multi-aesthetic WooCommerce theme
│ └── landing-page-simple.md # Simple SaaS landing page
│
└── scripts/ # Validation + packaging tooling
├── doctor.mjs # Runs all five theme-quality checks
├── validate-skill.mjs # Skill integrity linter
├── validate-plugin.mjs # Plugin packaging linter
└── hooks/
└── theme-json-postwrite.mjs # theme.json validation hook runner
The skill uses Claude's three-level loading:
This means Claude doesn't load the WooCommerce reference for a simple landing page conversion — it only loads what's relevant to the task.
Every conversion follows the same proven phases:
The skill automatically detects large projects and splits delivery across 3 turns:
Triggered when source has 10+ HTML pages OR WooCommerce OR multiple style variations.
Every output is governed by four non-negotiable principles:
Stars on GitHub
Helps you take a change from a rough idea or bug report through to a tested, reviewed result, with each step handled by a focused skill. Its skills cover pinning down domain terms, designing module interfaces, diagnosing hard bugs, and reviewing changes against your repo's coding standards.
@mattpocockA development methodology for coding agents that makes the agent brainstorm before building, follow plans, run parallel work and finish branches in a disciplined way. You get fewer skipped steps and more consistent results from your coding assistant.
@obraGives your coding agent a planning, testing and review routine to follow on every task. It plans before building, checks changes with tests, has a fresh reviewer look for regressions, and saves repeated wins as reusable skills.
@affaan-mDeveloper tools for working on the React codebase itself. Provides skills for extracting error messages, managing and debugging feature flags across release channels, running Flow type checks, and fixing lint and formatting issues before committing.
@facebookInstall it with the command on its page. It includes wp-block-theme-converter. Its skills do not fire on their own yet. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it