Publishing to WordPress with Claude and the WordPress MCP Connector

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.

1. Prerequisites

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

RequirementDetails
Claude account on claude.aiFree tier works; a Pro account gives longer contexts useful for large HTML posts.
WordPress.com siteThe MCP connector works with WordPress.com-hosted blogs. Self-hosted WordPress.org sites are not directly supported by the connector.
WordPress MCP connector enabledIn 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.net 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: Replace SVG with HTML-native layout (see Problems 6 and 7 for the full technique). Instruction: “Do not use SVG. Use CSS flexbox and inline-block spans for all diagrams.”

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: Multi-wire circuit diagrams with vertical connectors require position:absolute

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.

Fix: A 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, 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]

Step 3 — Review the artifact in claude.ai

Review layout, colours, and diagram rendering. Verify no <style> or <script> tags appear. Check that circuit wires touch gate symbols directly.

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

DoDon’t
Use style="..." on every elementUse <style> blocks or CSS classes
Use display:flex + inline-block for single-wire gate diagrams and vectorsUse &nbsp; spacing or Unicode box-drawing characters for alignment
Use position:relative wrapper + position:absolute connector for multi-wire circuits; wire stubs touching symbols directlyUse border-top/border-bottom on table cells to simulate vertical connectors
Use <div style="display:table-cell"> to avoid WordPress theme td padding overridesRely 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 paramsUse uppercase "order": "DESC"
Post as draft first and preview in WordPressPublish directly without previewing the rendered block
Let Claude auto-select categories and tagsCreate 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. ✨

SingIDBot — Telegram ID Retrieval Bot for OpenClaw Topic Configuration

SETUP GUIDE
Build and deploy SingIDBot — a Telegram bot that retrieves Chat IDs and Topic Thread IDs, with a Singlish personality — on PythonAnywhere.

SingIDBot — Telegram ID Retrieval Bot for OpenClaw Topic Configuration

If you have been working through the OpenClaw Telegram integration guide, you already know that one of the trickiest steps is obtaining the correct Chat ID and Topic Thread ID before you can configure your bot endpoints. Getting those IDs wrong means your bot silently sends messages into the void — no errors, no feedback, just nothing arriving in the right place.

SingIDBot was built specifically to solve that problem. Drop it into any Telegram chat or group, fire the /getids command, and it will instantly report back the Chat ID and — crucially — the message_thread_id for whichever topic the command was sent from. No fiddling with Telegram’s Bot API directly, no JSON parsing, no guesswork.

Beyond the ID retrieval utility, SingIDBot has a second personality: it responds to free-text messages in Singlish — Singapore’s beloved colloquial English creole — cycling through randomised phrases like “Aiyoh, you finally came! Welcome lah!” and “Wah, interesting leh. Tell me more can?” This makes the bot noticeably more fun to test in group chats, and also serves as a practical demonstration of keyword-based message classification in python-telegram-bot v20+.

This guide walks through the complete source code, explains each architectural decision, and then covers deployment on PythonAnywhere including the free-tier network restrictions you will inevitably hit and exactly how to handle them.

Prerequisites
Requirement Details
Python 3.10+ Required for python-telegram-bot v20+ async support. PythonAnywhere provides Python 3.10 on all plans.
python-telegram-bot v20+ The async-native version of the library. Install with pip install python-telegram-bot. Version 20 introduced the Application.builder() pattern used throughout this bot.
Telegram Bot Token Create a new bot via @BotFather on Telegram. Send /newbot, follow the prompts, and copy the token. Keep it secret.
PythonAnywhere account A free Beginner account is sufficient to run and test the bot, but has an important network restriction covered in Section 3. A paid plan removes that restriction entirely.
Section 1 — What SingIDBot Does

The message_thread_id Mechanism

Telegram supergroups can be divided into named Topics, each identified by a message_thread_id. When a message is sent inside a topic, Telegram attaches this integer to the message object. When sent outside any topic, the field is absent entirely — not zero, not null, but genuinely missing.

This is the exact value OpenClaw requires to route notifications to the correct topic thread. SingIDBot’s /getids command reads message_thread_id from the incoming message and reports it in plain text for direct copy-paste into your configuration.

Because the field may be absent, the code uses getattr(update.effective_message, ‘message_thread_id’, None) rather than direct attribute access, which would raise an AttributeError in non-topic contexts.

The Singlish Responder

Any free-text message (not a command) triggers the singlish_chat handler. It classifies the message into greeting, thanks, or default using keyword matching, then picks a random phrase from the corresponding pool. A guard clause returns early if the message starts with / or was sent by the bot itself, preventing an infinite echo loop.

Section 2 — Code Walkthrough

2.1 Logging Setup

Two handlers run simultaneously: a FileHandler writing UTF-8 lines to singidbot.log, and a StreamHandler for the console. On PythonAnywhere you can watch live output in the bash session and audit the full log file afterward.

LOG_FILE = "singidbot.log"
logging.basicConfig(
    format="%(asctime)s [%(levelname)s] %(name)s: %(message)s",
    level=logging.INFO,
    handlers=[
        logging.FileHandler(LOG_FILE, encoding="utf-8"),
        logging.StreamHandler(),
    ],
)
logger = logging.getLogger(__name__)
Tip: The encoding=”utf-8″ argument is essential if any Telegram usernames contain non-ASCII characters. Without it, a single emoji in a username can crash the logger with a UnicodeEncodeError.

2.2 Singlish Response Bank

SINGLISH_RESPONSES maps category keys to phrase lists. get_singlish_response() uses dict.get() with a “default” fallback so unknown categories never raise a KeyError, and random.choice() picks uniformly from the pool.

SINGLISH_RESPONSES = {
    "greeting": [
        "Wah, you here ah! Come come, sit down lah!",
        "Eh hello! Long time no see, how are you?",
        "Aiyoh, you finally came! Welcome lah!",
        "Oi! Good to see you sia. What can I help you?",
    ],
    "thanks": [
        "Aiyah, no need to thank one lah!",
        "Wah, so polite! Welcome lah, anytime!",
        "No problem one! Next time also can help you.",
        "Eh, paiseh lah - that is what I am here for!",
    ],
    "default": [
        "Hah? Can repeat or not? I blur blur lah.",
        "Wah, interesting leh. Tell me more can?",
        "Aiyoh, I also dunno how to answer you sia.",
        "Got it lah! But I not so sure about that one.",
        "Eh, you very clever leh. I learn from you!",
    ],
}

def get_singlish_response(category):
    pool = SINGLISH_RESPONSES.get(category, SINGLISH_RESPONSES["default"])
    return random.choice(pool)

2.3 log_activity() Async Helper

log_activity() is declared async to match the handler context. It resolves the user’s display identifier to @username or numeric id, and emits a structured log line with a UTC ISO-8601 timestamp.

async def log_activity(user, event_type, metadata):
    user_info = (
        f"@{user.username}" if user and user.username
        else f"id={user.id}" if user
        else "unknown"
    )
    timestamp = datetime.now(timezone.utc).isoformat()
    logger.info(
        "[%s] event=%s user=%s metadata=%s",
        timestamp, event_type, user_info, metadata
    )

2.4 /start and /help Handlers

Both handlers log the event first, then compose and send a reply. /start personalises the greeting using user.first_name with a fallback to “friend”, prepending a random Singlish greeting to make every first interaction slightly different.

async def start(update, context):
    user = update.effective_user
    await log_activity(user, "START", {"chat_id": update.effective_chat.id})
    greeting = get_singlish_response("greeting")
    name = user.first_name if user and user.first_name else "friend"
    welcome_text = (
        f"{greeting}\n\nEh {name}, I am *SingIDBot* lah!\n\nCommands:\n- /start\n- /help\n- /getids"
    )
    await update.message.reply_text(welcome_text, parse_mode="Markdown")

async def help_command(update, context):
    user = update.effective_user
    await log_activity(user, "HELP", {"chat_id": update.effective_chat.id})
    await update.message.reply_text("*SingIDBot Commands* lah!\n/start /getids /help", parse_mode="Markdown")

2.5 /getids Handler

The key line is the getattr call. Telegram only populates message_thread_id when a message arrives inside a topic thread — in a regular chat the attribute simply does not exist. getattr with a None default handles this safely without raising AttributeError.

async def get_ids(update, context):
    user = update.effective_user
    await log_activity(user, "ID_RETRIEVAL", {"chat_id": update.effective_chat.id})
    chat_id = update.effective_chat.id
    topic_id = getattr(update.effective_message, "message_thread_id", None)
    response = f"Chat/Group ID: {chat_id}\n"
    if topic_id is not None:
        response += f"Topic ID: {topic_id}\n(This ID confirms the specific topic thread)"
    else:
        response += "Topic ID: Not available\n(Topics may not be enabled)"
    response += "\nTip: Record these IDs for configuring bot endpoints!"
    await update.message.reply_text(response, parse_mode="Markdown")
    await update.message.reply_text(f"{get_singlish_response('thanks')} Lah!")

2.6 singlish_chat Handler

Registered with filters.TEXT and ~filters.COMMAND. An internal guard also checks if the sender is the bot itself — without this, the bot’s own replies would trigger further replies in an infinite loop. Keyword classification checks thanks before greeting to avoid misclassification on mixed messages.

async def singlish_chat(update, context):
    user = update.effective_user
    await log_activity(user, "MESSAGE", {"text_preview": update.message.text[:50] if update.message else "N/A"})
    if (not update.message or update.message.text.startswith("/") or update.effective_user.id == context.bot.id):
        return
    user_text = update.message.text.lower().strip()
    if any(w in user_text for w in ["thanks", "thank", "appreciate"]):
        category = "thanks"
    elif any(w in user_text for w in ["hello", "hi", "hey", "oi", "wah", "alamak"]):
        category = "greeting"
    else:
        category = "default"
    await update.message.reply_text(get_singlish_response(category))

2.7 error_handler — Two-Tier Approach

Transient network issues (ProxyError, NetworkError, Conflict) are logged at WARNING level as a single line with no stack trace. Genuine bugs fall through to ERROR level with full exc_info traceback so they remain visible and actionable.

async def error_handler(update, context):
    error = context.error
    if isinstance(error, Exception):
        error_name = type(error).__name__
        error_msg = str(error)
        if "ProxyError" in error_msg or "NetworkError" in error_name:
            logger.warning("Network error (transient): %s", error_msg)
        elif "Conflict" in error_name or "terminated by other getUpdates" in error_msg:
            logger.warning("Conflict error (duplicate instance?): %s", error_msg)
        else:
            logger.error("Unhandled exception: %s: %s", error_name, error_msg, exc_info=context.error)

2.8 main() — Builder Chain, Timeouts, Handler Registration

All three timeout axes — connect, read, and write — are set to 30 seconds. Handlers are registered in priority order: specific commands first, then the catch-all text handler, then the error handler last.

def main():
    TOKEN = "YOUR_BOT_TOKEN_HERE"
    application = (
        Application.builder()
        .token(TOKEN)
        .connect_timeout(30)
        .read_timeout(30)
        .write_timeout(30)
        .build()
    )
    application.add_handler(CommandHandler("start", start))
    application.add_handler(CommandHandler("help", help_command))
    application.add_handler(CommandHandler("getids", get_ids))
    application.add_handler(MessageHandler(filters.TEXT & ~filters.COMMAND, singlish_chat))
    application.add_error_handler(error_handler)
    logger.info("--- SingIDBot Initializing ---")
    application.run_polling(allowed_updates=Update.ALL_TYPES)
Section 3 — Deployment on PythonAnywhere

Upload singidbot.py via the Files tab, open a Bash console, and run:

pip install python-telegram-bot --upgrade
python singidbot.py

Free-Tier Proxy Restriction

Free accounts route outbound traffic through a proxy that does not whitelist api.telegram.org. Outbound sendMessage calls can fail with httpx.ProxyError: 503 Service Unavailable. Inbound polling via getUpdates works fine — it is only the reply direction that is intermittently blocked.

In practice across four live sessions totalling over 5 hours, only 2 ProxyErrors occurred in 1800+ polling cycles. The error handler suppresses these to a single WARNING line so the log stays clean.

Options if you need reliable reply delivery: Upgrade to a paid PythonAnywhere plan (removes proxy restrictions entirely), or switch from polling to webhook mode via PythonAnywhere’s WSGI layer (more complex but works on the free tier).

Avoiding Duplicate Instance Conflicts

Telegram only allows one active getUpdates poller per token. Always kill the old process before restarting:

pkill -f singidbot.py
pgrep -a -f singidbot
python singidbot.py
Section 4 — Log Analysis

The bot was tested across four live sessions on PythonAnywhere’s free tier.

Session Duration Key Events Errors
Session 1 ~2 min First run. Hello received; /getids succeeded returning Chat ID 5024469893. 1 ProxyError on reply (full traceback, no error handler yet).
Session 2 ~3 min Error handler added. /help ProxyError suppressed to single WARNING. /getids worked. Singlish replies all succeeded. 1 ProxyError (WARNING only).
Session 3 ~14 min Extended run. Second /help succeeded. 47 consecutive clean polling cycles. 1 ProxyError (WARNING only).
Session 4 ~5 hours 1800+ log lines. Clean polling throughout. No conflicts, no crashes. 2 ProxyErrors total across the entire session.

SingIDBot is production-stable on the free tier. The intermittent ProxyError is a platform constraint, not a code defect, and the error handler keeps it from polluting the log.

Quick Reference
Command What it returns Notes
/start Personalised Singlish greeting and command list. Works in any chat context.
/help List of all available commands. Works in any chat context.
/getids Chat ID and Topic Thread ID (if inside a topic). Must be run inside the target topic to get a valid Thread ID.

✦ This article was generated with the assistance of Claude by Anthropic

What is Agentic Workflow? Discover How AI Enhances Productivity

https://masterdai.blog/exploring-agentic-workflows-a-deep-dive-into-ai-enhanced-productivity/