Claude-to-WordPress Native

Offline Claude Code toolchain that emits a Hello Elementor child theme ZIP. A companion plugin (CTW Native) installs the free stack and imports pages so Edit with Elementor works.

Getting started · CLI reference · Issues · Contributing

Claude Code only. Claude does not edit the site after install.

Disclaimer: Theme quality depends on the Claude model and the prompt. This tool is a bridge between Claude output and Elementor Free editing.

Table of contents

• About
• Built with
• Getting started
• Usage
  • Claude Code workflow
  • Web-dev flow
  • Media
• Local development
• Contributing
• License
• Acknowledgments

---

About

The CLI writes an uploadable Hello Elementor child theme. The companion plugin (ctw-native) installs Hello Elementor and the declared free stack, then imports the package once.

Artifact	Role
plugin/ (ctw-native)	One-click stack install + one-shot import
Child theme ZIP from ctw generate	Hello child + ctw-package.json + media
Claude Code skills	/ctw-native and /ctw-native-check via npx … skill

Surface	Tool
Pages and posts	Edit with Elementor (Free widgets only)
Header and footer	ElementsKit Free Header Footer (built in WordPress after import)
Shop / cart / checkout	Elementor Free pages + shortcodes; single/archive use child PHP templates
Dummy products	Up to 4 via products add / woocommerce.products
Extra CSS	Appearance → Customize → Additional CSS

Built with

TypeScript · Node.js 20+ · WordPress · Elementor Free · Hello Elementor · WooCommerce (optional)

Getting started

Requires Node.js 20+.

Install the latest release (0.2.2):

npx -y claude-to-wordpress-native skill

Write an uploadable WordPress plugin ZIP into the current project (make a folder/directory/repo first):

npx -y claude-to-wordpress-native plugin-zip

This creates ./ctw-native.zip. In WordPress: Plugins → Add New → Upload Plugin.

Pull images from Unsplash, Pexels, or a direct https URL into ./media (optional --package updates media[]) OR leave it to Claude Code itself:

npx -y claude-to-wordpress-native media fetch \
  --url "https://images.unsplash.com/photo-…" \
  --id hero \
  --package ./ctw-package.json

Or set media[].sourceUrl and run media sync / generate (auto-fetches missing files).

CLI flags and outputs: docs/cli.md.

---

Usage

Claude Code workflow

After skill (or init) installs the skills, use the slash commands in this order:

1. Run /ctw-native with your website prompt in Claude Code. Claude writes ctw-package.json, media, WPCode Free snippets, and the rest of the package.
2. Run /ctw-native-check. That runs check: schema, WPCode Free locations, native-Elementor style policy (no page CSS snippets, Woo-only CSS selectors, no widget <style> / _css_classes / custom_css), and CSS structure (unclosed {, escaped >). Fix every error and re-run /ctw-native-check until it passes.
3. Tell Claude to generate the child theme zip file for WordPress.

Web-dev flow

1. Run npx -y claude-to-wordpress-native plugin-zip and upload ctw-native.zip (activate the plugin).
2. In Claude Code, run npx -y claude-to-wordpress-native skill (or init). Use /ctw-native to build the package, then /ctw-native-check until it passes, then generate a site ZIP.
3. Upload and activate the child theme (Template: hello-elementor).
4. Open CTW Native → Setup. Use the Install WooCommerce switch when you need a shop (auto-on if the package enables it). Install the stack. Import once.
5. Hand the site to the client.

After uploading or activating a new Claude theme

Whenever you upload or activate a new or regenerated child theme from Claude:

1. Open CTW Native → Setup.
2. Click Wipe generated content (required if a previous import exists; does not delete Customizer Additional CSS).
3. Click Import package (one-shot) to load the new theme package into Elementor.

Activating any theme (CTW child or not) automatically purges WordPress, Elementor, and common page caches so the new theme is shown.

Re-import is refused while generated pages exist. Wipe first to regenerate.

Media

Source	How
Local / Claude-attached files	Copy into ./media/, list in media[], reference { "id": "<media.id>", "url": "" } on image widgets
Unsplash / Pexels / https	media fetch --url … --id … or media[].sourceUrl + media sync / generate

Only https:// image URLs. Remotes are downloaded into ./media/ before the child ZIP is built. Live CDN URLs are not left in Elementor settings.

Supported Elementor Free widgets

heading, image, text-editor, video, button, divider, spacer, google_maps, icon, image-box, icon-box, star-rating, image-carousel, image-gallery, icon-list, counter, progress, testimonial, tabs, accordion, toggle, social-icons, alert, html, shortcode, menu-anchor, sidebar.

Layout uses Elementor container (content_width: full, native container_type grid or flex). Forms → MetForm. Header/footer → ElementsKit.

Plugins installed by setup

Always: Elementor, ElementsKit Lite, MetForm, WPCode Free (insert-headers-and-footers on wordpress.org — not WPCode Pro).

Optional: WooCommerce when woocommerce.enabled is true in the package, or when the Setup Install WooCommerce switch is turned on. Shop packages may include branded shop/cart/checkout Elementor pages, up to 4 dummy products, and WPCode Free snippets (css | js | html | php). CSS snippets are Woo-only (.woocommerce / .ctw-woo-*). CSS/JS/HTML use header or footer only; everywhere is PHP-only.

Parent theme: Hello Elementor from wordpress.org (not vendored).

---

Contributing

• Obtain: npx -y claude-to-wordpress-native, or clone this repository.
• Bug reports and enhancements: GitHub Issues.
• Contribute: pull requests. See CONTRIBUTING.md for the process and coding standards.
• Security: SECURITY.md. Do not file public issues for undisclosed vulnerabilities.
• Changelog: CHANGELOG.md and GitHub Releases.

License

GPL-2.0-or-later. See LICENSE and NOTICE.

Acknowledgments

README structure adapted from Othneil Drew’s Best-README-Template.

Elementor Free document and persist patterns adapted from Mian Shahzad Raza’s EMCP Tools / elementor-mcp (GPL-2.0-or-later). Parent theme: elementor/hello-theme.