In the past, altering background colors in WordPress required coding skills and a bit of luck to avoid errors. Thankfully, those days are behind us. WordPress has evolved significantly, and the block editor now simplifies customization like never before.
However, many website owners still find it challenging to achieve the perfect background color.
Through managing numerous WordPress sites and assisting thousands of users, we’ve discovered the easiest and most effective methods for making these adjustments.
This guide will provide you with clear instructions on how to change background colors in the WordPress block editor, applicable to any theme and suitable for all skill levels.
Important Note:To clarify, this guide focuses on changing the background color within your WordPress admin dashboard, where you create and edit your posts.
If you’re looking to change the background color on your live website for your visitors, don’t worry. We have a bonus section later in this guide, or you can check out our comprehensive tutorial on changing background colors in WordPress.
Why Should You Change the Background Color of the WordPress Block Editor?
There are several reasons you might want to customize the background color of the WordPress block editor.
Many contemporary WordPress themes, such as OceanWP and GeneratePress, typically utilize the same background color for the block editor as seen on the live site.
If your WordPress theme features different colors, the appearance of your post in the editor may significantly differ from how it appears to users on the live website.
Another factor to consider is your personal comfort.
If you spend long hours writing, a bright white screen can strain your eyes. Switching to a softer background color in the editor can enhance your overall writing experience.
Now, let’s explore how to easily change the background color of the WordPress editor.
Steps to Change the WordPress Editor Background Color
You can modify the WordPress editor background color by adding custom code to your theme’s functions.php file.
However, even a minor mistake in the code can cause your website to malfunction and become inaccessible.
This is why we suggest using the WPCode plugin.
After extensive testing, we found that it is the simplest and safest method to incorporate custom code into your WordPress site. For more details, check out our WPCode review.
Begin by installing and activating the WPCode plugin. For detailed instructions, refer to our comprehensive guide on installing a WordPress plugin.
Important Note: WPCode offers a free plan suitable for this tutorial, but upgrading to the premium plan unlocks additional features like a code snippet library and conditional logic.
After activation, navigate to the Code Snippets » +Add Snippet section in the WordPress admin sidebar.
Click the ‘Use Snippet’ button located under the ‘Add Your Custom Code (New Snippet)’ option.
You will be directed to the ‘Create Custom Snippet’ page, where you can start by entering a name for your code snippet. This name is for your reference and can be anything that helps you recognize the code.
Next, choose ‘PHP Snippet’ from the prompt that appears after selecting the ‘Code Type’ menu in the top-right corner of the screen.
Then, copy and paste the following code into the ‘Code Preview’ box:
add_action( 'admin_footer', function() { ?>
<?php });
This code snippet performs two straightforward functions. The add_actionThis section instructs WordPress to apply our custom styles to the footer of the admin area.
Within this section, the CSS code targets the main container of the block editor (.editor-styles-wrapper) and assigns a new value to its background-color.
Once you have completed that, locate the following line in the PHP snippet you just added:
background-color: #bee0ec;
Next, you need to enter the hex code of your desired color next to the background color option.
If you prefer not to use a hex code, you can opt for basic color names like ‘white’ or ‘blue’.
After that, scroll down to the ‘Insertion’ section and select the ‘Auto Insert’ option.
Then, choose ‘Admin Only’ as the ‘Location’ for the code snippet from the dropdown menu.
Next, return to the top of the page and switch the ‘Inactive’ toggle to ‘Active.’
Finally, remember to click the ‘Save Snippet’ button to apply your changes.
Now, navigate to the block editor from the admin sidebar.
This is how the block editor appeared on our site after implementing the PHP code snippet.
Alternative Method: Update the Background Color on Your Live Website
To change the background color visible to your visitors on your live website, the process will vary depending on your WordPress theme.
WordPress offers two types of themes: classic themes and modern block themes. We will guide you through both methods.
Step 1: Using the Theme Customizer (For Classic Themes)
Most classic themes utilize the Theme Customizer for color adjustments. You can access it by going toAppearance » Customizein your WordPress dashboard.
Once the Customizer is open, look for a section named ‘Colors,’ ‘Colors & Dark Mode,’ or something similar. The exact title and placement of these settings may differ by theme.
Within that section, you should find an option for ‘Background Color’ that allows you to use a color picker for your adjustments. When you’re satisfied with your selection, simply click the ‘Publish’ button to save your changes.
Step 2: Using the Full Site Editor (For Block Themes)
If you’re using a contemporary block theme, you’ll make these adjustments in the Full Site Editor. To access it, navigate toAppearance » Editorin your admin sidebar.
In the editor, click on the ‘Styles’ icon located on the right side, which resembles a half-filled circle. This action will open the global styles panel.
From this panel, click on ‘Colors’ and then select the ‘Background’ option.
You can now select a new background color for your entire site. The editor will display a live preview, and you can click ‘Save’ once you are satisfied with your choice.
For a more comprehensive guide on both methods, please refer to our beginner’s guide on customizing colors for your WordPress website.
Common Questions About Changing the Editor Background
Here are some frequently asked questions from our readers regarding changing the background color of the WordPress editor:
Will this code snippet slow down my website?
No, this particular code will not slow down your website. We have configured the WPCode snippet to load only in the ‘Admin Only’ area, meaning it does not add extra code to the front end of your site. It is only activated for logged-in users who are using the block editor.
Can I use a gradient or an image for the editor background instead of a solid color?
Yes, you can. It requires a minor adjustment to the CSS code. Instead ofbackground-colorTo customize the background, you will use thebackgroundproperty.
For instance, if you want to implement a simple linear gradient, your CSS code snippet may appear as follows:
.editor-styles-wrapper { background: linear-gradient(to right, #e6dada, #274046); }
You can utilize online CSS gradient generators to design more intricate styles.
The code isn’t functioning. What should I verify first?
If the color isn’t changing, start by checking the settings in your WPCode snippet. Ensure that the toggle at the top is set to ‘Active’ and that the Insertion location is designated as ‘Admin Only’.
Additionally, inspect the code for any typographical errors, particularly in the CSS selector (.editor-styles-wrapper) and the hex color code.
How can I find the hex code for a specific color I wish to use?
The simplest method is to use an online color picker tool. Websites such as Google’s Color Picker, HTML Color Codes, or Adobe Color enable you to visually choose any color and will provide you with the accurate hex code (e.g., #1a457c) to copy and paste into your code snippet.
If I update my theme, will I lose the changes made to the block editor background color?
No, you won’t lose your changes. This is one of the main benefits of using a plugin like WPCode instead of directly editing your theme’s functions.php file. The code snippet is stored separately from your theme, ensuring it remains functional even after theme updates.
We hope this article has helped you understand how to easily change the background color of the WordPress editor. You might also want to check out our comprehensive guide on disabling the fullscreen editor in WordPress, or explore our top recommendations for the best Gutenberg block plugins for WordPress.
If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
