How to Edit HTML in WordPress

Steve Allen


There’s two places you can edit HTML and it depends on what it is you want to achieve.

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

But if you want to customise the HTML inside your theme to make design or structure changes, then you’ll need to access your themes PHP files.

I’ll go through both of these options below.

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

Edit HTML inside a Gutenberg block

  1. Firstly, 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 that 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:

Customize the HTML Inside Your Theme

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

  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 you main WordPress theme directory using an FTP program and then 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 design with HTML and CSS of course).

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

Conclusion

I hope this article has helped, comment below if you have any questions.

Steve Allen

Content Marketer
Steve is the guy behind Coffee Shop Blogger where he shares his passion for WordPress tech, digital marketing and smart ways to grow an online business.

Leave a Comment

Do NOT follow this link or you will be banned from the site!