How to Fix White Text and Missing Buttons in the WordPress Visual Editor

Nov 28, 2022
0 comment

Are you encountering white text and missing buttons in the WordPress Visual Editor?

Consider the following scenario: You log into your WordPress dashboard to create a new blog post. A problem arises when you open the Classic Editor. Neither formatting buttons nor text are visible and all text is white.

Errors like this are frustrating because they ruin your productivity.

But that’s okay: There are several options for solving this problem.

This article will show you how to fix WordPress editor white text error in five simple steps. Let’s start!

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

Before we dig deeper into this bug, let’s clarify exactly what we mean by “image editor”. This refers to the beautifully formatted editor you use to create your posts or pages in WordPress, whether it’s the Classic Editor or the newer Block Editor.

The error we are addressing in this post occurs in the visual editor when using the Classic Editor plugin.

The formatting buttons at the top suddenly disappear. In addition, the text you type in the editor area may appear in the same color as the background, making it unreadable.

This makes it nearly impossible to use the Classic Editor. If you rely on it to create your blog content, you will want to resolve this issue as quickly as possible. Fortunately, this issue is not difficult to fix.

Fix WordPress Editor White Text Error

Step 1: Empty Your Browser Cache

First of all, clear your browser’s cache. Browsers save the versions of websites you visit (including your WordPress editor) to make them load faster.

A corrupted cache, or a cache that stores versions of faulty pages, can still display the corrupted version of a page. Clearing the cache will force the browser to reload the editor and hopefully prevent the problem from recurring.

Step 2: Disable All Your WordPress Plugins

Then you can check if a plugin is causing the problem. The best way to do this is to disable all your plugins (except the Classic Editor), check if the issue is resolved, and then re-enable them one by one until the error returns.

At this point, you will have isolated the problematic plugin. You can then check for updates, look for alternatives, or disable them if you don’t trust them.

To disable your WordPress plugins, go to the control panel and go to Plugins > Installed Plugins.

Step 3: Get a New TinyMCE Folder

TinyMCE is the technical name for WordPress Classic Editor. It is an open source editor used by quite a few platforms in addition to WordPress.

A problem with TinyMCE files can cause editor buttons to disappear. To fix this, you can replace the folder with a fresh copy.

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

Unzip the WordPress zip file and move the TinyMCE folder to another location like your desktop. It is located at wp-includes/js/tinymce.

Finally, you will need to access the file system of your WordPress site and replace the old folder with the new one.

You can also access your site via Secure File Transfer Protocol (SFTP). Go to wp-includes/js and upload fresh copy of TinyMCE folder using “up arrow” button at bottom left. Then you can refresh your WordPress dashboard and check the editor again.

Step 4: Edit the wp-config.php file

If none of the above solutions worked for you, open your wp-config.php file and add the following line after the PHP opening tag.

efine('CONCATENATE_SCRIPTS', false);

This forces WordPress to load the scripts one by one and fix the problem. The wp-config.php file can be found in the root of your site. Once this is done save the file, refresh the page and then try to reload the visual editor. If you still see this error message, skip to the last step.

Step 5: Install the Advanced Editor Tools Plugin

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

Basically, it gives you a mix of TinyMCE editor and Block Editor. Also, it is free to download and use. After installing and activating, you can find the settings by going to Settings > Advanced Editor Tools.

Once activated and configured the settings to your liking, refresh your WordPress site. Now, whenever you navigate to a new WordPress post or page, you should see the previously missing buttons appear in your visual editor.

Troubleshooting WordPress Visual Editor: Final thoughts

Don’t worry if your WordPress editor encounters issues like unreadable white text or disappearing buttons. This is one of the WordPress errors that you can easily fix in multiple ways.

Here are five steps you can take to fix the white text and missing button error in WordPress:

First, clear your cache.
Disable/re-enable your plugins.
Delete the TinyMCE folder with a fresh copy.
Edit your wp-config.php file.
Get the advanced editor tool add-on.

This last step probably seems like the easiest, but remember that you should only install plugins when really necessary!

I hope you found this article helpful in fixing White Text and Missing Buttons in WordPress Visual Editor.

We hope this article helped you fix the White Text and Missing Buttons Error. You may also want to see our list of the most common WordPress errors and how to fix them.

If you liked this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Dribbble and Behance.