Remove Additional CSS from the WordPress (4.7) Customizer

WordPress 4.7 is coming soon–as always, bringing some exciting new features, which you can play with already if you’re able to download and try out the beta. One feature which I honestly find to be pretty neat is the Additional CSS panel in the Customizer. Here’s the official description:

Custom CSS with live previews – Ever needed to hide or tweak the look of something in your theme or from a plugin? Now you can do it with CSS and live preview the results while customizing your site. CSS can be a powerful tool; you may find that you won’t need the theme editor or child themes anymore.

Although I know some developers who are really not fans of the Customizer, I confess that I like the ability to preview changes before I publish them to my site–for example, adding or modifying a widget. And I would much rather direct a user to add CSS here than have them opening the Theme Editor in WordPress (which I disable universally).

Note: if you’re not yet using WordPress 4.7, you won’t see this panel in your Customizer, so don’t look for it. If you design or develop sites, themes, or plugins, I would strongly encourage you to be running 4.7 somewhere (locally is great–I like Desktop Server myself) so that you’re ready for the release.

One nice thing about the new Additional CSS feature is that it’s theme specific, so you won’t have to remove the custom CSS if you switch themes. However, because it’s theme specific, I think that suggests that it’s not really intended to be used for major CSS work, because the changes will be lost if you switch themes. But for something quick and easy to tweak, sure, why not? Here’s a quick example of how I could change the first three posts to show on Cook’d Pro:

Additional CSS example using Cook'd Pro Genesis theme

The exception I see to having this available is if I deliver a custom site to a client. In this case, I don’t think they need to change the CSS, because I’ve delivered it to their specifications. Luckily, it’s easy for me to remove the Additional CSS panel from the Customizer for my clients, by adding this to my custom child theme:

add_action( 'customize_register', 'prefix_remove_css_section', 15 );
* Remove the additional CSS section, introduced in 4.7, from the Customizer.
* @param $wp_customize WP_Customize_Manager
function prefix_remove_css_section( $wp_customize ) {
$wp_customize->remove_section( 'custom_css' );
view raw functions.php hosted with ❤ by GitHub

Although I wouldn’t include this in a child theme I was distributing, I think a lot of developers/designers would prefer to remove this, even if they’re like me and keep access to the Customizer available for clients. As far as I can tell, you can still include this code in your theme, if you are delivering a site before 4.7 is released; it just won’t do anything before then.

Reader Interactions


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.