How to Edit HTML in WordPress

If you want to know how to edit HTML in WordPress, there are two places you can do it:

1. Inside a page or post
2. Or within the theme itself

Both have different approaches, but result in the same outcome, to change the structure or design by editing the HTML on a page.

In this post, I’ll share exactly how you can do that.

Let’s begin.

How to Edit or Add HTML in a WordPress Page or Post

If you want to edit HTML that’s inside a page or post then you can do that within the Gutenberg editor.

Edit HTML inside a Gutenberg block

1. First, open up the page or post you want to edit.
2. Then, where ever you want to view the text in HTML format, just hover over the block and click on the three dots.
3. Then click on edit as HTML to view the blocks code.

Add HTML to a Page or Post

1. To add some HTML code inside a page or post, click the plus simbol to add a new block.
2. Then type html to find the Custom HTML block and add it to the page.
3. You can now add or paste your HTML code into the block to add it to your page or article.

Here’s a quick video tutorial showing you the above steps:

How to Edit WordPress Theme HTML

If you want to make stucture or design changes to your WordPress theme then you can follow these steps below.

Before You Edit HTML in Your Theme

First, you will need to make sure you are using a child theme.

If you’re not, check out this tutorial for creating a child theme then continue below to edit your HTML.

Steps for Making Changes to Your WordPress Theme HTML

1. First, copy over the files that you want to edit from your main theme to your child theme folder. If you are unsure which file you need to edit you can ask the theme developer. In my example below, I’ll walk you though how to do it with header.php.
2. Download header.php from your themes directory by connecting to a WordPress SFTP program, and upload the file to your child theme directory.
3. Now you can open the file and make whatever changes you need to make, add code, tracking, whatever you like.
4. Save the file.

Now WordPress will prioritise this version of the file. That means that any HTML changes you make to the file, will be displayed on the frontend of your site.

Also, if your main theme gets updated, it won’t overwrite your new edited file in the child theme.

How to Design a Whole Page in WordPress

If you are trying to design an entire page in WordPress instead of just editing the HTML, then I recommend using a page builder (unless you know how to add CSS in WordPress and write HTML from scratch of course).

My favourite page builder is Elementor. Here’s a quick Elementor tutorial to get you started.

Photo by Jackson So on Unsplash