If you’ve ever tried pasting some code into a WordPress post or widget and it just didn’t work the way you expected, you’re not alone. Sometimes, you need the raw HTML view, not the usual visual editor that shows everything in a polished format.
In WordPress, you can switch between two main views when editing content: the visual editor (where everything looks like it will be on your website) and the HTML view (where you see the actual code that builds the page).
The HTML view is helpful when you want more control. For example, you might paste an embedded third-party script, write custom code, or tweak the layout.
If you try to do this in the visual editor, it often tries to “clean up” or format what you paste, which can break certain types of code.
For example, if you’re embedding a form or a custom ad snippet, pasting it in the visual editor might strip out essential parts. But if you switch to the HTML view, you can place the code exactly where you want it, and it works as expected.
This guide will walk you through how to switch to the HTML view in different parts of WordPress:
- The Block Editor (Gutenberg)
- The Classic Editor
- WordPress widgets
Whether you’re a beginner trying to fix a formatting issue or someone with more experience adding custom HTML, this guide has you covered. I’ll show you how to do it safely, what to watch out for, and how to avoid common mistakes.
Let’s get started.
Visual vs. HTML View: What’s the Difference?
When you’re writing a blog post or editing a page in WordPress, you’ll notice there are two ways to work on your content: the Visual view and the HTML (sometimes called “Text” or “Code”) editor. Knowing the difference between these two helps you decide which one to use depending on what you’re trying to do.
The Visual view/editor is what most people use by default. It shows your content the way it would look on your site, including images, text formatting, bullet lists, headings, and so on. You can click around, use bold text, add links, and it feels a lot like using Microsoft Word or Google Docs.
It’s simple and great for everyday writing.
The HTML view, on the other hand, shows you the code behind the scenes. Instead of seeing a bold headline, you’ll see something like:
<h2>This is a headline</h2>
This might look a little intimidating if you’re not used to working with code, but it gives you complete control over what goes into your content.
Want to add a YouTube embed? Paste the iframe code. Need to add a link that opens in a new tab or has a nofollow tag? You can do that directly in the HTML view.
Here’s a quick example. Let’s say you want to link to another website, but you want to make sure search engines don’t follow that link. In the visual editor, you don’t really have an easy way to do that. But in the HTML view, you can write:
<a href=”https://example.com” target=”_blank” rel=”nofollow”>Visit Example</a>
This kind of detail can make a big difference if you care about how your content works behind the scenes.
So, in short:
- Use Visual view when you’re writing and formatting like you would in a normal text editor.
- Switch to HTML view when you need to fine-tune the code, embed something custom, or fix formatting that looks weird.
Next, I’ll show you how to actually switch to HTML view, starting with the Block Editor.
How to Switch to HTML View in the Block Editor (Gutenberg)
If your WordPress site uses the Block Editor (which has been the default editor since WordPress 5.0), you have two ways to access the HTML view:
- You can switch the entire editor to HTML view.
- Or you can switch individual blocks to edit just a part of the content in HTML.
Let’s walk through both options.
1. Switching the Entire Page or Post to Code Editor
This lets you view and edit all the blocks in HTML at once. Here’s how to do it:
Open the post or page you want to edit in the Gutenberg editor. Click the three-dot menu (⋮) next to the Settings icon in the top-right corner.
From the dropdown menu, select Code Editor.
Now, you’ll see the full content in raw HTML. Each block will be wrapped in a special comment like this:
<!– wp:paragraph –>
<p>This is a paragraph.</p>
<!– /wp:paragraph –>
Don’t delete those comments; they help WordPress know the type of block. If you remove them by mistake, that block might not work correctly when you switch back to the visual editor.
After editing the HTML, you can return to the regular view by clicking the same three-dot menu and selecting Visual Editor.
2. Switching an Individual Block to HTML View
Sometimes, you don’t want to switch the entire post to the code editor; you just want to tweak one part, like a paragraph or an image block. Here’s how to do that.
First, click anywhere on the block you want to edit. In the block’s toolbar, click the three-dot icon (⋮). Choose Edit as HTML from the dropdown options..
The block will change to show the HTML version of that specific section. You can now make your changes safely without touching the rest of the page.
For example, let’s say you have a paragraph block and want to manually add a line break. In the HTML view, you could write:
This is line one.<br>This is line two.
Once you’re done, click the three-dot icon again and select Edit Visually to return to the normal view. Alternatively, you can just click the Edit Visually button on the block toolbar.
Things to Keep in Mind
- The Block Editor is more strict about how blocks are structured, so always make sure your HTML is clean and properly closed.
- If something looks broken when you switch back to the visual view, it’s usually because of a small HTML mistake (like a missing quote or unclosed tag).
- You can always undo changes with Ctrl+Z or use the Revisions feature if something goes wrong.
Now, let’s see how to switch to HTML view if you’re using the Classic Editor.
How to Switch to HTML View in the Classic Editor
If your site still uses the Classic Editor or has installed the Classic Editor plugin, you’ll notice that things work a bit differently from the Block Editor. But switching to the HTML view is actually much simpler here.
The Classic Editor has two tabs at the top of the editing area:
- Visual
- Text
By default, you probably work in the Visual tab, where everything looks styled and clean. To switch to the HTML view on the Classci editor, you only need to open your post or page. At the top-right of the editing box, click the Text tab.
That’s it. You’re now looking at the raw HTML version of your content.
Here’s what that might look like:
<h2>Welcome to my blog</h2>
<p>This is a simple paragraph of text.</p>
<a href=”https://example.com” target=”_blank” rel=”nofollow”>Visit this link</a>
You can edit anything here, change tags, add styling, or paste code from other tools. It’s a straightforward way of working, and there’s no block structure to worry about, like in the Block Editor.
When you’re done, just click back to the Visual tab to continue editing visually.
Here are a few helpful tips:
- If you’re adding a script, iframe, or custom embed, it’s always safer to paste it in the Text tab. The Visual tab can sometimes strip or break that kind of code.
- After editing the HTML, double-check what the content looks like in Preview to ensure nothing breaks the layout.
- Don’t panic if you see a lot of tags and formatting. You don’t need to understand every single line to make simple edits.
The Classic Editor gives you complete control, and if you’re comfortable working with basic HTML, it can actually save you a lot of frustration when something doesn’t look right in the visual view.
Next, let’s look at how to switch to the HTML view in WordPress widgets. This is especially useful if you want to add custom code to your sidebar, footer, or other widget areas.
How to Switch to HTML View in WordPress Widgets
WordPress Widgets are a great way to add content or features to different areas of your WordPress site, like the sidebar, footer, or header. But what if you want to insert custom HTML, like a banner ad, an embedded form, or a newsletter signup box?
WordPress makes it easy to do this using a Custom HTML widget. You don’t actually need to “switch” a widget to HTML view; you just use the widget that’s built specifically for writing raw HTML.
Here’s how to do it:
- Go to your WordPress dashboard.
- Hover over Appearance, then click Widgets.
- Find the area where you want to add your code (like the Sidebar, Footer, or Header).
- Click that area’s “+” (Block inserter icon) button.
- Search for Custom HTML and select it.
You’ll now see a simple editor where you can type or paste your HTML code directly.
For example, if you want to add a link with a special style, you could enter something like:
<a href=”https://yourlink.com” target=”_blank” style=”color: red; font-weight: bold;”>Click Here</a>
Or, to embed a signup form from your email service provider, just paste the code they gave you.
What if you’re using the Legacy Widgets screen?
If you’re on an older version of WordPress or using the Classic Widgets plugin, you’ll see a list of widgets instead of blocks. In that case:
Go to Appearance > Widgets.
Drag and drop the Custom HTML widget into your desired widget area, paste your code into the box, and click Save.
Either way, you’re not fighting the visual editor here. You’re working directly with HTML, meaning your code goes precisely as you write it, with no filtering and no formatting issues.
This is super useful for:
- Affiliate banners
- Custom ads
- Email opt-in forms
- YouTube or podcast embeds
- Special messages with styling
Just ensure your code is clean and well-formatted, especially if you’re adding JavaScript or iframes.
Common Mistakes to Avoid When Using HTML View
Switching to an HTML view in the WordPress editor gives you more control but also opens the door to mistakes that can mess up your layout, styling, or even how your content appears on the page.
These mistakes are easy to avoid once you know what to watch for.
Let’s go over the most common issues you can run into and how to steer clear of them.
1. Forgetting to Close Tags
Every HTML tag that opens needs to be closed. If you forget to close one, it can throw off the entire section of your content. For example:
<strong>This text is bold
If you forget the </strong>, the rest of your post might look bold until the next closed tag appears. Always double-check that each tag is closed correctly.
2. Breaking the Block Editor
In Gutenberg (the block editor), each block is wrapped in special comments like this:
<!– wp:paragraph –>
<p>Some text here</p>
<!– /wp:paragraph –>
If you delete or edit those wrapper comments, the block might stop working or display weird formatting. It could also return the editor to Classic.
Leave those comments alone unless you know exactly what you’re doing. Focus on editing the HTML inside them.
3. Using Unsupported Tags
Not all HTML tags work in WordPress, especially widgets or the block editor. Tags like <script> or <iframe> can sometimes get stripped out, especially if you’re not an admin or if specific security plugins are active.
Use trusted plugins for things like custom embeds or check with your theme or host to see which tags are allowed.
4. Pasting Code Without Switching to HTML View
If you paste raw HTML codes into the visual editor, it may not show up correctly, or worse, it might display as plain text on your live page.
Always switch to HTML view before pasting code like embeds, custom links, or special formatting.
5. Misusing Inline Styles
It’s fine to add a little custom styling using the style=”” attribute, but too much of it can clutter your code and make it hard to maintain.
Keep inline styles simple, or use a plugin or your theme’s custom CSS editor in the customizer if you’re styling things site-wide.
Once you’re aware of these pitfalls, working in the HTML view becomes a lot easier and way less stressful. You’ll be able to spot problems before they break your layout and fix them without needing help.
When and Why You Should Use the HTML View in WordPress
You might be wondering if WordPress already gives you a visual editor, why bother using the HTML view at all?
The answer is simple: sometimes, you just need more control.
Here are a few situations where switching to HTML view in WordPress makes a real difference:
1. You’re Embedding Custom Code
If you’re trying to add a newsletter signup form, a custom ad, shortcode, or even a third-party widget like Calendly, the HTML view gives you the clean space to paste that code without interference from the visual editor.
For example, most email marketing services like GetResponse or Mailchimp give you a snippet of HTML. Just copy it and paste it into a Custom HTML block or switch to the Text tab in the Classic Editor.
2. You Want to Fix Something That Looks “Off”
Sometimes, the visual editor shows things correctly while the live page looks broken, or vice versa. In those cases, switching to the HTML view can help you spot missing tags, broken links, or extra formatting that got added by accident.
It’s like looking behind the scenes to see what’s happening.
3. You Need to Customize Styling
Maybe you want a link to stand out more, or you want to add a line break that WordPress keeps removing. HTML view lets you write things like:
<a href=”https://example.com” style=”color: blue; font-weight: bold;”>Read More</a>
That’s way faster (and often more reliable) than trying to fight with the visual tools.
4. You’re Reusing or Editing Code Across Multiple Posts
Let’s say you have a reusable section of code, like an affiliate link layout or a block of call-to-action text. You can copy and paste that straight from the HTML view and tweak it quickly without having to recreate it from scratch.
In short, the HTML view is one of those features you might not use daily, but when you need it, it’s a lifesaver. Whether you’re adding custom code, cleaning up formatting, or just want more control over how things display, knowing how to switch the WordPress editor to HTML view puts you in charge.
If you’re new to editing HTML, you’ll get more comfortable the more you use it. Start small, take your time, and always use the Preview button before publishing changes.
Conclusion
Switching to an HTML view in WordPress isn’t just for developers; it’s for anyone who wants more control over their content.
Whether you’re using the Block Editor, Classic Editor, or working with widgets, knowing how to access and safely use the HTML view can save you time, fix layout issues, and help you add custom features without relying on extra plugins.
You don’t need to be an expert coder. A basic understanding of how things work behind the scenes can make a big difference in how your site looks and functions.
Take it one step at a time, and use what you’ve learned here whenever you need a little extra flexibility.
