DEV Community

Malcolm Low
Malcolm Low

Posted on • Originally published at malcolmlow.com

Publishing to WordPress with Claude and the WordPress MCP Connector

#claude #wordpress #webdev #ai

Originally published at malcolmlow.com.

Several posts on this blog — including Word Embeddings Explained, SingIDBot, and the OpenClaw Telegram integration guide — were written, styled, and published entirely through Claude on claude.ai, using the WordPress MCP connector. This post documents exactly how that workflow operates, what problems arise, and how to resolve them.

The combination of Claude's HTML generation capability and the WordPress MCP connector creates a surprisingly smooth authoring pipeline, provided you know the constraints WordPress imposes on custom HTML blocks. Those constraints are the non-obvious part, and they are addressed in detail below.

1. Prerequisites

Requirement Details
Claude account on claude.ai Free tier works; Pro gives longer contexts useful for large HTML posts.
WordPress.com site The MCP connector works with WordPress.com-hosted blogs. Self-hosted WordPress.org is not directly supported.
WordPress MCP connector enabled In claude.ai, go to Settings → Integrations and enable the WordPress.com connector. Authenticate with your WordPress.com account.

2. The Overall Workflow

The end-to-end process has three stages. Claude handles all of them in a single conversation.

Stage Name What happens
1 Draft & Style Provide Claude with your content and request a WordPress HTML block with inline CSS only. No <style> tags.
2 Review Output Preview the rendered HTML in claude.ai artifacts. Request edits until the post looks correct.
3 Publish via MCP Ask Claude to post using the WordPress connector. It checks categories and tags, creates any missing ones, then submits as a draft for your review.

Prompt for Stage 1:

"Generate a WordPress post using a custom HTML block with inline CSS only. Do not use <style> tags, <script> tags, or SVG."

Prompt for Stage 3:

"Post this to myhlow.wordpress.com using the WordPress connector. Use appropriate categories and tags. Post as a draft first."

3. How the WordPress MCP Connector Works

The MCP connector gives Claude direct access to your WordPress.com REST API. When you ask Claude to post, it performs these operations internally:

  1. Loads the connector, resolving the WordPress.com:wpcom-mcp-content-authoring tool.
  2. Lists existing categories using categories.list to find IDs.
  3. Lists existing tags using tags.list to find or create tags.
  4. Creates missing terms using categories.create / tags.create if needed.
  5. Creates the post using posts.create with the HTML content, title, IDs, and status (draft or publish).
  6. Returns the preview and edit URLs so you can open the draft in WordPress immediately.

Post content must be wrapped in a wp:html block comment:

<!-- wp:html -->
<div style="...">...post content...</div>
<!-- /wp:html -->
Enter fullscreen mode Exit fullscreen mode

4. Problems Encountered — and How They Were Solved

Problem 1: WordPress strips <style> blocks entirely

What happened: Early posts used a <style> tag defining CSS classes. WordPress silently removed it on save, stripping all styling.

Fix: Every CSS rule must be a style="..." attribute. Instruction: "Use inline CSS only. Do not use <style> tags."

Problem 2: WordPress strips SVG elements

What happened: Inline SVG circuit diagrams were stripped on save, leaving blank spaces.

Fix: Replace SVG with HTML-native layout using CSS flexbox. Instruction: "Do not use SVG."

Problem 3: <script> tags are blocked

What happened: JavaScript interactivity was silently discarded by WordPress content sanitisation.

Fix: Replace all interactivity with pure HTML/CSS alternatives.

Problem 4: API parameter case sensitivity

What happened: Passing "order": "DESC" returned a validation error.

Fix: Always use lowercase: "order": "desc".

Problem 5: Duplicate categories and tags

What happened: Claude created duplicate taxonomy terms without checking first.

Fix: Always call categories.list and tags.list before any creation step.

Problem 6: &nbsp; spacing and Unicode box-drawing characters break alignment

What happened: Characters and &nbsp; spacing that looked correct in claude.ai artifacts misaligned in WordPress because the theme font renders them at inconsistent widths.

Fix: Replace character-based layout with CSS:

  • Single-wire gates: display:flex; align-items:center rows with inline-block wire spans and bordered gate boxes.
  • Column vectors: display:flex container with border-left/border-right bracket spans and <br> for rows.

Instruction: "Never use &nbsp; for alignment or Unicode box-drawing characters."

Problem 7: Multi-wire circuits with vertical connectors require position:absolute

What happened: The CNOT gate required a vertical line connecting a control dot (●) to an XOR circle (⊕) on a separate wire. border-top/border-bottom on table cells produced horizontal bars; rowspan="2" was visually correct but the theme's CSS overrode <td> padding in ways inline styles couldn't fix.

Fix: Three-part solution:

  • Use <div style="display:table-cell"> instead of <td> to bypass theme CSS selectors.
  • Two separate display:flex; height:28px rows in a position:relative wrapper, with a position:absolute; width:2px connector div.
  • Asymmetric wire stubs: the control dot (12 px) needs 21 px stubs; the XOR circle (20 px) needs 17 px stubs — keeping both symbol centres at the same x-coordinate.

5. Step-by-Step: Posting via Claude and WordPress MCP

Step 1 — Enable the WordPress Connector in claude.ai

Go to claude.ai → Settings → Integrations. Find the WordPress.com connector, click Connect, and authorise with your WordPress.com account.

Step 2 — Prompt Claude with the constraint set

Generate a WordPress post as a custom HTML block.
Use inline CSS only — no <style> tags, no <script> tags, no SVG.
Never use &nbsp; for alignment or Unicode box-drawing characters.
Use display:flex and inline-block spans for diagrams and vectors.
For multi-wire circuits: use position:relative wrapper + position:absolute connector.
Match the styling of: [URL of a reference post]
Topic: [your content here]
Enter fullscreen mode Exit fullscreen mode

Step 3 — Review the artifact in claude.ai

Verify layout, colours, and rendering. No <style> or <script> tags should appear.

Step 4 — Trigger the MCP posting

Post this to myhlow.wordpress.com using the WordPress connector.
Use appropriate categories and tags.
Status: draft
Enter fullscreen mode Exit fullscreen mode

Claude calls categories.list and tags.list, creates any missing terms, executes posts.create, and returns the draft URLs.

Step 5 — Preview in WordPress and publish

Open the draft URL. If the Custom HTML block renders correctly, click Publish.

6. Installing the Workflow as a Reusable Skill

All the constraints from this guide are packaged as a downloadable Claude Skill. Once installed, the skill auto-loads every time you start a WordPress publishing task.

  1. Enable Code Execution and File Creation — Settings → Capabilities → toggle on Code Execution and File Creation.
  2. Open the Skills page — https://claude.ai/customize/skills (browser only, not the mobile app).
  3. Upload the skill file — "+" → "+ Create skill" → "Upload a skill" → select wordpress-publish.skill → toggle it on.
  4. Trigger in any new chat — Say "publish to WordPress" and Claude loads all constraints automatically.

7. Quick Reference: Dos and Don'ts

Do Don't
Use style="..." on every element Use <style> blocks or CSS classes
Use display:flex + inline-block for diagrams and vectors Use &nbsp; or Unicode box-drawing characters for alignment
Use position:relative + position:absolute connector for multi-wire circuits Use border-top/border-bottom on table cells to simulate vertical connectors
Use <div style="display:table-cell"> Rely on <td> padding — theme CSS may override it
Wrap content in <!-- wp:html --> Use <svg> or <script> tags
Use lowercase "order": "desc" in API params Use uppercase "order": "DESC"
Post as draft first and preview in WordPress Publish directly without previewing
Let Claude auto-select categories and tags Create taxonomy terms without checking for existing ones
Set table header styles on <tr>, not <th> Apply background colours to <th> elements

Tip: Giving Claude the URL of an existing post and asking it to match the styling is the fastest way to maintain visual consistency across your blog. The Word Embeddings post and the SingIDBot guide were both created this way, borrowing section card layout, banner colours, and code block styles from earlier posts.

Top comments (0)