How to Switch to HTML View in WordPress (2025 Full Guide for All Editors)

Why Switch to HTML View in WordPress?

Sometimes, the visual editor just isn’t enough. Whether you’re embedding a custom script, editing inline styles, or troubleshooting layout issues, knowing how to switch to HTML view in WordPress gives you greater control.

This guide by Muhammad Tanzeel Ur Rehman of MT Web Experts walks you through multiple ways to access and edit the HTML source of your content using both the Gutenberg Block Editor and the Classic Editor.

We’ll also cover when to use HTML editing, best practices, security tips, and real-world use cases for content creators and developers alike.

Method 1: Switch to HTML View in Gutenberg (Block Editor)

Steps:

1. Go to Pages or Posts in your dashboard and open the content you want to edit.
2. Click on the three-dot menu (•••) at the top-right corner.
3. Choose “Code Editor” from the dropdown.

Your entire page/post content will now appear in HTML view. You can toggle back to Visual Editor the same way.

Pro Tip:

You can also switch to HTML view block by block:

• Click on any block
• Select the three-dot menu for that block
• Choose “Edit as HTML”

This is helpful when you only need to adjust one part of your content.

Method 2: Switch to HTML in Classic Editor

If you’re still using the Classic Editor plugin:

Steps:

1. Edit the page or post
2. You’ll see two tabs at the top-right of the content editor: Visual and Text
3. Click Text to switch to HTML view

You can now directly edit HTML, embed scripts, or adjust styles.

Method 3: Use Custom HTML Block

If you only want to add custom code (and not edit the entire content in HTML):

Steps:

1. In the Block Editor, click the “+” button to add a new block
2. Search for “Custom HTML”
3. Paste or write your HTML code
4. Preview your HTML by clicking Preview tab within the block

This is ideal for inserting custom elements like forms, iframes, or third-party widgets.

Method 4: Edit HTML via Theme File Editor (Advanced)

Sometimes, you may need to insert HTML directly into theme files.

Warning: Always use a child theme!

Steps:

1. Go to Appearance > Theme File Editor
2. Select a file like header.php, footer.php, or single.php
3. Carefully insert your HTML where needed
4. Click Update File

💡 See: How to Create a Child Theme in WordPress

Benefits of HTML Editing in WordPress

• Precision: Full control over markup
• Customization: Embed forms, video, custom CSS or scripts
• Troubleshooting: Identify broken layout issues
• Mobile Optimization: Adjust spacing and responsiveness manually

When Should You Use HTML View?

• You want to embed third-party forms, iframes, or JS widgets
• You’re adjusting structure or design that can’t be done in the block editor
• You’re copying styled code from another site or template
• You’re working on a custom layout or email template

Common Use Cases

1. Embed a YouTube Video Manually:

<iframe width="560" height="315" src="https://www.youtube.com/embed/yourvideoid" frameborder="0" allowfullscreen></iframe>

2. Add Inline Styling to Text:

<p style="color: red; font-weight: bold;">Important Announcement</p>

3. Embed Custom Newsletter Forms (Mailchimp, ConvertKit):

<form action="https://mailchimp.com/example" method="post">
  <input type="email" name="EMAIL" placeholder="Your email">
  <button type="submit">Subscribe</button>
</form>

HTML Editing Best Practices

• ✅ Always preview changes before publishing
• ✅ Keep your code clean and formatted
• ✅ Use the browser’s Developer Tools to test changes before applying them
• ❌ Don’t use inline scripts in HTML blocks (use plugins or enqueue functions instead)
• ❌ Avoid placing PHP in HTML view it won’t run

SEO Tip: Don’t Overuse HTML Customization

Manual HTML edits can create performance or SEO issues if done wrong. Ensure:

• Titles are wrapped in <h1> or <h2> correctly
• No broken links or misused heading hierarchy
• Images have proper <alt> tags

💬 Related: How to Add Coupons to WordPress Products

FAQs

Can I add JavaScript in HTML View?

No — WordPress will strip it out for security. Use plugins or enqueue script functions instead.

Why can’t I find the Code Editor option?

Ensure you’re using Gutenberg and not a third-party page builder that overrides it.

What if I break something in HTML view?

Simply switch back to the visual view or undo changes using the editor’s revision history.

Final Thoughts

Knowing how to switch to HTML view in WordPress opens up endless possibilities — from embedding scripts to fine-tuning layouts. Whether you use Gutenberg, Classic Editor, or theme files, this feature gives you full design control.

Need expert help? Reach out to Muhammad Tanzeel Ur Rehman and the team at MT Web Experts your trusted partners in smart WordPress solutions.