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

Agentic Code Generation with OpenAI Codex CLI — A Knight’s Tour Walkthrough

Hands-On with OpenAI Codex CLI

Agentic Code Generation with OpenAI Codex CLI

A step-by-step walkthrough of using OpenAI’s agentic coding tool to scaffold, solve, test, and visualise the classic Knight’s Tour chess problem — entirely through natural language prompts.

This post assumes you have Codex CLI installed and authenticated. We’ll be working in three phases, each driven by a carefully crafted Codex prompt.

♞ What is the Knight’s Tour Problem?

The Knight’s Tour is a classic puzzle from combinatorics and graph theory: given an n×n chessboard and a knight placed on any starting square, can the knight visit every square on the board exactly once using only valid knight moves? A knight moves in an L-shape — two squares in one direction and one square perpendicular, giving it up to eight possible moves from any position.

The problem has been studied for over a thousand years. Arab mathematicians documented it as early as the 9th century, and Leonhard Euler conducted a systematic mathematical analysis in 1759. There are two variants: an open tour, where the starting and ending squares differ, and a closed (re-entrant) tour, where the knight can return to its starting square in one move. On the standard 8×8 board, there are over 26 trillion distinct open tours.

From an algorithmic standpoint, the Knight’s Tour is a special case of the Hamiltonian path problem on a graph, where each square is a node and edges connect squares reachable by a knight move. Finding a Hamiltonian path is NP-complete in general, but the regular structure of the chessboard makes efficient heuristics possible.

The most well-known heuristic is Warnsdorff’s rule (H.C. von Warnsdorff, 1823): at each step, move to the unvisited square that has the fewest onward moves. This greedy approach runs in linear time relative to the number of squares and finds a tour almost always on boards of size 5×5 and above — which is exactly what we’ll ask Codex to implement.

🗺️ What We’re Building

By the end of this walkthrough, we’ll have a fully working Python application with three layers built up incrementally through Codex prompts:

PhaseWhat Codex BuildsOutput
Phase 1Core solver using Warnsdorff’s heuristicCLI app, ASCII board output
Phase 2Pytest test suite and colourised terminal outputANSI colour board, passing tests
Phase 3Flask web app with animated HTML canvasInteractive browser visualisation

⚙️ Prerequisites

Before starting, make sure you have:

  • Codex CLI installed (brew install --cask codex or npm i -g @openai/codex)
  • Authenticated with a ChatGPT Plus/Pro account or an OpenAI API key
  • Python 3.10+ available in your shell
  • Git installed on your machine (see Project Setup below if you haven’t configured it yet)

📁 Project Setup

We’ll use Git throughout this guide as a safety net — you can git diff to review what Codex changed, or revert entirely if a phase goes wrong. If this is your first time using Git on this machine, configure your identity first:

git config --global user.name  "Your Name"
git config --global user.email "[email protected]"

This only needs to be done once. To verify your settings at any time:

git config --global --list

Now create the project directory, initialise the repo, and add an empty conftest.py in the root. The conftest.py file signals to pytest that the project root is the base directory, which allows it to resolve imports like from knight_tour import solve correctly from within the tests/ subdirectory:

mkdir knights-tour && cd knights-tour
git init
touch conftest.py
git commit --allow-empty -m "initial commit"

With the repo ready, launch Codex from inside the project directory:

codex

Once the TUI loads, your very first prompt should be to generate an AGENTS.md file. This acts as a standing project-level system prompt — Codex reads it automatically at the start of every future session, so you don’t have to repeat your conventions each time.

📝 Codex Prompt — Generate AGENTS.md

“Create an AGENTS.md file in the project root for a Python CLI and web application project. Include the following standing instructions: use Python 3.10+ with type hints throughout; place all tests in a /tests directory using pytest; never use global mutable state; prefer functions over classes unless OOP is genuinely the better fit; handle all CLI arguments with argparse; use Flask for any web routes; keep each module focused on a single responsibility. Format it as a markdown file with a brief intro line followed by a bullet list.”

Codex will create the file and show you the diff to review. Accept it, then commit before moving to Phase 1. Every subsequent Codex session in this directory will pick up these rules automatically.

💡 Why prompt Codex to write AGENTS.md instead of writing it yourself? Two reasons. First, you describe your intent conversationally rather than worrying about format. Second, it sets the right mental model for the rest of the guide — Codex writes the files, you review the diffs.

You can also update it at any time: “Add a rule that all functions must have docstrings” or “Update AGENTS.md to say we’re now using FastAPI instead of Flask” — Codex will edit the file in place and show you the diff.

Phase 1 — Core Solver

Still in the same Codex session, enter the Phase 1 prompt. Codex already has the project context from AGENTS.md, so you can get straight to the point:

📝 Codex Prompt — Phase 1

“Create a Python CLI app that solves the Knight’s Tour problem. Use Warnsdorff’s heuristic: at each step, move to the unvisited square with the fewest onward moves. The board size and starting position should be configurable via argparse using the argument names –size (default 8), –row (default 0), and –col (default 0). Do not use single-letter short flags. The solver should return None if no tour is found. Display the completed board as a grid of move numbers, right-aligned. Save the solver logic in knight_tour.py and the entry point in main.py. Include a requirements.txt (even if empty for now) and a .gitignore for Python.”

Codex will show you its plan before making any changes. In Auto mode, you’ll see it create each file with a diff preview. Here’s a simplified version of what the generated knight_tour.py looks like:

MOVES = [(2,1),(2,-1),(-2,1),(-2,-1),(1,2),(1,-2),(-1,2),(-1,-2)]

def get_neighbours(x, y, n, visited):
    return [(x+dx, y+dy) for dx,dy in MOVES
            if 0 <= x+dx < n and 0 <= y+dy < n
            and not visited[x+dx][y+dy]]

def solve(n, start_x, start_y):
    visited = [[False]*n for _ in range(n)]
    board   = [[-1]*n   for _ in range(n)]
    x, y = start_x, start_y
    visited[x][y] = True
    board[x][y]   = 0
    for move in range(1, n*n):
        neighbours = get_neighbours(x, y, n, visited)
        if not neighbours:
            return None
        x, y = min(neighbours,
                   key=lambda p: len(get_neighbours(p[0],p[1],n,visited)))
        visited[x][y] = True
        board[x][y]   = move
    return board

Run it in a separate terminal to verify:

python3 main.py --size 8 --row 0 --col 0

You should see a numbered 8×8 grid where each number represents the move order of the knight. Commit the result before moving to Phase 2.

💡 Approval Flow: In Codex’s default Auto mode, you’ll see a diff for each file before it’s written. Press A to accept or R to reject. If Codex proposes something you don’t want, reject it and follow up with a corrective prompt — it retains full context.

Phase 2 — Tests & Colourised Output

In the same Codex session, enter the next prompt. You don’t need to re-explain the project — Codex still has full context from Phase 1.

Before entering the prompt, install pytest in a separate terminal. Codex will attempt to run the test suite as part of its workflow, so the package must be present beforehand:

pip3 install pytest
📝 Codex Prompt — Phase 2

“Now add two things. First, create a test suite in tests/test_knight_tour.py using pytest. Test that: (1) solve() returns a valid tour where every integer from 0 to n²−1 appears exactly once, (2) consecutive moves are a valid knight’s move apart, (3) solve() returns None for n=2 which has no solution. Second, add a new function print_coloured_board() in knight_tour.py that uses ANSI escape codes to colour the board — alternate between a light and dark background for a chess-style pattern, with white text for the move numbers. Call it from main.py instead of format_board() when –colour flag is passed.”

Codex will generate the test file and extend knight_tour.py with the colour function. Key tests:

import pytest
from knight_tour import solve

def is_valid_knight_move(x1, y1, x2, y2):
    dx, dy = abs(x2-x1), abs(y2-y1)
    return (dx, dy) in {(1,2),(2,1)}

@pytest.mark.parametrize("n,r,c", [(5,0,0),(6,1,1),(8,0,0),(8,3,4)])
def test_valid_tour(n, r, c):
    board = solve(n, r, c)
    assert board is not None
    flat = sorted(v for row in board for v in row)
    assert flat == list(range(n*n))

def test_no_solution_n2():
    assert solve(2, 0, 0) is None

Run the tests in a separate terminal to verify. If you created conftest.py in the project root during setup, pytest will resolve imports correctly:

pytest tests/ -v

If you see a ModuleNotFoundError: No module named 'knight_tour', use the module invocation instead, which explicitly adds the project root to sys.path:

python3 -m pytest tests/ -v

And try the colour flag:

python3 main.py --size 8 --colour

Phase 3 — Flask Web App with Animated Visualisation

Now we go beyond the terminal. In the same session (or a fresh one — Codex resumes from codex resume --last), enter the Phase 3 prompt:

📝 Codex Prompt — Phase 3

“Add a Flask web app in app.py. It needs two routes: GET / serves a single-page HTML form where users can input board size (5–10) and starting row/col. POST /solve accepts these inputs, runs the solver, and returns the board as JSON. The HTML page should also contain a JavaScript canvas visualisation that animates the knight’s path one move at a time when the solution arrives — draw the board as a grid, colour visited squares progressively, and draw a ♞ symbol on the current square. Add flask to requirements.txt.”

Codex generates app.py and embeds the full HTML/JS using Flask’s render_template_string. The key backend endpoint:

from flask import Flask, request, jsonify, render_template_string
from knight_tour import solve
app = Flask(__name__)

@app.route("/solve", methods=["POST"])
def solve_tour():
    data = request.get_json()
    n, row, col = int(data.get("size",8)), int(data.get("row",0)), int(data.get("col",0))
    if not (5 <= n <= 10):
        return jsonify({"error": "Board size must be between 5 and 10"}), 400
    board = solve(n, row, col)
    if board is None:
        return jsonify({"error": "No solution found"}), 422
    return jsonify({"board": board, "n": n})

Install Flask and run:

pip3 install flask
python3 app.py

Visit http://localhost:5000, choose your board size and starting square, hit Solve, and watch the knight’s path animate across the canvas.

🔄 Iterating Further — More Prompt Ideas

Once your three-phase app is working, you can keep iterating in the same session. Here are some prompts to take it further:

GoalFollow-up Prompt
Speed comparison“Add a backtracking solver as an alternative to Warnsdorff’s. Add a –solver flag to switch between them, and time both with Python’s timeit.”
Export result“Add a –export flag to main.py that saves the board as a CSV and also renders it as a PNG using matplotlib, with the knight path drawn as a line.”
User clicks board“Update the web app so users click a cell on the canvas to set the starting position instead of using the form fields.”
Code review“Review the current codebase for edge cases, type annotation completeness, and any issues with the input validation in app.py.”

✅ Effective Prompting Tips for Codex

A few patterns that made a noticeable difference in the quality of output across this walkthrough:

TipWhy It Helps
Name your files explicitlyCodex won’t guess at naming conventions. Saying “save to knight_tour.py” prevents it from choosing arbitrary filenames.
Specify what None/failure meansWithout “return None if no tour is found,” Codex might raise an exception instead — a valid choice but harder to test.
Bundle related changes in one promptPhase 2 added tests and colour output together. Codex handles multi-file tasks well when given in a single cohesive prompt.
Keep sessions alive for follow-upsDon’t exit and re-enter. Staying in the same session means Codex retains full context — you can make corrections without re-explaining the project.
Use AGENTS.md for standing rulesAnything you’d say in every prompt belongs in AGENTS.md. It keeps prompts shorter and ensures consistent style across sessions.

📁 Final Project Structure

knights-tour/
├── AGENTS.md
├── conftest.py           ← empty, anchors pytest to project root
├── .gitignore
├── requirements.txt      ← flask
├── knight_tour.py        ← solver + display logic
├── main.py               ← CLI entry point
├── app.py                ← Flask web app
└── tests/
    └── test_knight_tour.py

What’s worth noticing in this walkthrough is the workflow rhythm: each Codex prompt builds on the last without re-explaining context, and the AGENTS.md file silently enforces project conventions so you don’t have to. The three phases took roughly 15 minutes end-to-end, most of which was reviewing diffs and running tests rather than writing code.

The Knight’s Tour is just the illustration. The same prompt-iterate-commit loop applies to any project — and the more you invest in a good AGENTS.md upfront, the more useful each Codex session becomes.

What is Agentic Workflow? Discover How AI Enhances Productivity

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