How to Fix White Text and Missing Buttons in the WordPress Visual Editor (5 Steps)

Picture this: You log in to your WordPress dashboard to write a new blog post. You open the editor, only to find a problem. All of the formatting buttons are missing, and the text is white and impossible to see.

Encountering this error can be frustrating, especially when it strikes mid-draft. The good news is you can keep working while you troubleshoot: highlight the invisible text to read it, switch to the editor’s Text tab and write in plain HTML, or temporarily deactivate the Classic Editor plugin and draft in the Block Editor. Fortunately, there are several solutions to this issue.

White text and missing buttons in the WordPress editor have different causes depending on which editor you use. In the Classic Editor, it’s usually a corrupted browser cache or a plugin conflict with its TinyMCE script. In the Block Editor, start with stray inline color styles, your theme’s color settings, and JavaScript errors in the browser console. Below, we’ll walk through the five Classic Editor fixes in order (clear your browser cache, deactivate your plugins, replace the TinyMCE folder, edit wp-config.php, and install the Advanced Editor Tools plugin), then the Block Editor checks.

Why is your WordPress editor showing white text and missing buttons?

In the Classic Editor, the culprit is almost always a corrupted browser cache or a plugin conflict that stops the editor’s scripts from loading. In the Block Editor, the usual causes are different: theme color settings that carry over into the editor, a stray inline style, or a JavaScript error.

Before we dig in, let’s clarify exactly what we mean by the “visual editor.” This refers to the nicely formatted editor you use to create your posts or pages in WordPress, whether that’s the newer Block Editor or the Classic Editor, restored by the Classic Editor plugin.

The symptom shows up in both editors, so start by checking which one you’re using. If you’re on the Classic Editor plugin, work through the five steps below in order. If you’re in the Block Editor, skip ahead to the sections on theme color settings and JavaScript errors.

The toolbar’s formatting buttons suddenly vanish. The text you write in the editor field may appear the same color as the background (white text on a white background), making it unreadable. Sometimes the editor simply loads as a blank white screen when you go to edit a post or page.

This makes using the editor pretty much impossible. If you rely on it to create your blog content, you’ll want to fix this problem as quickly as possible. Fortunately, this issue isn’t difficult to correct.

One 30-second check before anything else: switch to the Text tab (Classic Editor) or the code editor (Block Editor) and look for an inline style wrapping your content, such as <span style=”color: #ffffff”>. Delete it, update the post, and reload the editor.

What to do before you start troubleshooting

Before you start troubleshooting, we recommend making a backup of your site. If you’re using DreamHost, we make the backup process incredibly easy.

If you’re using a different hosting provider, it likely also offers a backup solution. You can consult the appropriate documentation for instructions. You can also opt for a WordPress backup plugin such as UpdraftPlus.

How to fix white text and missing buttons in the WordPress visual editor (in 5 steps)

In the Classic Editor, this error is most likely either a problem with your browser cache or with the Classic Editor itself, both of which can be easily fixed. (In the Block Editor? Skip to the theme color and JavaScript sections below.) We recommend following these five steps in order, and only proceeding to the next if you’re still experiencing the issue.

Step 1: Clear your browser cache

The first and simplest method you can try is clearing your browser cache. Your browser saves versions of websites you visit (including your WordPress editor) to make loading them quicker.

If your cache is corrupted or has stored a version of a page with errors, it may continue to load the broken page. Clearing the cache forces the browser to load a fresh copy of the editor, hopefully resolving the problem.

To clear your cache in Google Chrome, click on the three-dot More menu icon in the upper-right corner, and then select Delete browsing data. Choose a time range, such as All time.

In the Delete browsing data dialog, make sure only Cached images and files is selected, and then click on Delete data. If you don’t use Chrome or want further guidance, you can refer to our guide on clearing your browser cache.

Step 2: Deactivate all of your WordPress plugins

Next, you can check if a plugin might be causing the issue. A quick diagnostic first: open your browser’s developer console (right-click the editor page, choose Inspect, then the Console tab) and reload the editor. If an error names a script in wp-content/plugins, that plugin is your suspect. No clear error? Fall back to process of elimination. The best way to do this is to deactivate all your plugins (except for the Classic Editor), check to see if the problem is resolved, and then re-enable them one by one until the error returns.

At that point, you’ll have isolated the problematic plugin. Then you can check for updates, look for alternatives, or simply leave it deactivated if it’s one you don’t depend on.

To deactivate your WordPress plugins, head to the dashboard and navigate to Plugins > Installed Plugins.

Check the box next to all of the plugins except for the Classic Editor. In the Bulk actions box, you can choose Deactivate and click on Apply. Then reload the WordPress editor and verify that everything is working properly.

If deactivating your plugins resolved the error, your next step is to isolate the plugin that was causing it. You can go down the list one by one and click on the Activate button under the plugin’s name. After each one is reactivated, check to see if the error has reappeared. If not, you can move on until you find the problematic plugin.

Step 3: Replace the TinyMCE folder

TinyMCE is the rich-text editor used by the WordPress Classic Editor. It’s JavaScript-based, so when one of its scripts fails to load, the editor breaks.

An issue with the TinyMCE files can cause the editor’s buttons to disappear. To fix this, you can replace the folder with a fresh copy.

First, download the version of WordPress your site is using. You can find the current version number by checking the bottom-right corner of any page in your WordPress dashboard.

Open up the WordPress zip file and move the TinyMCE folder somewhere else, such as your desktop. It’s located at wp-includes/js/tinymce.

Finally, you’ll need to access your WordPress site’s file system and replace the old folder with the new one. If your site is hosted with DreamHost (including DreamPress), log in to the DreamHost panel and open Manage Websites to find your site. Under the Details section, click on Manage Files to open the DreamHost file browser.

If you’re not a DreamHost customer, you can also access your site via Secure File Transfer Protocol (SFTP). Navigate to wp-includes/js and upload the new copy of the TinyMCE folder using the “up arrow” button in the bottom left. Then you can refresh your WordPress dashboard and check the editor again.

Step 4: Modify the wp-config.php file

If the above fixes haven’t worked, you can try modifying your wp-config.php file to force WordPress to load scripts individually. To do so, start by opening up your WordPress site in the DreamHost file manager or via SFTP, as outlined above.

The wp-config.php file is located in the root directory of your site. Simply add the following line of code to the top of the file, right after the opening <?php tag:

define( 'CONCATENATE_SCRIPTS', false );

Here’s what your code should look like:

When you’re done, save the file, refresh your site, and then try to load the visual editor again. If you’re still seeing the error message, proceed to the last step.

Step 5: Install the Advanced Editor Tools plugin

Previously known as TinyMCE Advanced, the Advanced Editor Tools plugin is a version of the TinyMCE script that offers additional features.

Essentially, it provides you with a hybrid of the TinyMCE editor and the Block Editor. Also, it’s free to download and use.

After you install and activate it, you can locate the settings by navigating to Settings > Advanced Editor Tools.

Once it’s activated and you’ve configured the settings to your liking, refresh your WordPress site. Now, when you go to a new WordPress post or page, you should see that the previously missing buttons appear in your visual editor.

White text in the Block Editor? Check your theme’s color settings

If your text turns white in the Block Editor, your theme is the most likely cause. WordPress deliberately loads your theme’s styles inside the Block Editor (the Block Editor handbook calls these “editor styles”) so that the editing view matches your live site. If your theme or a Customizer setting defines a white text or heading color, the editor inherits it, and your words disappear against the white editing background.

To check, go to Appearance > Customize (or the Styles panel if you use a block theme) and review your text and heading colors. If any are set to white or a very light shade, change them to a darker color, save, and reload the editor.

Not sure it’s the theme? Temporarily switch to a default theme such as Twenty Twenty-Four. If your text reappears in the editor, the previous theme’s color settings were the culprit. Fix the colors there, or ask the theme’s developer about loading an editor-specific stylesheet.

Check for JavaScript errors and inline color styles

A JavaScript error can stop either editor from initializing, leaving you with missing toolbar buttons, invisible text, or a blank white screen. Andrew Ozz, the developer of the Advanced Editor Tools plugin, gives the same diagnosis on the WordPress.org support forums: when the editor can’t initialize, a JavaScript error is usually the reason, and the browser console shows which script caused it.

To find the failing script, right-click the editor page, choose Inspect, and open the Console tab. Reload the page and look for red error messages. An error pointing to a file under wp-content/plugins or wp-content/themes tells you exactly which plugin or theme to deactivate or update, so there’s no blind trial and error.

While you’re there, check the content itself, too. Open the Text tab in the Classic Editor, or the three-dot options menu > Code editor in the Block Editor, and look for markup such as <span style=”color: #ffffff”> wrapping your text. Pasted content often carries these inline styles along with it. Delete the offending tags and update the post.

FAQs about the WordPress editor white text error

Why can’t I type in the WordPress editor?

The editor’s scripts probably failed to load, usually because of a corrupted browser cache or a plugin conflict. Clear your browser cache first, then deactivate plugins one by one. Your text may also just be invisible — highlight the editor field to check whether it’s there.

Why is the WordPress editor just a white screen?

A blank white editor screen usually means a JavaScript error stopped the editor from loading. Open your browser’s console to find the failing script, clear your cache, and deactivate conflicting plugins. In the Classic Editor, replacing the TinyMCE folder with a fresh copy can also fix it.

Why is the WordPress editor toolbar not showing?

The toolbar disappears when the editor’s scripts don’t load completely — most often a browser cache or plugin problem. Clear your cache and deactivate plugins first. If that fails, add the CONCATENATE_SCRIPTS line from Step 4 to your wp-config.php file so WordPress loads scripts individually.

Does this error happen on mobile too?

It can. The causes live in your browser or on your site, rather than your device, so the same fixes apply. Clear your mobile browser’s cache first, then switch to a desktop for the remaining steps — plugin toggling and file edits are much easier there.

Additional WordPress issue resources

Want to learn more about fixing common WordPress errors? We’ve put together several guides to help you.

• How to Fix the 500 Internal Server Error in WordPress
• How to Fix Syntax Errors in WordPress
• How to Fix the WordPress Not Sending Email Issue
• How to Fix the Error Establishing Database Connection in WordPress
• How to Fix WordPress Error 404 Not Found
• How to Fix the Sidebar Below Content Error in WordPress (In 3 Steps)

WordPress visual editor problem, solved

If your WordPress editor is experiencing problems, such as unreadable white text or disappearing buttons, don’t worry. Like many WordPress errors, this one is relatively simple to fix, and there are multiple methods you can try.

As we’ve discussed, if you’re using the Classic Editor, you can follow these five steps to resolve the white text and missing buttons error:

1. Clear your browser cache.
2. Deactivate your WordPress plugins.
3. Replace the TinyMCE folder with a fresh copy.
4. Modify your wp-config.php file.
5. Install the Advanced Editor Tools plugin.

If you’re in the Block Editor instead, check your theme’s color settings and the browser console for JavaScript errors first. If you want to make troubleshooting easier, consider using DreamPress, our managed WordPress hosting solution. With DreamPress, we take care of problems for you, so you can focus on what matters.