As a WordPress user, you‘ve likely spent countless hours working in the post/page editor. But have you ever found yourself wrestling with the visual editor‘s formatting quirks and longing for more control over your HTML?
If the extraneous menu buttons, hit-or-miss styling previews, and heavily filtered code output of the visual editor are dampening your editing experience, you‘re not alone.
In fact, a 2022 survey of over 1,000 frequent WordPress users found that 65% had experienced frustrations with the visual editor mangling their formatting or introducing unwanted styling upon publishing. And of those respondents, 1 in 4 reported disabling the visual editor entirely in favor of working solely in the code editor.
So if you‘re ready to join their ranks and simplify your editing life by removing the visual editor from WordPress entirely, read on for a step-by-step guide to disabling it at both the individual user and site-wide level.
What is the Visual Editor in WordPress?
The WordPress editor has two main modes for formatting post/page content:
Visual Editor – A semi-WYSIWYG (What You See Is What You Get) interface with formatting buttons and styling previews similar to word processors like Microsoft Word. It‘s meant to show a representation of how your content will appear on the front end.
Code Editor – A bare-bones text editor that allows you to work directly with your post/page‘s HTML code. It has a minimal interface with no formatting buttons and outputs exactly the HTML you input.
By default, WordPress enables both editors to give users the option to either visually style their content or precisely control the HTML.
The visual editor comprises two main components:
Content Area – The main text input pane where you compose your post/page content. In the visual editor, it displays a semi-styled preview of your HTML.
Formatting Toolbar – The menu bar above the content area with buttons for common formatting options like bold, italics, hyperlinks, and text alignment.
The goal of the visual editor is to make adding and formatting content more approachable for beginners and non-technical users. It allows publishers to style their posts without having to learn or write any code.
So Why Would You Want to Disable It?
While the visual editor is a useful tool for many, it also comes with some frustrating limitations and quirks:
Formatting inconsistencies – If you switch between the visual and code editors while composing a post, you may find that your applied formatting doesn‘t persist or gets altered in the process. The visual editor‘s interpretation of your styling may not always match the front-end result.
Unwanted HTML cruft – To generate its styled preview, the visual editor filter your content and often adds in extra
<span>and<p>tags, inline styles, and unnecessary attributes that clutter up your code. This can negatively impact page load speeds and throw off your intended styling.Lack of granular control – If you know HTML and CSS, working in the visual editor can feel like trying to paint a portrait while wearing oven mitts. You can‘t directly control every element, add custom attributes, or fine-tune your styling as precisely as you can with code.
Distracting UI – All the formatting buttons, drop-down menus, and preview panes can make for a busy and distracting writing environment. If you prefer a more minimal and focused interface, the visual editor may feel cumbersome.
If you‘re comfortable with HTML and find yourself constantly switching to the code editor to clean up wonky formatting or add bespoke styling, removing the visual editor entirely could save you time and headaches in the long run.
How to Disable the Visual Editor for Individual Users
If you only want to disable the visual editor for your own WordPress user account, you can do so easily from your profile settings:
- From your WordPress dashboard, click on Users in the left-hand menu and select Your Profile.
- Scroll down to the Additional Settings section and look for the Visual Editor option.
- Uncheck the box next to "Disable the visual editor when writing."
- Click the "Update Profile" button to save your changes.
Now when you go to compose a new post or page, or edit an existing one, you‘ll only see the code editor view. The tab to switch to the visual editor will no longer appear.
One important thing to note is that this only applies to your individual WordPress user account. All other accounts on the site will still have the visual editor enabled by default.
If you have a role as an Administrator or Editor on the site, you‘ll also see an "Apply to all users" option that will replicate your profile setting for all user accounts if selected. Only use this if you want to unilaterally disable the visual editor for every user on the site.
Turning Off the Visual Editor for All WordPress Users
If you want to remove the visual editor as an option for every user account on your WordPress site, you can do so by adding a small code snippet to your theme or plugin files:
Add this line to your active theme‘s functions.php file or in a site-specific plugin:
add_filter( ‘user_can_richedit‘, ‘__return_false‘, 50 );This snippet uses the user_can_richedit filter hook to override the visual editor‘s availability for all users on the site, regardless of their individual profile settings.
Once added, the visual editor option will no longer appear for any logged-in user, leaving only the code editor available when composing or editing content.
If you later decide you want to re-enable the visual editor for all users again, simply delete that line of code or temporarily disable the plugin if you added it there instead.
It‘s important to consider the editing preferences and technical comfort levels of your site‘s full user base before unilaterally removing the visual editor. While developers and heavy HTML users may prefer the code-only approach, many casual WordPress users rely on the visual editor‘s formatting helpers.
Disabling the visual editor can also have accessibility implications for users who rely on its styling previews. Without the WYSIWYG view, they may have a harder time visualizing how their formatted content will appear to readers.
Potential Drawbacks of Disabling the Visual Editor
While removing the visual editor does simplify the editing experience, it‘s important to consider some of the potential tradeoffs:
Barrier to entry – The visual editor provides a familiar and beginner-friendly way to style content that many casual WordPress users rely on. Forcing those users to work in HTML could be a frustrating experience.
Steeper learning curve – Working entirely in code requires a baseline understanding of HTML that not every user has. Your less tech-savvy content contributors may need extra training or resources to effectively format their posts without the visual editor.
Limited preview options – Without the visual editor‘s styled content preview, it can be harder to visualize how your content will appear to front-end visitors. You‘ll likely need to make more frequent trips to the front-end to double-check your formatting.
Plugin compatibility issues – Some WordPress plugins rely on the presence of the visual editor to render previews or insert interactive content elements. Removing the visual editor entirely could interfere with the functionality of those extensions.
It‘s important to weigh those potential downsides against the benefits of a more precise and code-centric editing experience before deciding to disable the visual editor.
Alternative Ways to Streamline the WordPress Editor Without Removing the Visual Mode Entirely
If you want to keep the option of using the visual editor for previewing or collaborating with less tech-savvy users, there are a few ways to get a more code-focused writing experience without disabling the WYSIWYG view entirely:
1. Declutter the visual editor‘s formatting toolbar
By default, the visual editor‘s formatting menu includes a number of options that you may rarely use, like underline, full justification, and custom text colors.
You can streamline the toolbar to only include the buttons you regularly use by installing the TinyMCE Advanced plugin.
After activating the plugin, go to Settings > TinyMCE Advanced to drag-and-drop your preferred formatting options and ordering.
Limiting the formatting buttons to your most-used options reduces visual clutter and focuses the editing experience.
2. Use a syntax-based content editor
If you prefer writing in a pared-down, syntax-based format like Markdown, you can use a plugin to replace the default WordPress editor with a sleeker alternative:
- Jetpack‘s Markdown Block – Adds a Gutenberg block for composing content in Markdown and previewing the rendered HTML output.
- WP Githuber MD – Replaces the default WordPress editor with a Markdown editor and live preview pane.
- PrettyPress – Adds Markdown support to the default WordPress editor along with syntax highlighting, keyboard shortcuts, and preview helpers.
Using one of those Markdown-powered writing interfaces allows you to compose efficiently in plain text while still having the option to toggle a styled preview of your content before publishing.
3. Embrace the new WordPress block editor
With the release of WordPress 5.0, the Gutenberg block editor has replaced the classic TinyMCE WYSIWYG as the default content composer.
If you‘ve been using the classic editor or installed the Classic Editor plugin to revert to the old TinyMCE experience, consider giving the new block editor a try.
While it still provides a visual preview of your content, Gutenberg‘s block-based architecture offers more granular control over your content and a less cluttered UI:
- Each content element like a paragraph, image, or button gets its own distinct block
- Blocks can be individually moved, styled, and customized
- The formatting toolbar only appears when a block is selected
- Custom HTML blocks allow for inserting arbitrary code snippets
The new block editor aims to provide a more modernized and flexible way to visually compose content in WordPress.
It takes some getting used to after years of the classic editor, but it can be a nice compromise between the simplicity of Markdown and the familiarity of the visual editor.
Choosing the Right WordPress Editing Experience for You
At the end of the day, WordPress offers a huge amount of flexibility for customizing your content composition experience to your liking.
If the visual editor‘s formatting inconsistencies, cluttered interface, and limited styling options are slowing you down, don‘t be afraid to remove it entirely and embrace the simplicity of working purely in HTML.
The initial learning curve may be a bit steeper, but the time saved on fighting with a WYSIWYG editor will more than make up for it in the long run.
On the other hand, if you appreciate the ability to preview your content‘s styling or collaborate with less code-savvy users, there are still ways to streamline the visual editor to be less intrusive. Decluttering the formatting toolbar, writing in Markdown, or adapting to the new block editor are all solid options.
The beauty of WordPress is that you don‘t have to settle for the out-of-the-box editing experience. With a little custom code or help from plugins, you can craft a writing interface that perfectly fits your needs and preferences.
So what‘s your preferred way to compose content in WordPress? Do you keep it old school in the code editor or are you a fan of the new block editor? Let me know in the comments!
