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 fire up the Classic 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. It may even prevent you from getting work done, potentially putting you behind schedule. Fortunately, there are several solutions to this issue.

In this article, we’ll look at exactly what this error involves and then walk you through how to fix it in five steps. Let’s get started!

An Introduction to the White Text and Missing Buttons Error in the WordPress Visual Editor

Before we dig into this error, 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 Classic Editor or the newer Block Editor.

The error we’re dealing with in this article occurs with the visual editor when using the Classic Editor plugin.

The formatting buttons along the top suddenly vanish. Additionally, the text you write in the editor field may appear the same color as the background, making it unreadable.

This makes using the Classic 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.

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)

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. 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 menu icon in the upper-right corner, and then click on Settings. Under the Privacy and security section, select Clear browsing data.

In the pop-up, make sure only Cached images and files is selected, and then click on Clear 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. 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 technical name for the WordPress Classic Editor. It’s an open-source editor that’s used by quite a few platforms, in addition to WordPress.

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. Head to your DreamPress account (see Step 1 for instructions). 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.

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, you can follow these five steps to resolve the white text and missing buttons error in the WordPress editor:

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 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.