{"id":30074,"date":"2021-03-18T07:00:00","date_gmt":"2021-03-18T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=30074"},"modified":"2025-10-31T11:35:08","modified_gmt":"2025-10-31T18:35:08","slug":"how-to-fix-white-text-missing-buttons-wordpress","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/how-to-fix-white-text-missing-buttons-wordpress\/","title":{"rendered":"How to Fix White Text and Missing Buttons in the WordPress Visual Editor (5 Steps)"},"content":{"rendered":"\n

Picture this: You log in to your WordPress dashboard<\/span> 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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

In this article, we\u2019ll look at exactly what this error involves and then walk you through how to fix it in five steps. Let\u2019s get started!<\/p>\n\n\n\n

An Introduction to the White Text and Missing Buttons Error in the WordPress Visual Editor<\/strong><\/h2>\n\n\n\n

Before we dig into this error, let\u2019s clarify exactly what we mean by the \u201cvisual editor.\u201d This refers to the nicely-formatted editor you use to create your posts or pages in WordPress, whether that\u2019s the Classic Editor or the newer Block Editor<\/a><\/span>.<\/p>\n\n\n\n

The error we\u2019re dealing with in this article occurs with the visual editor when using the Classic Editor plugin<\/a><\/span>.<\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n\n

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.<\/p>\n\n\n\n

This makes using the Classic Editor pretty much impossible. If you rely on it to create your blog content<\/a><\/span>, you\u2019ll want to fix this problem as quickly as possible. Fortunately, this issue isn\u2019t difficult to correct.<\/p>\n\n\n\n

What to Do Before You Start Troubleshooting<\/span><\/h2>\n\n\n\n

Before you start troubleshooting, we recommend making a backup of your site. If you\u2019re using DreamHost, we make the backup process<\/a><\/span> incredibly easy.<\/p>\n\n\n\n

If you\u2019re 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<\/a><\/span>.<\/p>\n\n\n\n\n\n\n

\"Ad<\/div>\n\n\n\n\n
\n \n Skip the WordPress Error Stress\n <\/h2>\n \n Avoid troubleshooting when you sign up for DreamPress. Our friendly WordPress experts are available 24\/7 to help solve website problems \u2014 big or small.\n <\/p>\n\n \n Check Out Plans <\/a>\n\n <\/div>\n<\/div>\n\n\n

How to Fix White Text and Missing Buttons in the WordPress Visual Editor (In 5 Steps)<\/span><\/h2>\n\n\n\n

This error is most likely either a problem with your browser cache or with the Classic Editor itself  \u2014 both of which can be easily fixed. We recommend following these five steps in order, and only proceeding to the next if you\u2019re still experiencing the issue.<\/p>\n\n\n\n

Step 1: Clear Your Browser Cache<\/span><\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

To clear your cache in Google Chrome, click on the three-dot menu icon in the upper-right corner, and then click on Settings<\/span>. Under the Privacy and security<\/span> section, select Clear browsing data<\/span>.<\/p>\n\n\n

\n
\"Options<\/figure><\/div>\n\n\n

In the pop-up, make sure only Cached images and files<\/span> is selected, and then click on Clear data<\/span>. If you don\u2019t use Chrome or want further guidance, you can refer to our guide on clearing your browser cache<\/a><\/span>.<\/p>\n\n\n\n

Step 2: Deactivate All of Your WordPress Plugins<\/span><\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

At that point, you\u2019ll have isolated the problematic plugin. Then you can check for updates, look for alternatives, or simply leave it deactivated if it\u2019s one you don\u2019t depend on.<\/p>\n\n\n\n

To deactivate your WordPress plugins, head to the dashboard and navigate to Plugins > Installed Plugins<\/span>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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

If deactivating your plugins <\/span>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 <\/span>button under the plugin\u2019s 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.<\/p>\n\n\n\n

\n\tRelated Article<\/span>\n\t
\n\t\t
\n\t\t\t18 Pro Tips for Choosing the Perfect WordPress Theme\n\t\t<\/div>\n\t\t\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n\n

Step 3: Replace the TinyMCE Folder<\/span><\/h3>\n\n\n\n

TinyMCE<\/a><\/span> is the technical name for the WordPress Classic Editor. It\u2019s an open-source editor that\u2019s used by quite a few platforms, in addition to WordPress.<\/p>\n\n\n\n

An issue with the TinyMCE files can cause the editor\u2019s buttons to disappear. To fix this, you can replace the folder with a fresh copy.<\/p>\n\n\n\n

First, download the version of WordPress<\/a><\/span> your site is using. You can find the current version number by checking the bottom-right corner of any page in your WordPress dashboard.<\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n\n

Open up the WordPress zip file and move the TinyMCE folder somewhere else, such as your desktop. It\u2019s located at wp-includes\/js\/tinymce<\/span>.<\/p>\n\n\n\n

Finally, you\u2019ll need to access your WordPress site\u2019s file system and replace the old folder with the new one. Head to your DreamPress account (see Step 1 for instructions). Under the Details <\/span>section, click on Manage Files <\/span>to open the DreamHost file browser.<\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n\n

If you\u2019re not a DreamHost customer, you can also access your site via Secure File Transfer Protocol (SFTP)<\/a><\/span>. Navigate to wp-includes\/js<\/span> and upload the new copy of the TinyMCE folder using the \u201cup arrow\u201d button in the bottom left. Then you can refresh your WordPress dashboard and check the editor again.<\/p>\n\n\n\n

Step 4: Modify the wp-config.php<\/span> File<\/strong><\/h3>\n\n\n\n

If the above fixes haven\u2019t worked, you can try modifying your wp-config.php<\/span> 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.<\/p>\n\n\n\n

The wp-config.php <\/span>file is located in the root directory of your site. Simply add the following line of code<\/a><\/span> to the top of the file, right after the opening <php><\/span> tag:<\/p>\n\n\n\n

define(\u2018CONCATENATE_SCRIPTS\u2019,false);<\/pre>\n\n\n\n
Here\u2019s what your code should look like:<\/p>\n\n\n
\n
\"The<\/figure><\/div>\n\n\n
When you\u2019re done, save the file, refresh your site, and then try to load the visual editor again. If you\u2019re still seeing the error message, proceed to the last step.<\/p>\n\n\n\n
Step 5: Install the Advanced Editor Tools<\/a><\/span> Plugin<\/strong><\/h3>\n\n\n\n
Previously known as TinyMCE Advanced, the Advanced Editor Tools plugin<\/a><\/span> is a version of the TinyMCE script that offers additional features.<\/p>\n\n\n
\n
\"The<\/figure><\/div>\n\n\n
Essentially, it provides you with a hybrid of the TinyMCE editor and the Block Editor. Also, it\u2019s free to download and use.<\/p>\n\n\n\n
After you install and activate it, you can locate the settings by navigating to Settings > Advanced Editor Tools<\/span>.<\/p>\n\n\n
\n
\"The<\/figure><\/div>\n\n\n
Once it\u2019s activated and you\u2019ve 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.<\/p>\n\n\n\n
Additional WordPress Issue Resources<\/strong><\/h2>\n\n\n\n
Want to learn more about fixing common WordPress errors<\/a><\/span>? We\u2019ve put together several guides to help you.<\/p>\n\n\n\n