To edit an entire WordPress post or page as HTML, open it in the Block Editor, open the three-dot Options menu, and select Code editor. To change only one block, open that block’s options and choose Edit as HTML. To insert a separate HTML fragment, add a Custom HTML block or type /html in a new paragraph.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
Classic Editor users switch from Visual to Text (HTML) mode. Your ability to save scripts, iframes, and other uncommon markup depends on the unfiltered_html capability; without it, WordPress sanitizes content with wp_kses() and may remove code when you save.
As an Amazon Associate I earn from qualifying purchases.
Choose the editing method before you touch the markup
WordPress offers several HTML workflows because “edit HTML” can mean three different things: changing the complete document, changing one block, or adding a self-contained fragment. Pick the narrowest method that matches the job. It limits accidental changes to block markup and makes later visual editing easier.
| What you need to do | Use this tool | Where it applies | How the code is stored |
|---|---|---|---|
| Rewrite or inspect the complete post or page | Block Editor: Code editor | The entire document | All post content is shown as HTML, including block comments |
| Change one paragraph, heading, image, or other block | Block options: Edit as HTML | One block, when that block supports the option | The selected block’s markup |
| Insert a standalone snippet | Custom HTML block | One location in the content | Static markup saved in that block |
| Edit a site using the legacy interface | Classic Editor: Text mode | The post or page content | HTML entered in the editor |
| Show a video, map, or social post | Embed block | An embed block | WordPress-managed embed data |
| Collect contact details or feedback | Form block | A form block | Form settings managed by the block |
| Style content without changing its structure | Custom CSS | Site or theme styling, depending on the installation | CSS managed outside the post body |
| Add verification metadata or scripts site-wide | Header-code tool or equivalent site configuration | The site header or global template | Managed outside individual posts and pages |
The Block Editor’s Code editor is best for a document-wide inspection. A Custom HTML block is safer when the requirement is a single table, callout, semantic section, or other fragment. Use an Embed, Form, Custom CSS, or header-code feature when that feature is designed for the content instead of forcing it into raw HTML.
#1 Best Overall
Edit the entire post or page in the Block Editor
Open Code editor
- Sign in to WordPress and open Posts or Pages in the dashboard.
- Select the item you want to change, or create a new post or page.
- In the editor’s upper-right corner, open the three-dot Options menu.
- Choose Code editor. The editor switches from the visual block interface to the document’s HTML representation.
- Find the markup you need to change. Block content can include WordPress block comments that identify each block; keep those comments intact unless you deliberately want to convert or remove a block.
- Make the smallest change that solves the problem. Preserve valid nesting, quotation marks around attribute values, and any block comments surrounding the content.
- Switch back to the visual editor to inspect how the document is interpreted. Correct any invalid nesting or block warning before publishing.
- Use Update for an existing item or Publish for a new one.
Code editor mode exposes the whole document, so a misplaced closing tag can affect every block that follows it. If you only need to alter one paragraph or add one snippet, use a block-level method instead.
What you will see in a block document
Block-based content is not usually a plain, hand-authored HTML file. WordPress stores block delimiters alongside the rendered elements. Those delimiters let the editor reconstruct each block’s settings, such as alignment, color, or typography. Removing or relocating them can turn a block into an unrecognized HTML section or cause the editor to report that the block contains unexpected content.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →When you need to make a structural change that the visual controls cannot express, edit the relevant element while retaining the surrounding block structure. If WordPress displays a block warning after you return to the visual view, use the warning’s recovery option only after checking the generated markup; recovery can replace changes that do not match the block’s expected format.
Edit a single block without exposing the whole document
Use Edit as HTML
- Click the block you want to modify.
- Open that block’s options menu (the three dots in the block toolbar).
- Select Edit as HTML when the option is available.
- Change only the block’s markup. Do not paste a complete HTML document with
<html>,<head>, or<body>tags into a content block. - Choose Preview or return to the visual view to check the result.
- Save with Update or Publish.
Not every block exposes Edit as HTML. A block may hide the option when its content is generated by a specialized interface or when its markup is not intended to be edited directly. In that case, use the block’s own controls, replace it with a Custom HTML block, or switch to the document-wide Code editor if the change genuinely affects the complete document.
When block-level editing is safer
- Changing a heading level or adding a class to one section.
- Correcting a link attribute or adding a semantic element around one short passage.
- Inspecting the exact markup produced by one block without risking unrelated content.
- Testing a small fragment before committing a larger template change.
Insert raw markup with a Custom HTML block
Add the block
- Place the cursor where the fragment should appear.
- Open the Block Inserter with the plus button and search for Custom HTML.
- Insert the block. You can also type
/htmlin a new paragraph and press Enter to insert it quickly. - Click the block’s Edit HTML area and enter the fragment.
- Use the block’s preview to see how WordPress renders the markup.
- Save the post or page with Update or Publish.
The Custom HTML block is intended for raw HTML in one post or page. It is a static core block: the markup you enter is saved directly in the post content rather than being managed as a reusable site-wide script.
Example: a semantic callout
<aside class="game-tip">
<h2>Quick tip</h2>
<p>Save your game before changing advanced settings.</p>
</aside>Use classes only when a stylesheet already defines them. A class name by itself does not create visual styling. Keep the fragment self-contained and avoid adding document-level tags that belong in a theme template.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Preview is not the same as permission to execute code
The preview shows what WordPress allows the current user and installation to render. It does not guarantee that every browser-executable element will be retained after saving. A script, iframe, event handler, or unusual attribute can appear in the editing area and then disappear when the post is updated if the account lacks permission to save it.
Use the Classic Editor’s Text/HTML mode
Switch from Visual to Text
- Open the post or page in the Classic Editor.
- Above the content area, select the Text tab. Depending on the installation, the tab may be labeled HTML.
- Enter or edit the markup directly in the text area.
- Switch back to Visual only when you want to inspect the rendered result.
- Save with the editor’s update or publish button.
In Visual mode, the editor treats code as ordinary text and converts the less-than and greater-than characters into their character-entity equivalents. For example, typed markup can become visible text using < and > instead of being interpreted as elements. Text/HTML mode does not perform that conversion, so the browser can interpret valid markup and the resulting layout can change.
WordPress documentation cautions that behavior can vary with the WordPress version, the editor in use, and installed plugins. If a workflow behaves differently from the steps above, identify which editor is active before troubleshooting the HTML itself.
Why WordPress removes scripts, iframes, or attributes
The unfiltered_html capability controls what can be saved
The Custom HTML documentation states that CSS and JavaScript panels are available only to users with the unfiltered_html capability. Accounts without that capability are subject to WordPress content sanitization. On save or update, WordPress can run wp_kses(), which removes disallowed markup such as <script> and <iframe>.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →This is why code can seem to “vanish” after you click Update even though it was visible while editing. The editor is not necessarily malfunctioning; the server is enforcing the permissions and allowed-element rules for that account and site.
Check permissions without weakening security
- Confirm which user account is editing the post or page.
- Ask a site administrator whether that account has the
unfiltered_htmlcapability in the relevant WordPress installation. - Check whether a security, membership, or multisite configuration intentionally removes that capability.
- Do not grant unrestricted HTML capability merely to make one embed work. Use the site’s approved Embed, Form, Custom CSS, or header-code feature when it matches the requirement.
- After any permission change, test the exact fragment in a staging or private draft and verify what remains after saving and reloading.
In a multisite or managed environment, even an administrator-level role may not have unrestricted HTML capability. Permission names and sanitization rules are site configuration concerns, not guarantees based only on the label shown next to a user.
Raw HTML versus WordPress’s built-in alternatives
Embeds for video, maps, and social posts
Use an Embed block for supported video, map, or social content. It keeps the provider-specific markup and responsive behavior in the block designed for that purpose. Hand-pasting an iframe is more likely to be removed by sanitization and creates maintenance work when the provider changes its embed format.
Forms for contact and signups
Use a Form block when the goal is to collect contact details, registrations, or feedback. A hand-built form needs field handling, validation, spam protection, accessibility, and a destination for submissions; the dedicated block addresses those concerns more directly than a fragment of HTML.
Custom CSS for presentation
Use Custom CSS when you need to change colors, spacing, typography, or responsive layout without changing the document structure. Putting a long <style> section inside every post duplicates rules and makes later maintenance harder.
Header-code tools for site-wide code
Verification metadata, analytics snippets, and scripts that must load across many pages belong in a header-code or equivalent site configuration tool. A Custom HTML block affects only the post or page where it appears and is the wrong scope for site-wide behavior.
Best Value
Common HTML editing problems and precise fixes
The Code editor option is missing
- Make sure you are in the Block Editor rather than the Classic Editor; the Classic Editor uses Visual and Text tabs.
- Open the editor’s upper-right three-dot Options menu, not the browser’s menu.
- If the site uses a customized editing interface, check whether a plugin or role restriction hides document tools.
- For a single block, open that block’s own options and look for Edit as HTML instead.
Edit as HTML is not available for a block
- The block may be a specialized or dynamically generated block.
- Use the block’s visual controls if they expose the setting you need.
- Replace the content with a Custom HTML block when a static fragment is acceptable.
- Use Code editor only when you understand the effect on the entire document.
The markup appears as text on the page
- Check whether you entered it in Classic Editor Visual mode; that mode encodes angle brackets.
- In the Block Editor, verify that the content is inside a Custom HTML block rather than a Paragraph block.
- Inspect the saved markup in Code editor and look for
<or>, which indicate encoded characters. - Remove the encoded text and insert the fragment through the correct HTML interface.
A script or iframe disappears after saving
- Reload the saved post and confirm that the element was actually removed rather than hidden by CSS.
- Check whether the editing account has
unfiltered_html. - Assume that
wp_kses()sanitization removed disallowed markup if the capability is absent. - Use an Embed block for supported media or an approved site-level code feature for scripts that must run globally.
- If unrestricted markup is essential, have the site administrator review the requirement and its security implications instead of repeatedly pasting the same code.
The layout breaks after switching back to visual mode
- Check for an unclosed element, incorrectly nested tags, or a quote missing from an attribute.
- Restore any block comments that were removed accidentally.
- Validate that the fragment does not contain document-level tags such as
<body>inside post content. - Use the editor’s block recovery prompt only after saving a copy of the intended markup.
The code works in preview but not on the public page
- Reload the public URL in a private browser window to rule out an editor-only preview effect.
- Inspect the saved HTML to see whether sanitization removed the element.
- Check whether a stylesheet, content-security policy, caching layer, or theme rule changes the output outside the editor.
- Confirm that the code belongs in post content at all; site-wide scripts and styles usually need a global configuration location.
Safe workflow for production edits
- Define the scope. Decide whether the change affects one block, one post, or the whole site.
- Duplicate or back up the content. Keep the original post revision or a separate copy before making structural edits.
- Choose the narrowest editor. Prefer Edit as HTML or Custom HTML for a fragment; reserve Code editor for document-wide work.
- Change one thing at a time. Small edits make it easier to identify the tag, attribute, or permission rule responsible for a failure.
- Preview at the insertion point. Check headings, links, images, spacing, and responsive behavior at the viewport sizes your audience uses.
- Save and reload. Sanitization and server-side processing happen during save, so inspect the content again after updating.
- Test the public view. Confirm that the final page, not just the editor canvas, contains the intended markup.
- Review accessibility. Use meaningful heading order, link text, alternative text for informative images, and labels for form controls.
- Document global changes. If the code should appear on multiple pages, move it to the appropriate site-level tool rather than copying it into individual posts.
HTML patterns that belong in post content
These examples illustrate fragments that can reasonably live in a Custom HTML block. They are intentionally limited to content markup; CSS and JavaScript should be managed through the appropriate site features.
Link with a descriptive label
<p>Read the <a href="https://example.com/guide">complete setup guide</a> before continuing.</p>Use link text that describes the destination. Avoid a string of identical “click here” links that gives screen-reader users no context.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsAccessible image markup
<figure>
<img src="https://example.com/screenshot.jpg" alt="Inventory screen showing three saved loadouts">
<figcaption>The loadout screen lists three saved configurations.</figcaption>
</figure>The URL and image file must exist, and the alternative text should communicate the image’s purpose rather than repeat a filename.
Simple data table
<table>
<caption>Controller shortcuts</caption>
<thead>
<tr><th scope="col">Action</th><th scope="col">Shortcut</th></tr>
</thead>
<tbody>
<tr><th scope="row">Pause</th><td>Esc</td></tr>
<tr><th scope="row">Map</th><td>M</td></tr>
</tbody>
</table>Use table header cells and scopes so assistive technology can associate each value with the correct row or column.
Decide where code should live
| Requirement | Recommended location | Reason |
|---|---|---|
| One decorative or semantic fragment in one article | Custom HTML block | Scope stays limited to that post or page |
| A correction to markup generated by one block | Edit as HTML | Only the selected block is exposed |
| A document-wide structural adjustment | Code editor | All blocks can be inspected together |
| Reusable site-wide styling | Custom CSS | Rules are centralized instead of duplicated |
| Verification or analytics code across the site | Header-code or site configuration tool | Global scope and maintenance are explicit |
| Supported third-party media | Embed block | Purpose-built handling reduces fragile pasted markup |
| Contact or signup collection | Form block | Submission and field behavior are handled by the form feature |
What to remember
Use Code editor for the whole Block Editor document, Edit as HTML for one block, and a Custom HTML block for a standalone fragment. Classic Editor users must switch to Text or HTML mode because Visual mode encodes markup characters. If scripts or iframes disappear, check the unfiltered_html capability and the sanitization performed by wp_kses() before changing the code. For embeds, forms, styling, and site-wide scripts, the dedicated WordPress feature is usually safer and easier to maintain than raw HTML in a post.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
