How To Insert HTML in a WordPress Page or Post

Depending on the level of customization — outside of what the default WordPress blocks offer and the coding flexibility you’re looking for, there are three common methodologies for inserting HTML in a WordPress Page or post. So let’s jump right in!

Methodology 1: Adding HTML in WordPress via the Custom HTML Block

As straightforward as the heading sounds, that’s exactly how you would add your own HTML code in WordPress.

To do so, insert a block named “Custom HTML” and start coding away.

Methodology 2: Editing a Non-HTML Block As HTML

If you want to code the HTML but still need a bit of a structure and a head start, you can use a WordPress block as you would normally. Then, you can edit that block as HTML. Almost every Gutenberg block can be tweaked this way.

To do so:

1. Click on the block to invoke a horizontal options bar. This is where you would see the option to bold a text, change color, italicize fonts, etc.
2. From this bar, click on the right-most 3 vertical dots through which you can get even more options to customize the existing block.
3. One of the choices you would get is “Edit as HTML.”

As an example, take a look at the two screenshots below. The first one will show a regular image block, and the second one will show the same block, but how it looks in HTML, after using the “Edit as HTML” feature.

And if you didn’t know, you can always go back to the visual form of things by hitting the same 3 vertical dots and going with “Edit Visually.”

Methodology 3: Adding HTML on the Editor Level

The default editor that most WordPress users may end up with is the visual one. However, an alternative HTML editor is available for those wanting to have more control — from the beginning, on how everything looks like — by coding things from scratch.

To get there, enter your WordPress page or post. Subsequently, divert your attention to the topmost horizontal bar of the editor, where you see things like preview, publish, settings (the cog icon), etc. In there, look for the right-most, and yes, again, the 3 vertical dots.

After you click on it, you should notice a section for Editor, from where you can toggle to a “code editor.” You can navigate here at any point and add HTML on the editor level.

Summary

If making modifications to what the default WordPress blocks, or rather, on a page or post level have to offer, you can add your own HTML for fine-tuning what already exists.

To make that happen, you can leverage any of the 3 traditional methodologies described here — applicable by your need.

In the end, pursuing an HTML approach to producing a page or post can allow you to lift the limits of what you can achieve by just playing within what WordPress and your current theme have set forth inherently.