How to Switch to HTML View in WordPress 3 Best Methods

In WordPress, content is typically written and edited using the Visual Editor, which provides a user-friendly, WYSIWYG (What You See Is What You Get) interface. However, there may be times when you want to switch to the HTML view to have more control over the code, add custom HTML, or troubleshoot content issues. Whether you’re customizing your page layout or embedding custom code, knowing how to switch to the HTML view in WordPress is an essential skill. In this guide, we’ll walk you through the steps to switch to the HTML editor.

Table of Facts and Figures

Action	Context	Best For
Switch to HTML View	Editing content with code access	Advanced users and customization
Switch to Visual View	Editing with a WYSIWYG editor	Beginners and quick content updates
Text vs. Visual Editor	Switching between editors	Flexibility in content management

Method 1: Switching to HTML View in the WordPress Block Editor (Gutenberg)

How to Access HTML View in Gutenberg

The WordPress Block Editor (also known as Gutenberg) is the default editor for WordPress. While it’s primarily used with blocks, there’s an option to view and edit the HTML directly.

Steps to Switch to HTML View in Gutenberg

1. Open the Post or Page
   • From your WordPress dashboard, navigate to Posts or Pages.

   • Select the post or page you want to edit.

2. Access the Block Settings
   • While editing the content, click on the three vertical dots (options) in the upper-right corner of the block editor.

3. Select “Code Editor”
   • From the dropdown menu, click on Code Editor. This will switch the editor view from the default Visual Editor to the HTML view.

   • You can now see the HTML code for the entire page or post, including headings, paragraphs, links, and any custom HTML you’ve added.

4. Edit the HTML Content
   • In this mode, you can directly edit the HTML content of your post or page. This is useful if you want to add custom HTML tags or embed external code like iframes.

5. Switch Back to Visual Editor
   • To go back to the Visual Editor, simply click on Visual Editor from the same dropdown menu.

Method 2: Switching to HTML View in the Classic Editor

How to Access HTML View in the Classic Editor

For users still using the Classic Editor, the process to switch to HTML view is straightforward. The Classic Editor offers a simple “Text” tab that allows you to toggle between the visual editor and the HTML code view.

Steps to Switch to HTML View in Classic Editor

1. Open the Post or Page
   • Navigate to Posts or Pages from the WordPress dashboard and select the post or page you wish to edit.

2. Click on the “Text” Tab
   • In the Classic Editor, you will see two tabs: Visual and Text. Click on the Text tab to switch to the HTML view.

   • This will display the HTML code for your content, and you can now make changes to the code directly.

3. Edit the HTML Content
   • You can now modify the HTML content as needed. This is helpful if you need to insert custom HTML elements or tweak the code that the Visual Editor may not allow.

4. Switch Back to Visual Editor
   • After making your changes, you can switch back to the Visual tab to return to the standard WYSIWYG editor.

Method 3: Using the HTML Block in Gutenberg

How to Add HTML to a Specific Block in Gutenberg

If you want to add custom HTML to specific sections of your content (like embedding a custom widget or code snippet), Gutenberg allows you to insert an HTML block directly.

Steps to Add an HTML Block in Gutenberg

1. Open the Post or Page
   • Go to Posts or Pages in your WordPress dashboard, and select the content you want to edit.

2. Add a Custom HTML Block
   • In the Block Editor, click the plus (+) icon to add a new block.

   • Type HTML into the block search field and select the Custom HTML block.

3. Enter Your HTML Code
   • In the Custom HTML block, you can enter your HTML code directly. This allows you to add custom code, embed third-party widgets, or make advanced adjustments to your content.

4. Preview and Publish
   • You can switch to the Preview option to see how the HTML will look on your post or page before publishing it.

Conclusion

Switching to the HTML view in WordPress can give you greater flexibility and control over your content, especially when you need to add custom HTML or troubleshoot code issues. Whether you’re using the Gutenberg Block Editor or the Classic Editor, switching between the Visual and HTML views is a simple process. Using the HTML editor is beneficial for advanced users who want to add specific formatting, embed third-party code, or perform other technical customizations. However, if you’re new to WordPress, it’s best to stick with the Visual Editor for most tasks. Knowing how to switch to the HTML view, though, opens up a world of possibilities for customizing your WordPress site.

Read More:

https://alnoordigitech.com/2025/05/01/can-i-hide-my-site-wordpress-while-editing/

https://alnoordigitech.com/how-to-clone-a-page-in-wordpress/ 

https://alnoordigitech.com/how-to-add-coupons-to-wordpress-products/

FAQs

How do I switch from Visual to HTML view in WordPress?

In the Block Editor (Gutenberg), go to the three dots in the upper-right corner and select Code Editor. In the Classic Editor, simply click the Text tab to view HTML.

What is the difference between Visual and HTML view in WordPress?

The Visual Editor shows your content as it will appear on the website, while the HTML Editor allows you to view and edit the raw HTML code.

Can I add custom HTML code to a WordPress post?

Yes, you can add custom HTML by switching to the HTML view or by using the Custom HTML block in the Gutenberg editor.

How do I edit HTML in WordPress?

To edit HTML, switch to the HTML view in either the Block Editor (by selecting Code Editor) or the Classic Editor (by clicking the Text tab).

Is switching to HTML view safe for WordPress content?

Yes, but you should be cautious when editing HTML. Incorrect HTML code can affect how your content displays. Always preview changes before publishing.