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 spacing break alignment in WordPress
What happened: Unicode box-drawing characters inside <pre> elements and 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 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.
Leave a comment