A Preview of the Custom CSS Editor Added to the Customizer in WordPress 4.7

WordPress 4.7 is a little more than a month away and is going to be packed with new features and improvements. In particular, five feature projects related to the customizer were approved for merge and will be part of the release. One of the feature projects is the custom CSS editor that enables users to make CSS changes to a theme without having to create a child theme.

CSS Editor in The WordPress 4.7 Customizer

In WordPress 4.7, there’s a new section in the customizer labeled Additional CSS. Clicking the label displays a blank pane with a short description of what users can do. Clicking the help icon displays a short explanation of what CSS is with a link to a help document on the Codex. The Additional CSS pane is more like a text area than an editor.

Unlike Jetpack’s Edit CSS module, the editor in the customizer lacks line numbers, colored text, and other conveniences. However, these are features that are likely to be added in future iterations.

Jetpack’s Edit CSS Module

There are a couple of things to keep in mind before using Additional CSS. First, it does not have revision support enabled. Weston Ruter, WordPress core committer, says revision support is disabled by default and requires a plugin.

Second, changes are theme specific and are not global. Luke Cavanagh has inquired on whether an option will be added in the future to enable global CSS changes which could come in handy for making tweaks for active plugins.

During testing, I didn’t encounter any issues with writing or pasting CSS code into the Additional CSS area. I encourage you to download and install WordPress 4.7 beta 1 and try it out for yourself and let us know your thoughts. If you think you’ve encountered a bug while using WordPress 4.7 beta 1, please report it on the Alpha/Beta section of the support forums.