TLDR
HTML lives in three places inside WordPress: inside individual posts and pages, inside widgets (including a dedicated HTML widget), and inside theme files. Each has a safer editing route. Use the block editor’s Code block or “Edit as HTML” for post content, the HTML widget for sidebars and footers, and always use a child theme for template file edits.
This guide shows the safe way in for each layer, the three mistakes beginners make, and a quick exercise to practise on a low-stakes post so you are ready when a real edit comes up.
WordPress hides HTML behind a pleasant visual editor for good reasons: most users never need to touch it, and the ones who do can cause a lot of damage quickly. Three clean routes let you edit HTML safely, depending on where the HTML actually lives.
This post walks through each route, explains when to use which, and ends with the four rules every HTML edit in WordPress should follow.
Route 1: HTML inside a post or page
The block editor gives you two ways in:
Option A: the HTML block (for small HTML snippets)
- Open the post in the block editor.
- Click the + icon where you want the HTML.
- Search for Custom HTML. Insert the block.
- Paste your HTML. Click the Preview tab above the block to see how it will render.
- Save the post.
Good for embed codes, small bits of custom markup, a YouTube embed that the block editor does not auto-detect, or a short styled callout.
Option B: edit a block as HTML (for fine-tuning existing content)
- Click into an existing block (paragraph, heading, list).
- Click the three-dot menu at the top of the block.
- Choose Edit as HTML.
- Edit the HTML directly. Click Edit visually to switch back.
Good for adding a class name, wrapping text in a custom tag, or fixing an attribute on a link that the visual editor cannot reach.
Route 2: HTML inside widgets
For HTML in sidebars, footers, or any other widget area:
- Go to Appearance, Widgets.
- Click the + in the widget area where you want the HTML.
- Add a Custom HTML block.
- Paste your HTML, then Update.
If you use a classic theme with the old widgets screen, the same flow applies with a “Custom HTML” widget tile.
Common mistakes beginners make here
- Pasting Word or Google Docs content as raw HTML. The paste carries hundreds of invisible style tags that will mess up your formatting. Paste as plain text first, then format in WordPress.
- Editing theme files in the admin appearance editor. Live, no backup, no version control. One typo and the admin itself goes white. Always use SFTP and a child theme instead.
- Using inline
<style>tags inside posts. They work, but they are messy and hard to maintain. If you need custom CSS, use Appearance, Customize, Additional CSS (classic themes) or the full-site editor’s global styles (block themes). - Forgetting that WordPress strips some tags automatically. Script tags and a handful of others are blocked by default for security. If your HTML disappears on save, that is why.
Route 3: HTML inside theme files (advanced)
Theme files contain the templates WordPress uses to render every page. Editing them changes the whole site, not just one post. There is one right way and one wrong way.
Wrong way. Appearance, Theme File Editor in the admin. It edits the active theme’s files directly, on the live site, with no safety net. One typo locks you out of the admin.
Right way. Use a child theme. Edit the child theme’s copy of the file, upload via SFTP, test thoroughly on a staging site before pushing to live. The child theme setup guide is ten minutes of work that saves a lot of broken sites.
The four rules for every HTML edit in WordPress
- Back up first. Plugin, host-level, or at minimum a copy-paste of the page’s current content into a text file. Three seconds of preparation saves a bad afternoon.
- Preview before publishing. Every HTML block has a preview tab. Use it. What looks right in the editor sometimes renders badly because of missing closing tags.
- Keep edits small and testable. One change at a time. If the page breaks, you know which change caused it.
- Use the Inspector (browser dev tools) to confirm. Right-click the element on the live page, choose Inspect, and check the HTML matches what you intended. Most display bugs are caught here in seconds.
Try it yourself this week
Practise the safe edit flow on a low-stakes post before you need it for real.
- Create a new test post called “HTML sandbox”. Set it to Private so only you see it.
- Add a Custom HTML block. Paste in a simple snippet, for example a styled callout div.
- Switch to the Preview tab to check the render.
- Edit an existing paragraph as HTML, add a class name like
class="test", switch back to visual. The change should survive the toggle.
Ten minutes, zero risk, and now you are fluent in the everyday HTML edits most WordPress sites need.
Prefer a human to help?
If the steps above are not enough, or you are short on time, the team behind WP Clipboard runs a Liverpool WordPress agency that has been fixing sites for small businesses and charities since 2012. Fixed-price quotes, no long tie-in.
Visit Marketing The ChangeFrequently Asked Questions
Can I edit HTML in the block editor at all?
Yes, two ways. Use the Custom HTML block for fresh HTML snippets, or click the three-dot menu on any existing block and choose “Edit as HTML” to edit that block’s markup directly. Both are safe, both let you preview before you save.
Will editing HTML break my site?
It can, yes, especially if you forget a closing tag or paste code that conflicts with the theme. The block editor and HTML widget contain the damage to one post or one widget, so a bad edit affects just that one area. Theme file edits can break the whole site, which is why a child theme is non-negotiable for those.
Can I add JavaScript inside a post using Custom HTML?
By default, no, WordPress strips <script> tags from the editor for security. You can allow it for a specific user role via a plugin, or via a small snippet in a child theme, but only do this if you have a specific need. Tracking and analytics scripts belong in a header/footer snippet, not individual posts.
What is the difference between HTML in the post and HTML in the theme?
Post HTML only affects that post. Theme HTML affects every page the template touches. Editing a post HTML snippet is low risk, editing header.php or footer.php in your theme is high risk and always needs a child theme.
Does Gutenberg (the block editor) generate clean HTML?
It generates semantic, reasonably tidy HTML with block comments like <!-- wp:paragraph --> wrapped around each block. Those comments are stripped when the page is served to visitors, so the public HTML is clean. The comments are there so the editor can reconstruct the visual blocks on reload.