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

One very strange but also very common error WordPress users face is the one that causes your text to change to white and your buttons in the editor to go missing. On top of that, this error could also disable you from switching from your visual to your HTML editor. Terrible, we know!

Is your #WordPress #visualeditor showing only white text and is missing buttons? This article will give you more than one solution to the problem! Click To Tweet

Although this error doesn’t do any serious damage it does completely take away from you the ability to create anything in WordPress which is the essence of the platform.

Visual editor buttons

Since we love WordPress as much as you do and hate to see anyone struggle to use the platform, we decided to write this article in which we will give our best suggestions on how to resolve the error. So in order to not keep you waiting any longer, let’s get right into it!

The cause(s) of the issue

Unfortunately, for most errors, there always has to be more than one cause. For this one, the bullet points below represent the most common causes we came across.

  • You have a lot of browser cache accumulated
  • There is an issue with your installation
  • There is a conflict between plugins and their JS files
  • You’re missing the TinyMCE plugin in your theme

Possible solutions to the problem

If you have read any of our “how-to” articles before, you know we always recommend creating an under maintenance page for your site before making any changes to it. That way, in case you make any mistakes in the process, they stay hidden from the public.

To create the page, you should be using something like the Coming Soon & Maintenance Mode plugin.

Coming Soon & Maintenance Mode

Coming Soon & Maintenance Mode is a tool equipped with a drag-and-drop builder, 170+ themes, best-in-class SEO setup, CRM functionalities, autoresponder and emailing services, a rebranding option, and a lot more useful features. In a nutshell, it’s the best solution for creating temporary yet beautiful under maintenance/coming soon pages.

To make things even easier for you, the plugin is also integrated with Depositphotos, meaning you will be able to source all the visuals for your page directly from the plugin. But if Depositphotos is not your cup of tea, there’s always Yay Images and Stock Unlimited.

Update your WordPress site and/or your theme

Updating your WordPress site and/or your theme should be your starting point when trying to resolve this issue since it is very easy to do but also effective in a lot of cases.

If neither of the updates do the trick, then you might want to try completely changing your WordPress theme. But if you have already done that and the issue still persists, then you can turn to the other error resolution methods we’ve listed below.

Clear your browser cache

Accumulated browser cache can cause quite a lot of issues, and that includes this one as well. That’s why the next thing you should try to do is clearing your browser cache.

When doing so, make sure to clear all of the cached files and then to restart the application.

Another tip that is browser-related would be to try using a different browser. For instance, Mozzila if you are currently using Chrome.

Install the TinyMCE plugin in your theme

The TinyMCE plugin is something everyone familiar with WordPress has heard of. TinyMCE lets you add, remove and arrange the buttons in the visual editor, and often if that plugin isn’t included in a theme used by a particular WordPress site, the visual editor on that site will not be working the way it is supposed to be.

To see if this is the root of the error your visual editor is facing, just go ahead and install the plugin, and after that, just refresh the site.

Although it seems simple, it might do the trick!

TinyMCE plugin

Replace TinyMCE scripts

The issue occurred after an installation or update? In a lot of cases it can happen that during either of those processes, your TinyMCE files get corrupted causing your text to go white and your editor buttons to go missing.

What this means is that another potential solution might be to replace the existing TinyMCE scripts with fresh ones. How can you do that?

All you need to do is download a fresh copy of WordPress and replace the /wp-includes/js/tinymce/ folder on your server with the same one from the fresh copy of WP.

TinyMCE folder

Change your JavaScript settings

Don’t get scared when we say this, but you might be able to resolve the issue by opening up and fixing your wp-config.php file.

We know that a lot of people hate poking around these types of files and the code within those files, but don’t worry we won’t be instructing you to do anything too difficult.

All you have to do is open the file.

WP config file

Find the PHP opening tag which should be at the very top, and add the following line:

define(‘CONCATENATE_SCRIPTS’, False);

WP config file opening line

Deactivate plugins

Plugins can bring major benefits to your site but can also cause a few problems while they are there, especially if there is a number of them installed.Why? Well, often plugins conflict with each other and by doing so affect some of the features of your site, including your visual editor.

Luckily, if this is the case, the issue can be resolved by deactivating plugins one by one or all at once.

If you do decide to deactivate all of them at once, you should consider using the WP Reset plugin to make that happen. WP Reset will delete all of your plugins in just a click and in a matter of seconds. Plus, it will also allow you to create a collection of plugins that you can install in bulk over and over again whenever you need to.

WP Reset plugin

This plugin is capable of a lot more when it comes to testing, debugging, resetting, etc.. And you can learn all about that by visiting the WP Reset website or by watching the video below.

Trust us you won’t regret getting to know this tool!

Install the Google Libraries plugin

When it comes to JavaScript files, WordPress loads them from its own directory, and if by any chance some of those files seem untrustworthy or go missing, that will cause the visual editor to stop working properly.

To avoid getting into either of those situations you can simply install the Google Libraries plugin which will provide your site with the most common JavaScript libraries from Google’s AJAX Libraries CDN.

By the way, the Google Libraries plugin is free to use and available for download in the WordPress repository.

Conclusion

We really did our best to dig up every possible solution to this problem, and we truly hope that at least one of them worked for you.

Also, if you found anything that was said in the article, complicated or confusing (fingers crossed you didn’t), be sure to ask for help in the comments below.

Good luck and thanks for reading!

Leave a Comment