HTML View

How to Switch to HTML View in WordPress

Posted on by Prakash Tiwari

If you need more control over how your content looks or want to add custom code, switching to HTML view in WordPress is the way to go. It allows you to directly edit the structure of your content and add things like embeds, tracking codes, or custom styles. 

In this article, I’ll explain how to switch to HTML view in both the Block Editor (Gutenberg) and the Classic Editor.

How to Switch to HTML View in Gutenberg

Gutenberg Editor, introduced in WordPress 5.0, allows you to create content using blocks. You can switch individual blocks to HTML view or switch the entire page. Here’s how.

Switching Individual Blocks to HTML View

  1. Log in to your WordPress dashboard.
  2. Go to Posts > All Posts or Pages > All Pages.
  3. Select the post or page you want to edit by clicking Edit.
  4. Click on the block you want to switch to HTML.
  5. Click the three dots (Options) at the top of the block toolbar.
  6. Select Edit as HTML from the dropdown menu.

This will convert the selected block to HTML view, allowing you to change its code.

Switching the Entire Page to HTML View

  1. Log in to your WordPress dashboard and open the post or page you want to modify.
  2. Click the three dots in the top-right corner of the Block Editor (next to the gear icon).
  3. Select Code Editor from the dropdown menu.

You will now see the entire page’s content in HTML format. To return to the normal view, click the three dots again and select Visual Editor.

How to Switch to HTML View in the Classic Editor

The Classic Editor presents your content in a box with two tabs: Visual and Text. If your site uses the Classic Editor plugin or if you haven’t switched to the Block Editor, follow these steps:

  1. Log in to your WordPress dashboard.
  2. Go to Posts > All Posts or Pages > All Pages.
  3. Click Edit under the post or page you want to modify.
  4. Click the Text tab (next to the Visual tab) in the editor.

This will switch the editor to HTML view, where you can see your content’s raw HTML code. To return to the regular editor, simply click the Visual tab.

Tips for Working in HTML View

Editing in HTML view requires attention to detail. Here are some practical tips to avoid issues:

  1. Don’t delete important tags. Tags like <div>, <p>, and <h1> structure your content and ensure it displays properly.
  2. Preview changes before publishing. This ensures everything looks the way you intended and no HTML errors are present.
  3. Use valid HTML syntax. Always close your tags (e.g., <div> and </div>) to avoid broken layouts.
  4. Add custom styles or scripts carefully. Use CSS within <style> tags and JavaScript inside <script> tags if needed.

Examples of Practical Uses for HTML View

Switching to HTML view isn’t just for developers—it’s useful for many common tasks. Here are some examples where switching to HTML view comes in handy:

  1. Embedding videos from third-party sources:
    While the Block Editor has an embed block, some platforms provide code snippets that need to be pasted directly into the HTML view. Example: <iframe> tags for YouTube videos.
  2. Adding tracking codes:
    For example, insert a Facebook Pixel or Google Analytics tracking script. These scripts go inside the HTML view to ensure they function correctly on your page.
  3. Fixing formatting issues:
    If the visual editor adds extra spacing or alignment problems, switching to HTML view allows you to fine-tune the structure of your content.
  4. Embedding forms:
    Many services like Google Forms or Mailchimp provide embed code that works best when added via HTML view.

Troubleshooting Common HTML View Issues

Here are some common problems you may encounter while using HTML view, along with ways to fix them:

  1. HTML tags not showing correctly:
    WordPress automatically removes certain HTML tags (like <script> or <iframe>) for security reasons. You can use plugins like Code Snippets to add these codes safely.
  2. Code not displaying as expected:
    Double-check your syntax. A single missing closing tag can break the entire layout.
  3. Changes not saving properly:
    If you switch between the visual and HTML views too often, some code might get removed or altered. Save your changes frequently and preview your page before publishing.
  4. HTML editor option missing:
    If you don’t see the HTML view option, make sure you are using the right editor. If you prefer using the old interface, the Classic Editor plugin may need to be installed.

Conclusion

Whether you use the Block Editor or the Classic Editor, knowing how to access and use HTML view helps you add custom elements, fix formatting issues, and ensure your content looks exactly how you want it. With the steps and tips outlined here, you’ll be comfortable switching between visual and HTML views, giving your site the flexibility it needs to stand out.