Add HTML to WordPress With the Custom HTML Block (and Claude?)

And these days it’s even easier to add it to your posts than it was a few years ago. Not only is there a default custom HTML block in WordPress, but most of us have free access to several AI tools that are capable of generating custom code. When you combine those two things together, adding HTML to your posts becomes as easy as 🍎 pie.

In this quick guide, I’m going to show you how you can use the HTML block along with Claude (a freemium AI tool) to customize your own posts. Let’s get started.

How to add custom HTML to your posts

As I just mentioned in the introduction, there are two parts to this.

Let’s break it down by taking it one step at a time.

How to add the custom HTML block

Because the custom HTML block is part of the default block library that’s included in WordPress Core, you can add it to your post like you would any other block.

Simply click the + sign inside a post and in the popup window, search for “html.” When you see the block populate, select it:

The block will then be added to your post, waiting for you to add some HTML to it:

With that out of the way, we can move on to the fun part: generating some custom code.

How to use Claude to generate custom code

Claude is an AI chatbot that’s similar to ChatGPT in many ways and if you prefer to use GPT, you can do that. The basic idea is going to be translatable, regardless of which one you use.

First things first, if you don’t already have a Claude account, then you need to sign up for one. It’s free. There’s an optional paid plan which grants you higher usage limits and some other benefits. The free plan should suffice for what we’re going to do here.

Once you’ve got an account (or logged into your existing account), you can give Claude instructions on what you want it to do.

So now the question is…what is it that you want to do? 🤔

Remember, the block editor already has close to 100 blocks as I said earlier. If you have something in mind that you’d like to add to your post, the first thing you should do is check if it’s not already available via one of the default blocks. If it’s not, then you can turn to Claude for assistance.

I will give you an example below to demonstrate how you can approach the process yourself.

HTML code example

You may have come across some FAQs (frequently asked questions) on various websites before. They are a popular feature in articles and for a while SEO specialists were recommending them as a means of getting featured in Google’s PAA (people also ask) boxes. The trend seems to be letting up a bit, but for example’s sake, let’s say you wanted to add your own FAQs to a post – there’s no default block for that!

This makes it a valid use case for using Claude.

See my prompt below and also Claude’s response along with the generated code:

When you do this yourself, try to think of every small detail and give it to Claude. Otherwise, it’ll be left to chance. When you get the initial code back, look for the small clipboard. Click it to copy the code to your own computer’s clipboard.

Then go back to your post and paste it into the custom HTML block you added earlier. (In case you don’t know the keyboard shortcut to paste, it’s Command + V on a Mac and Ctrl + V on a Windows PC.)

This is what my FAQ section looked like on the frontend, based on the initial code that Claude generated:

Notice anything?

In this version, Claude created a white background with white text. Not exactly an effective color combination.

This is why I said to include every little detail you can think of.

Luckily, it’s an easy fix. If you find yourself in a similar situation (which you probably will) simply screenshot the result and give it to Claude by clicking the little paperclip icon.

Then explain the issue(s) and ask it to make your desired adjustments.

Below is Claude’s response to me, as well as the updated custom code:

Once again, click on the little clipboard icon to copy the adjusted code. Then go back to your post to replace the code that was there with this new code.

Afterwards check the result on the frontend:

Much better, right?

Claude fixed the color problem, added little arrows to indicate that the tabs are collapsible, and left the first tab open by default. In short, it did everything I asked it to do.

Final thoughts and takeaways

You just saw how relatively easy it is to add your own custom HTML by using Gutenberg’s built-in HTML block and the Claude AI chatbot. The trick with using Claude (or any similar AI tool) is to be detailed and persistent.

I lucked out in the example I shared because it only took me two tries to get it right. That’s not always going to be the case, though. It might take you five or even ten tries.

As a general rule of thumb, the more complex of a feature you want to add, the more attempts it’s going to require. This is simply due to the fact that the code is going to be more complicated and thus more opportunities for errors will be present.

If you really find yourself getting stuck, consider using two AI tools at the same time so you can cross-reference the code. For example, if you start with Claude as your primary code generator but you find yourself going around in circles with trying to fix errors, then run the code through ChatGPT and see what it says. It might see something that Claude doesn’t (or vice versa).

Also take into consideration that global styles in your theme might override whatever code you add to the HTML block. If that’s the case, then your fix might require some additional steps. But that’s outside the scope of this tutorial.

And that’s it!

Was this helpful? Do you feel confident enough to try it yourself? If you have any questions, let me know in the comments below. I’ll be happy to assist you.