Categories
WordPress

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.

inserting custom html block in wordpress
The WordPress Gutenberg block editor has a block by the name of “Custom HTML” that provides the ability to enter your own code.

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.

an image block with additional options
Screenshot 1: A regular image block, with the display of “Edit as HTML.”
an example of an image block that is being edited as HTML
Screenshot 2: How the same image block looks like in its HTML form.

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.

switching to code editor in WordPress -- to add HTML
As shown, you can easily leverage the code editor feature to add your HTML to a WordPress page or post.

You May Also Want to Check Out:

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.