Switching to the Code Editor in WordPress allows you to view and edit the raw HTML of your posts and pages instead of using the visual (block) editor. This is useful when you want more control over formatting, fix layout issues, or insert custom code.
In this guide, you’ll learn how to switch to the Code Editor in WordPress step by step.
Why Use the Code Editor in WordPress?
The Code Editor is helpful when you want to:
- Edit HTML directly
- Fix formatting issues not visible in the visual editor
- Add custom embeds or scripts
- Clean up messy content
- Gain more control over your page structure
It is mainly used by advanced users, but beginners can also benefit from it in simple edits.
How to Switch to the Code Editor in WordPress
Follow these steps to switch from the visual editor to the code view.
Step 1: Open a Post or Page
Log in to your WordPress dashboard and go to:
- Posts > All Posts (or)
- Pages > All Pages
Then click on the post or page you want to edit.
Step 2: Open the Block Editor
WordPress uses the block editor (Gutenberg) by default. Once your post opens, you’ll see blocks of content like paragraphs, images, and headings.
Step 3: Open the Options Menu
In the top-right corner of the editor, click the three-dot menu (⋮).
This menu contains advanced editing options.
Step 4: Select “Code Editor”
From the dropdown menu, click:
Code Editor
Your content will instantly switch from visual blocks to HTML code view.
Step 5: Edit Your Content
Now you can edit the HTML version of your post or page.
Be careful when making changes, as incorrect code can affect your layout.
Step 6: Switch Back to Visual Editor (Optional)
If you want to return to the normal view:
- Click the three-dot menu again
- Select Visual Editor
What Happens After Switching to Code Editor?
Once you switch:
- You see raw HTML instead of blocks
- You can directly edit structure and formatting
- Changes apply immediately when saved
- Visual design tools are temporarily hidden
Your content remains the same unless you modify the code.
Tips for Using the Code Editor in WordPress
Only Edit What You Understand
Avoid changing code you’re unsure about to prevent layout issues.
Use It for Small Fixes
Best for minor adjustments like links, spacing, or embeds.
Switch Back Often
Use the visual editor to preview changes easily.
Backup Before Editing
Always save a copy of your content before making major changes.
Learn Basic HTML
Knowing simple tags like <p>, <a>, and <img> is very helpful.
Common Issues and Fixes
Code Looks Confusing
This is normal. WordPress uses block-based HTML formatting.
Layout Breaks After Editing
Remove recent changes or switch back to a previous version.
Can’t Find Code Editor Option
Make sure you are using the block editor (Gutenberg), not a classic editor plugin.
Changes Not Showing
Clear your cache or refresh the page.
Frequently Asked Questions
What is the Code Editor in WordPress?
It is a view that shows your post content in HTML format instead of visual blocks.
Can beginners use the Code Editor?
Yes, but it’s recommended to be careful when editing code.
Does Code Editor affect my published post?
Yes, any changes you make will reflect on the live page.
Can I switch back anytime?
Yes, you can toggle between Visual Editor and Code Editor anytime.
Do I need plugins to access it?
No, it is built into the WordPress block editor by default.
Final Thoughts
Switching to the Code Editor in WordPress gives you more control over your content and design. While the visual editor is easier for everyday use, the code view is powerful for making precise adjustments.
If used carefully, it can help you fix formatting issues, add custom elements, and improve your overall page structure without needing advanced tools.
Take your time, make small edits, and always preview your changes before publishing.