One place for hosting & domains

      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 WordPress visual editor.

      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.

      Skip the WordPress Error Stress

      Avoid troubleshooting when you sign up for DreamPress. Our friendly WordPress experts are available 24/7 to help solve website problems — big or small.

      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.

      Options for clearing user data and cache in Google Chrome.

      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.

      The WordPress version in use on a website.

      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.

      The DreamHost file manager.

      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:

      The wp-config.php file, showing the location of the opening <php> tag.

      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.

      The Advanced Editor Tools plugin.

      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.

      The Advanced Editor Tools plugin settings.

      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.

      Website Management Made Easy

      Let us handle the backend — we’ll manage and monitor your website so it’s safe, secure, and always up.

      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.



      Source link

      White Paper: Running Cloud Native Applications on DigitalOcean Kubernetes


      Download the Kubernetes White Paper


      Running Cloud Native Applications on DigitalOcean Kubernetes (PDF)

      Abstract

      The Running Cloud Native Applications on DigitalOcean Kubernetes White Paper brings readers through a variety of cloud native topics, introducing them to how they may leverage Kubernetes in order to manage and scale their applications.

      This white paper provides further insight into:

      • Trends in Modern Application Development
      • The Cloud Native Ecosystem
      • Microservices
      • Containers
      • Clusters
      • Kubernetes and DigitalOcean Kubernetes

      Throughout the White Paper, a photo-sharing app called “Snappy” is used as a running example to demonstrate the value of implementing Cloud Native best practices.

      Executive Summary: Scaling Cloud Native Apps

      In today’s fast-moving software landscape, advances in operations technologies have fostered the dramatic reduction of application release cycles. Traditionally, software releases follow a time-based schedule, but it has become increasingly common to see applications and services continuously delivered and deployed to users throughout the day. This truncating of the traditional software release cycle has its roots both in technological developments — such as the explosive growth of cloud platforms, containers, and microservices-oriented architectures — as well as cultural developments — with tech-savvy and mobile-enabled users increasingly expecting new features, fast bug fixes, and a responsive and continuously developing product.

      This symbiotic relationship between end users and developers has become increasingly linked. Shifting organizational structures and application architectures allow developers to quickly incorporate feedback and react to user demands. This accelerated development cadence often accompanies the packaging of applications into containers, and the use of systems that automate their deployment and orchestration, like Docker Swarm, Marathon, and Kubernetes. These open-source platforms, now stable enough for large-scale production deployments, allow service owners to launch and scale applications themselves, effortlessly managing hundreds of running containers.

      Kuberntes Diagram

      Kubernetes and DigitalOcean Kubernetes

      Kubernetes, initially open-sourced by Google in 2014, has today grown to become one of the highest velocity projects on GitHub, with over 11,300 contributing developers and 75,000 commits. The growth of its thriving open-source community mirrors its popularity in the private sector, with over 50% of Fortune 100 companies relying on Kubernetes every day to rapidly deploy new features and bug fixes to users.

      DigitalOcean Kubernetes enables development teams both small and large to quickly take advantage of this market-leading container orchestration platform without the lead time required to provision, install, and operate a cluster. With its simplicity and developer-friendly interfaces, DigitalOcean Kubernetes empowers developers to launch their containerized applications into a managed, production-ready cluster without having to maintain and configure the underlying infrastructure. Seamlessly integrating with the rest of the DigitalOcean suite — including Load Balancers, Firewalls, Object Storage Spaces, and Block Storage Volumes — and with built-in support for public and private image registries like Docker Hub and Quay.io, developers can now run and scale container-based workloads with ease on the DigitalOcean platform.

      With full programmatic control of their cluster using the exposed Kubernetes REST API, developers can benefit from the rich ecosystem of open-source tools while still reaping the convenience of managed infrastructure. Teams can flexibly deploy and scale their Cloud Native applications. A Certified Kubernetes conformant platform, DigitalOcean Kubernetes helps developers launch their application containers and bring their Kubernetes workloads into the DigitalOcean cloud with minimal configuration and operations overhead.

      To learn more about scaling and managing Cloud Native applications, microservices, containers, and Kubernetes, download your free copy of Running Cloud Native Applications on DigitalOcean Kubernetes!

      Download the Kubernetes White Paper


      Running Cloud Native Applications on DigitalOcean Kubernetes (PDF)



      Source link