Malcolm Low | Practical AI, Computing & Quantum Research

Singapore-based practical guides, tutorials and experiments in AI, computing, modelling, simulation, optimisation and quantum computing, with research notes and hands-on workflows.

, , ,

Publishing to WordPress with Claude: Setup Guide for WordPress MCP Connector

Yes, Claude publishes directly to WordPress. Raw REST payloads risk corrupted block styles or auth errors. Follow the 5-minute MCP setup checklist →

·

Written by

Malcolm Low
Quick Answer & Key Insight

How Does the WordPress MCP Connector Work with Claude?

Yes, Claude publishes directly to WordPress. Bypassing the admin dashboard with unverified raw REST payloads risks corrupted block styles or auth errors. Follow our 5-minute official MCP connector configuration and publishing checklist below →

AI Productivity · Claude · WordPress MCP

Publishing to WordPress with Claude and the WordPress MCP Connector

A practical guide to using Claude on claude.ai to draft, style, and publish blog posts directly to your WordPress site — with hard-won lessons on what WordPress strips, and how to work around it.

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.

Prefer Codex on Android? The companion guide, How to Connect Codex to WordPress.com and Post from Termux on Android, covers Codex CLI setup, MCP endpoint debugging, OAuth token-storage difficulties in Termux, and a draft-first workflow.

1. Prerequisites

Before you begin, the following need to be in place:

Requirement Details
Claude account on claude.ai Free tier works; a Pro account gives longer contexts useful for large HTML posts.
WordPress.com site The MCP connector works with WordPress.com-hosted blogs. Self-hosted WordPress.org sites are not directly supported by the connector.
WordPress MCP connector enabled In claude.ai, go to Settings → Integrations (or Connectors) 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 1

Draft & Style

Provide Claude with your content and request a WordPress HTML block with inline CSS only. No <style> tags.

Stage 2

Review Output

Preview the rendered HTML in claude.ai artifacts. Request edits until the post looks correct.

Stage 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.

The key prompt to kick off Stage 1:

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

For Stage 3, once the HTML is finalised:

“Post this to malcolmlow.com using the WordPress connector. Use appropriate categories and tags. Post as a draft first.”

3. How the WordPress MCP Connector Works

The MCP (Model Context Protocol) 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 via an internal tool search, resolving the WordPress.com:wpcom-mcp-content-authoring tool.
  2. Lists existing categories using categories.list on your site to find IDs for any categories you want.
  3. Lists existing tags using tags.list to find or create the tags for the post.
  4. Creates missing categories or tags using categories.create / tags.create if they do not already exist on the site.
  5. Creates the post using posts.create, passing the HTML content, title, category IDs, tag IDs, and status (draft or publish).
  6. Returns the preview and edit URLs so you can open the draft in WordPress immediately.

The post content must be wrapped in a wp:html block comment:

<!– wp:html –>
  <div style=”…”>…post content…</div>
<!– /wp:html –>

4. Problems Encountered — and How They Were Solved

The workflow is productive but not without friction. Several issues emerged across multiple posts on this blog. Each is documented here with its root cause and fix.

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 written as an inline style="..." attribute. Claude handles this when instructed: “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: Use one of two approaches. Preferred for quantum circuits, Bloch spheres and detailed diagrams: draw the figure with Python and Matplotlib, export it as PNG or WebP, upload it to the WordPress Media Library, and add descriptive alt text. See Drawing Quantum Diagrams with Matplotlib on Termux When Qiskit Won’t Install. Alternative for simple circuits: build the diagram directly in HTML/CSS with flexbox and inline-block spans, using the techniques in Problems 6 and 7. Avoid inline SVG because WordPress may strip it.

Problem 3: <script> tags are blocked

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

Fix: All interactivity must be replaced with pure HTML/CSS alternatives. Standing instruction: “No <script> tags.”

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: Unicode box-drawing characters and &nbsp; spacing break alignment in WordPress

What happened: Unicode box-drawing characters inside <pre> elements and &nbsp; spacing in monospace divs looked correct in the claude.ai artifact but misaligned in WordPress — the theme’s font renders these characters at inconsistent widths.

Fix: Replace character-based layout with CSS layout:

  • Single-wire gates: display:flex; align-items:center rows with inline-block wire spans and bordered gate boxes.
  • Column vectors and matrices: 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. Use display:flex and inline-block spans instead.”

Problem 7: Building multi-wire circuit diagrams directly in HTML/CSS

What happened: The CNOT gate in the Phase Kickback post required a vertical line connecting a control dot (●) on one wire to an XOR circle (⊕) on another. Multiple approaches failed: border-bottom/border-top on adjacent table cells created horizontal bars instead of a vertical line; rowspan="2" in real <table> elements was visually correct but the WordPress theme’s CSS overrode <td> padding, creating unwanted row spacing that inline styles alone could not override.

HTML/CSS alternative: For a simple circuit that should remain editable inside the post, use this three-part solution:

  • Avoid theme td overrides: use <div style="display:table-cell"> instead of <td> — theme CSS targeting td selectors does not apply to divs.
  • Vertical connector: two separate display:flex; height:28px rows inside a position:relative; display:inline-block wrapper, with a position:absolute; width:2px connector div at a precisely calculated left value.
  • Asymmetric wire stubs: the control dot (12px wide) needs 21px wire stubs on each side; the XOR circle (20px wide) needs 17px stubs — these different widths keep both symbol centres at the same x-coordinate so the connector aligns with both. Wire stubs connect directly to the symbols with no padding gap between them.

Instruction: “For multi-wire circuits with vertical connections, use two flex rows in a position:relative wrapper with a position:absolute vertical connector. Wire stubs must touch each gate symbol directly with no padding gap.”

Tip: Let Claude Choose Categories and Tags Automatically

You do not need to specify categories and tags manually. Simply ask Claude to “use appropriate categories and tags” and it will inspect the existing taxonomy on your site, infer suitable terms from the post content, and create any new ones that are genuinely needed.

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

The following steps reproduce the exact workflow used to create and publish posts on this blog.

Step 1 — Enable the WordPress Connector in claude.ai

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

Step 2 — Prepare your content and prompt Claude

Provide Claude with the raw content, a reference post URL, and the constraint set:

Generate a WordPress post as a custom HTML block.
Use inline CSS only — no <style> tags, no <script> tags, and no inline SVG.
Never use &nbsp; for alignment or Unicode box-drawing characters.
For quantum circuits and diagrams, choose one method:
1. Preferred: draw with Python and Matplotlib, export as PNG or WebP, upload to WordPress, and add descriptive alt text.
2. Alternative for simple circuits: use HTML/CSS with display:flex and inline-block spans.
For multi-wire HTML/CSS circuits: use a position:relative wrapper and position:absolute connector.
Matplotlib workflow: https://malcolmlow.com/2026/09/11/draw-bloch-sphere-qiskit-termux-wordpress/
Match the styling of: [URL of a reference post]
Topic: [your content here]

Step 3 — Review the artifact in claude.ai

Review layout, colours, and diagram rendering. Verify no <style> or <script> tags appear. For a Matplotlib image, check that labels remain readable on mobile, nothing is clipped, and the image has descriptive alt text. For an HTML/CSS circuit, check that wires touch gate symbols directly and vertical connectors align.

Step 4 — Trigger the WordPress MCP posting

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

Claude will call categories.list and tags.list, create any missing terms, then execute posts.create and return 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, so you never need to paste the prompt template manually again.

Step 1 — Enable Code Execution and File Creation

Go to Settings → Capabilities and toggle on Code Execution and File Creation. This is required for Claude to process the skill file when you upload it.

Step 2 — Open the Skills page

Navigate to https://claude.ai/customize/skills. Note: the Customize menu is only available in the browser version of Claude, not the mobile app. On mobile, use the direct link or enable Desktop site in your browser menu.

Step 3 — Upload the skill file

Click “+” → “+ Create skill” → “Upload a skill” → select wordpress-publish.skill → toggle it on.

Step 4 — Trigger in any new chat

In any new conversation, say “publish to WordPress” and Claude automatically loads all the constraints from this guide.

7. Quick Reference: Dos and Don’ts

Do Don’t
Use style="..." on every element Use <style> blocks or CSS classes
Prefer Python and Matplotlib for quantum circuits, Bloch spheres and detailed diagrams; export as PNG or WebP and add descriptive alt text Embed inline SVG that WordPress may strip, or publish an image without checking mobile readability
For simple editable circuits, use the HTML/CSS alternative: display:flex and inline-block spans; add a positioned connector for multi-wire circuits Use &nbsp;, Unicode box-drawing characters, or table borders for alignment
Use <div style="display:table-cell"> to avoid WordPress theme td padding overrides Rely on inline padding on actual <td> elements — theme CSS may override it
Wrap content in <!-- wp:html --> Use <svg> elements 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 the rendered block
Let Claude auto-select categories and tags Create taxonomy terms without checking for existing ones first
Set table header styles on <tr>, not <th> Apply background colours to <th> elements

Tip: Use a Reference Post to Anchor the Style

Giving Claude the URL of an existing post on your blog and asking it to match the styling is the fastest way to maintain visual consistency. 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 in the series.

This article was generated with the assistance of Claude by Anthropic and posted via the WordPress MCP connector. ✨

For a complete coding example, see Vibe Coding the Knight’s Tour with OpenAI Codex CLI, which follows the prompts, implementation, tests, and diff-review workflow.

WordPress & Mobile AI Guides

Developer Hub
Related AI & CLI Agent Workflows

Explore more terminal automation, AI pair programming, and mobile agent guides:

FAQ
Frequently Asked Questions

How does the WordPress MCP connector publish from Claude?

The Model Context Protocol (MCP) server acts as a local bridge exposing tools to Claude Desktop, enabling Claude to format HTML blocks and execute authenticated REST API calls directly to WordPress.com.

Is it safe to use WordPress MCP connector with AI?

Yes, because the MCP connector enforces scoped OAuth permissions and allows drafting in ‘draft’ status for human review before publishing live.

// 2026 Model Context Protocol (MCP) Setup in claude_desktop_config.json
{
  "mcpServers": {
    "wordpress": {
      "command": "npx",
      "args": ["-y", "@automattic/mcp-wordpress-remote@latest"],
      "env": {
        "WORDPRESS_SITE_URL": "https://malcolmlow.com",
        "WORDPRESS_AUTH_TYPE": "application_password"
      }
    }
  }
}

Comments

Leave a comment

More posts