How to Edit HTML in a WordPress Page

WordPress hides the HTML by default, which is helpful right up until the moment you need to get at it. There are three places you can edit it depending on what you are trying to change, and one of them can break your site if you are not careful. All three are below, safest first.

For more on this, see how to add an HTML page in WordPress. You might also find how to add custom CSS in WordPress useful.

Method 1: Edit HTML in the Block Editor (Gutenberg)

Most WordPress sites now use the Block Editor (also called Gutenberg). You can switch any block into HTML mode.

Here’s how:

1. Log in to your WordPress Dashboard

2. Go to Pages → All Pages

3. Click on the page you want to edit

4. Find the block you want to change

5. Click the three dots (⋮) on that block

6. Choose Edit as HTML

7. Make your changes

8. Click Preview or Update when you’re done

You can also add a Custom HTML block if you want to insert your own code.

To do that:

• Click the + button to add a new block

• Search for Custom HTML

• Paste your code in the box

• Click Preview to see how it looks

• Hit Update to save

Perfect for embedding forms, buttons, or styling text your own way.

Method 2: Use the Code Editor for the Whole Page

Want to view or edit the full HTML of your page?

Do this:

1. Open your page in the editor

2. Click the three-dot menu (top right corner)

3. Choose Code Editor

4. You’ll now see the entire page in raw HTML

5. Make changes carefully

6. Click Exit Code Editor when you’re done

7. Then click Update

This view gives you control over the whole page layout. But be careful—not everything is just plain HTML. Some parts are shortcodes or block tags.

Method 3: Use a Page Builder Plugin (like Elementor)

If you’re using a page builder like Elementor, you can add or edit HTML using a widget.

In Elementor:

1. Open the page with Elementor

2. Drag the HTML widget to your page

3. Paste your code

4. See the preview right away

5. Click Update to save

This method is best for adding things like custom buttons, iframes, or third-party tools.

Method 4: Edit HTML in the Theme Files (Advanced)

This is only for experienced users. Don’t mess with these files unless you know what you’re doing.

If you need to change a part of the layout that isn’t on a page (like the header, footer, or sidebar), you’ll need to edit your theme’s files.

How:

1. Go to Appearance → Theme File Editor

2. Click the file you want to change (like header.php)

3. Carefully edit the HTML

4. Click Update File

💡 Tip: Use a child theme to keep your changes safe during updates.

Final Thoughts

Editing HTML in WordPress is simple once you know where to look. Whether you want to fine-tune a layout or paste in a custom code snippet, you’ve got options. The built-in block editor gives just enough freedom, and if you want more power, plugins like Elementor or a quick dive into theme files can help.

Start small. Try changing a heading style or inserting a code block. And always preview your changes before publishing. If it looks right—click update and you’re done.

Need help with a specific code? Drop it here. I’ve got you.