Ever found yourself wanting to add something to your WordPress post—like a FAQ section, table, or custom layout—only to realize the block editor doesn’t have a built-in feature for it?
That’s where custom HTML comes in handy.
And guess what? You don’t need to be a developer to make it work. With WordPress’s built-in Custom HTML block and a little help from AI tools like Claude (or ChatGPT), you can easily insert custom code into your posts—no coding background needed.
Let’s walk through how to do it, step by step.
✏️ Why Add Custom HTML to WordPress?
WordPress’s block editor (a.k.a. Gutenberg) offers around 100 default blocks, but sometimes you need something more specific—like:
- An interactive FAQ section
- A styled callout box
- A custom button with animations
- A form embedded from a third-party tool
In those cases, you can use the Custom HTML block to add your own code.
And thanks to tools like Claude AI, generating that HTML has never been easier—even if you don’t know a single line of code.
🧱 Step 1: Add the Custom HTML Block in WordPress
Here’s how to insert the Custom HTML block into your post or page:
- In the WordPress block editor, click the + icon to add a new block
- In the search bar, type “HTML”
- Select the block called Custom HTML


You’ll now see a blank HTML editor inside your post, ready for you to paste code into.

🤖 Step 2: Use Claude to Generate HTML Code
If you don’t already have custom code written—or don’t want to write it yourself—you can use Claude AI to generate it.
Don’t have a Claude account yet? It’s free to get started, with optional Pro plans if you need higher usage limits.

🧠 What to Ask Claude
Be specific when you make your request. For example:
“Create a simple FAQ section in HTML that has collapsible answers, uses a white background with black text, and keeps the first answer expanded by default.”
The more detail you provide, the better the result.
✨ Example: Adding a Custom FAQ Section
Let’s say you want to add a collapsible FAQ box to your post. Claude can generate that for you in seconds. Once it responds with code:
- Click the copy icon to copy the code
- Go back to your WordPress post
- Paste it into the Custom HTML block
- (Use Cmd + V on Mac or Ctrl + V on Windows)
✅ Your code is now live!
⚠️ What If the Code Doesn’t Look Right?
Let’s say Claude gives you code with a white background and… white text. 😬
No problem—just take a screenshot of the broken result and upload it into Claude (using the 📎 paperclip icon), then explain what needs fixing. Claude will usually revise and return a better version of the code.
You can also:
- Adjust styles manually if you’re comfortable with CSS
- Cross-check results using ChatGPT to refine or debug the code further
👀 Preview and Adjust as Needed
Once you’ve pasted your final HTML into the block, preview your post on the frontend to make sure everything looks right.
Remember: sometimes your WordPress theme’s global styles may override the styles in your HTML block. If something still looks off, you may need to add inline CSS or tweak the layout further (beyond the scope of this beginner guide).
✅ Key Takeaways
- The Custom HTML block in WordPress makes it easy to insert your own code
- AI tools like Claude or ChatGPT can generate code for you—fast
- Be specific with your prompts to avoid styling or functionality issues
- Test the results and refine as needed, using screenshots or multiple tools
- Expect a few trial-and-error rounds, especially for complex elements
💬 Final Thoughts
Adding custom HTML to WordPress is easier than ever—especially when you pair Gutenberg’s HTML block with the power of AI.
Don’t be afraid to experiment. Start with simple elements, test them, and keep improving. And if Claude’s result isn’t perfect the first time? Just ask again with more detail.
Got questions? Drop them in the comments and I’ll be happy to help you troubleshoot or brainstorm ideas.
0 Comments