Claude to WordPress: Connect Claude and Build Your Site
"Claude to WordPress" means one of two things. Either you want Claude to work on your WordPress site: read your content, draft posts, update pages. Or you've built something with Claude, in Claude Design, Claude Code or a chat, and it needs to become a real WordPress site.
This guide covers both. The first part is about connecting Claude to WordPress. The second is about turning a Claude build into a theme your team can edit. As of September 2026, neither happens with one click, and the right route depends on your setup.
Part 1: Connect Claude to WordPress
Claude talks to other software through the Model Context Protocol (MCP). WordPress doesn't speak MCP out of the box, so how you connect depends on where your site runs.
WordPress.com: the official connector
WordPress.com has an official Claude connector, launched in February 2026. You approve access with OAuth, and Claude can then analyse traffic, summarise comments, find outdated content and suggest improvements based on your real site.
Two limits matter: the connection is read-only, so Claude can't create, update or delete content through it, and it needs a paid WordPress.com plan.
Self-hosted WordPress: the MCP Adapter
For WordPress.org sites, the official route is the WordPress MCP Adapter. It needs WordPress 6.9 or later and builds on the Abilities API, which lets WordPress core, plugins and themes declare what they can do. The adapter turns those abilities into tools Claude can call, over WP-CLI or an HTTP endpoint on your site.
What Claude can then do depends on the abilities your site exposes. Several plugins, such as WPVibe and Royal MCP, and hosts like InstaWP package the setup for you, often with abilities for posts, pages, media and settings.
Before you connect
- Start on staging. Let Claude work on a copy before it touches the live site.
- Grant the minimum. Only expose the abilities and user role Claude actually needs.
- Keep a human in the loop. Review drafts before they're published.
One thing a connection doesn't do: it doesn't give you a new design or a theme. Claude can manage the content in WordPress, but the site still looks the way your theme makes it look. That's what Part 2 is about.
Part 2: Turn a Claude build into a WordPress site
Whether you designed a page in Claude Design, had Claude Code build a frontend or got a landing page in a chat, the result is code: HTML, CSS and JavaScript. WordPress needs a theme: templates for pages and posts, a header and footer, styles, and content stored in the database so editors can change it.
Claude Design doesn't have a WordPress export. It exports PDF, PowerPoint, HTML and Canva, hands projects to Claude Code, and its connectors include Wix, Lovable, Replit and Vercel, but not WordPress. So you choose a route. The question that decides it: who edits the site after launch?
What "in WordPress" should mean
A page that only looks right isn't the same as a site your team can run:
- Editable content. Can someone change a headline, an image or a button in the WordPress editor without touching code?
- Real templates. Do the header, footer, blog posts and pages share one layout, so a change applies everywhere?
- Blog and forms. Do posts, categories and forms work the WordPress way, or are they static copies?
- No lock-in. Does the site depend on one page-builder plugin forever?
These four are where the five routes differ.
1. Paste the HTML into a Custom HTML block
How: export standalone HTML, create a page in WordPress, add a Custom HTML block and paste the markup. Upload the images and fix the paths.
Good for: a single landing page you'll never touch again.
The catch: everything lives in one block of code. Editors can't change text without editing HTML, your theme's styles can clash with Claude's, and the header, footer and blog don't benefit at all. It's the answer people get on the WordPress.org forums, and it works, but it isn't a website.
2. Rebuild it in a page builder
How: use the Claude build as a reference and rebuild it in Elementor, Divi or similar, section by section.
Beaver Builder has made this less manual. Since September 2026, Beaver Builder AI can take a Claude Design as a packaged design kit, with sections as custom HTML modules, or through an MCP connector, where Claude builds the page with native Beaver Builder rows, columns, headings and buttons. The connector needs WordPress 6.9 or later, a public HTTPS site, the MCP Adapter plugin and Beaver Builder's paid plugins, and some sections still end up as custom HTML.
Good for: teams that already run their sites on a page builder.
The catch: the result belongs to the builder. Your site depends on that plugin and its licence, page-builder markup is heavier than a native theme, and moving away later means rebuilding.
3. Let Claude Code build a block theme
How: hand the project to Claude Code and ask for a WordPress block theme: theme.json for colours, fonts and spacing, HTML templates, template parts and block patterns. WordPress.com's Build with WordPress plugin for Claude adds WordPress-specific skills and connects to WordPress Studio for local previews.
People are doing this. Agency owner Dan Davies built a brand system in Claude Design and had Claude Code turn it into a theme on a fresh WordPress install within two hours. Developer advocate Jonathan Bossenger built and deployed a custom block theme with Claude, then spent two days and nine commits refining it. The biggest job was turning raw HTML into proper block markup, so the Site Editor could work with it.
Good for: developers who want full control and are happy to review code.
The catch: you're the quality control. First versions often keep chunks of raw HTML that editors can't change, and every fix goes through you. It also uses a good share of your Claude allowance.
4. Use an HTML-to-theme converter
How: export the project, upload the ZIP to a converter and install the theme it produces. WPConvert, for example, turns static HTML or a Vite project into a classic theme with header.php, footer.php and page templates.
Good for: getting a static design onto WordPress hosting quickly.
The catch: a converter translates files, not intent. Check how much of the content your team can actually edit in the WordPress editor, and whether the blog and forms are native. These tools only handle client-side code, not backends or server-rendered apps.
5. Convert it into a native WordPress theme with transjt
This is the route we built transjt for: a design or a repository goes in, and a native WordPress theme comes out, with the content in the editor.
From Claude Code or Claude Design:
- If you started in Claude Design, hand the project to Claude Code.
- Ask Claude Code to build the frontend in React with Vite, without server-side rendering. That's the one constraint that matters for conversion, and Claude Code follows it if you say so up front.
- Push the project to a GitHub repository.
- Connect the repository to transjt, choose WordPress and review the preview.
Through Figma: if your team reviews designs in Figma, bring the design there first, with Claude Code and Figma's MCP server or an HTML import tool such as html.to.design, and export it with the transjt Figma plugin to WordPress.
What you get:
- A native WordPress theme with PHP templates. No page-builder plugin, and the theme files are yours.
- Text, images and section order your team changes in the WordPress editor, without a developer.
- A native blog and native forms.
- Desktop, tablet and mobile layouts included.
- Ready within a few hours, not weeks.
Good for: agencies, marketing teams and anyone whose site is edited by people who don't write code.
The catch: it's a paid product. You can start free and see the preview before you pay; see pricing for the current plans.
The five routes compared
| Effort | Skills needed | Marketers can edit | Depends on | Best for | |
|---|---|---|---|---|---|
| Custom HTML block | Minutes | Basic HTML | No | Nothing, but it's one block of code | One throwaway page |
| Page builder | Hours to days | Page-builder know-how | Yes, in the builder | The builder plugin and licence | Sites already on a builder |
| Claude Code block theme | Hours to days | Developer | Partly, depends on the code | Your own review time | Developers who want control |
| HTML-to-theme converter | Minutes to hours | Basic WordPress | Check before you commit | The converted files | Static designs, quick hosting |
| transjt | A few hours | None | Yes, in the WordPress editor | No page builder; you own the theme files | Sites a team edits every week |
Status as of September 2026.
Which route should you pick?
- One landing page, no future edits: paste the HTML.
- Your sites already run on Elementor or Beaver Builder: stay in the builder.
- You're a developer and enjoy the review: let Claude Code build the block theme.
- A team or client will edit the site: convert it into a native theme, with transjt or by investing the developer time in route 3.
And once the site is live, connect Claude to it (Part 1), so Claude can help with the content from then on.
On HubSpot instead? Read Claude to HubSpot for the HubSpot connector and routes to a native HubSpot theme.
Five tips for a Claude build that converts well
- Design with real content. Real headlines and real image sizes show early where a layout breaks.
- Load your design system first. Claude Design applies your colours, fonts and components, which gives a converter or Claude Code clean, repeatable styles.
- Think in sections. Hero, features, testimonials, CTA: repeatable sections become reusable blocks in WordPress.
- Design the blog, too. Ask for a blog overview and a post page, not just the homepage.
- Keep it static. Logins, databases and server logic don't belong in the design. Build those with WordPress plugins instead.
Frequently asked questions
Yes. WordPress.com sites use the official Claude connector, which is read-only and needs a paid plan. Self-hosted sites on WordPress 6.9 or later use the official WordPress MCP Adapter or a plugin that packages it.
Not through the WordPress.com connector, which is read-only. On a self-hosted site, Claude can create and update content if the MCP setup exposes those abilities. Start on a staging site and review before publishing.
Yes. Claude Code can write a block theme with theme.json, templates and block patterns. Expect to review it: first versions often contain raw HTML that editors can't change in the Site Editor.
The best approach is to use transjt.ai for building the WordPress theme.
No. As of September 2026, Claude Design exports PDF, PowerPoint, HTML and Canva and hands projects to Claude Code. Its connectors include Wix, Lovable, Replit and Vercel, but not WordPress.
Yes. You can rebuild it in Elementor by hand, and Beaver Builder AI can build pages from a Claude Design through its MCP connector. The site then depends on that page builder.
It depends on the route. With pasted HTML they can't. With a page builder they can, inside the builder. With a native theme from transjt, they change text, images and section order in the WordPress editor.
Yes. HubSpot has an official Claude connector that can also import a Claude Design as a landing page, and the same Claude Code and Figma routes lead to a native HubSpot theme with transjt.