In today’s tutorial, I’ll show you how to edit HTML code inside of a WordPress post. This tutorial has been updated for Gutenberg. Read on to learn how!
What is HTML?
Hypertext Markup Language, or HTML, is a scripting language that all websites are written in.
A web browser processes the HTML code and displays it to you in a human-readable format.
WordPress powers 30% of the websites on the World Wide Web, and therefore also outputs HTML.
In fact, if you’ve ever written a WordPress blog post in the original editor or even the new Gutenberg editor, then you will be writing inside of HTML code tags.
Why Would I Want to Edit HTML in WordPress?
Just because WordPress allows you to edit HTML code, it doesn’t mean that you should.
In fact, I’d go as far as to say that 99% of WordPress users will not ever need to edit raw HTML code.
Why would you want to? There’s various reasons:
- Add a custom-styled HTML section to a blog post.
- To fix a problem with an outdated plugin.
- To override a specific style in your current WordPress theme.
The last being probably the most common reason someone would want to edit HTML in a WordPress post.
How Can I Edit HTML in WordPress? (Gutenberg)
Since WordPress v5.0 and the addition of the new Gutenberg editor, it is much easier and flexible to edit HTML inside of WordPress.
This is going to be very meta, but I’m going to show you how to edit HTML inside of the new Gutenberg editor as I write this tutorial!
Start by signing in to your WordPress admin dashboard.
Click on Posts in the left hand menu, and then Add New.
The new post page will load, along with the new Gutenberg editor.
It should look something like this (although mine has text in it, yours will be empty!)
Add an HTML Block to a Gutenberg Post
There are two ways to add HTML to a new Gutenberg post:
- Click the plus button in the top-left-hand corner to add a new block and search for ‘HTML’.
- Click into the body of a Gutenberg document and press the ‘/’ button on your keyboard, and then type HTML.
Either of those ways work. Both will get you the same result, which is to add a new empty HTML block into your Gutenberg document.
The HTML block is called Custom HTML.
Next, hit the return/enter key on your keyboard to add the Custom HTML block to your new Gutenberg post.
The block will start off in edit mode, and you can start adding HTML!
Why don’t you try adding the following HTML into the block?
<h3> This is a heading 3 </h3>
Adding this into the HTML block will look like this:
You can preview what that HTML code will look like to your readers by clicking the Preview tab along the top of the block.