{"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":"2026-08-27T14:17:50","modified_gmt":"2026-08-27T21:17:50","slug":"how-to-fix-white-text-missing-buttons-wordpress","status":"publish","type":"post","link":"https:\/\/www.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 open the 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, 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\u2019s 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.<\/p>\n\n\n\n

White text and missing buttons in the WordPress editor have different causes depending on which editor you use. In the Classic Editor, it\u2019s 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\u2019s color settings, and JavaScript errors in the browser console.<\/strong> Below, we\u2019ll walk through the five Classic Editor fixes in order (clear your browser cache, deactivate your plugins, replace the TinyMCE folder, edit wp-config.php<\/span>, and install the Advanced Editor Tools plugin), then the Block Editor checks.<\/p>\n\n\n\n

Why is your WordPress editor showing white text and missing buttons?<\/strong><\/h2>\n\n\n\n

In the Classic Editor, the culprit is almost always a corrupted browser cache or a plugin conflict that stops the editor\u2019s 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.<\/p>\n\n\n\n

Before we dig in, 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 newer Block Editor<\/a><\/span> or the Classic Editor, restored by the Classic Editor plugin<\/a><\/span>.<\/p>\n\n\n\n

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

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

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

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

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”><\/span>. Delete it, update the post, and reload the editor.<\/p>\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

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\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 More<\/span> menu icon in the upper-right corner, and then select Delete browsing data<\/span>. Choose a time range, such as All time<\/span>.<\/p>\n\n\n

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

In the Delete browsing data<\/span> dialog, make sure only Cached images and files<\/span> is selected, and then click on Delete 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. A quick diagnostic first: open your browser\u2019s developer console (right-click the editor page, choose Inspect<\/span>, then the Console<\/span> tab) and reload the editor. If an error names a script in wp-content\/plugins<\/span>, 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.<\/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 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\tWordPress Themes: How to Choose the Right One (18 Pro Tips)\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 rich-text editor used by the WordPress Classic Editor. It\u2019s JavaScript-based, so when one of its scripts fails to load, the editor breaks.<\/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>\n<\/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. If your site is hosted with DreamHost (including DreamPress<\/a><\/span>), log in to the DreamHost panel and open Manage Websites<\/span> to find your site. Under the Details <\/span>section, click on Manage Files <\/span>to open the DreamHost file browser.<\/p>\n\n\n

\n
\"The<\/figure>\n<\/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( 'CONCATENATE_SCRIPTS', false );<\/pre>\n\n\n\n
Here\u2019s what your code should look like:<\/p>\n\n\n
\n
\"The<\/figure>\n<\/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>\n<\/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>\n<\/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
White text in the Block Editor? Check your theme\u2019s color settings<\/strong><\/h2>\n\n\n\n
If your text turns white in the Block Editor, your theme is the most likely cause. WordPress deliberately loads your theme\u2019s styles inside the Block Editor (the Block Editor handbook<\/a><\/span> calls these \u201ceditor styles\u201d) 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.<\/p>\n\n\n\n
To check, go to Appearance > Customize<\/span> (or the Styles<\/span> 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.<\/p>\n\n\n\n
Not sure it\u2019s the theme? Temporarily switch to a default theme such as Twenty Twenty-Four. If your text reappears in the editor, the previous theme\u2019s color settings were the culprit. Fix the colors there, or ask the theme\u2019s developer about loading an editor-specific stylesheet.<\/p>\n\n\n\n
Check for JavaScript errors and inline color styles<\/strong><\/h2>\n\n\n\n
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<\/a><\/span>: when the editor can\u2019t initialize, a JavaScript error is usually the reason, and the browser console shows which script caused it.<\/p>\n\n\n\n
To find the failing script, right-click the editor page, choose Inspect<\/span>, and open the Console<\/span> tab. Reload the page and look for red error messages. An error pointing to a file under wp-content\/plugins<\/span> or wp-content\/themes<\/span> tells you exactly which plugin or theme to deactivate or update, so there\u2019s no blind trial and error.<\/p>\n\n\n\n
While you\u2019re there, check the content itself, too. Open the Text tab in the Classic Editor, or the three-dot options menu > Code editor<\/span> in the Block Editor, and look for markup such as <span style=”color: #ffffff”><\/span> wrapping your text. Pasted content often carries these inline styles along with it. Delete the offending tags and update the post.<\/p>\n\n\n\n
FAQs about the WordPress editor white text error<\/strong><\/h2>\n\n\n\n
Why can\u2019t I type in the WordPress editor?<\/strong><\/h3>\n\n\n\n
The editor\u2019s 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 \u2014 highlight the editor field to check whether it\u2019s there.<\/p>\n\n\n\n
Why is the WordPress editor just a white screen?<\/strong><\/h3>\n\n\n\n
A blank white editor screen usually means a JavaScript error stopped the editor from loading. Open your browser\u2019s 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.<\/p>\n\n\n\n
Why is the WordPress editor toolbar not showing?<\/strong><\/h3>\n\n\n\n
The toolbar disappears when the editor\u2019s scripts don\u2019t load completely \u2014 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<\/span> file so WordPress loads scripts individually.<\/p>\n\n\n\n
Does this error happen on mobile too?<\/strong><\/h3>\n\n\n\n
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\u2019s cache first, then switch to a desktop for the remaining steps \u2014 plugin toggling and file edits are much easier there.<\/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