Remove Additional CSS From the Customizer
WordPress 4.7 introduced a section in the Customizer called Additional CSS. This section should replace the Custom CSS option that many themes include in their Theme Options, or those plugins created for the same purpose.
Sometimes though, especially for developers, this could be a bad feature, because they don’t want their customers to edit CSS as they want.
How to remove the Additional CSS from the Customizer?
Open the file functions.php in wp-content/themes/your-child-theme-name/ and add this code at the end of the file:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Remove the additional CSS section, introduced in 4.7, from the Customizer. | |
| * @param $wp_customize WP_Customize_Manager | |
| */ | |
| function mycustomfunc_remove_css_section( $wp_customize ) { | |
| $wp_customize->remove_section( 'custom_css' ); | |
| } | |
| add_action( 'customize_register', 'mycustomfunc_remove_css_section', 15 ); |
This code will remove completely the Additional CSS section from your WordPress site.
Remove the Additional CSS Conditionally
What if you want to remove it for everyone except administrators? In that case you’d need to check the user role too, and you can do it so:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Remove the additional CSS section, introduced in 4.7, from the Customizer. | |
| * @param $wp_customize WP_Customize_Manager | |
| */ | |
| function mycustomfunc_remove_css_section( $wp_customize ) { | |
| $user = wp_get_current_user(); | |
| if ( ! $user->has_cap( 'manage_options' ) ) { | |
| $wp_customize->remove_section( 'custom_css' ); | |
| } | |
| } | |
| add_action( 'customize_register', 'mycustomfunc_remove_css_section', 15 ); |
This code will remove the section for everyone who can’t manage_options, so everyone who is not Admin or Super Admin.
You can do even more, and leave it only for specific users based on their ID:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Remove the additional CSS section, introduced in 4.7, from the Customizer. | |
| * @param $wp_customize WP_Customize_Manager | |
| */ | |
| function mycustomfunc_remove_css_section( $wp_customize ) { | |
| $user = wp_get_current_user(); | |
| if ( $user->ID !== 1 ) { | |
| $wp_customize->remove_section( 'custom_css' ); | |
| } | |
| } | |
| add_action( 'customize_register', 'mycustomfunc_remove_css_section', 15 ); |
This code will remove the Additional CSS from any user that is not ID 1, which usually is the first user created when creating the WordPress site.
I actually just built (customised) my first custom Genesis child theme entirely through the Additional CSS feature and of course the trusty functions.php file. The customizer has come a long way and as such probably introduces a lot of easy ways to break things if you don’t know what you are doing! I generally try and educate my clients and partners rather than restrict them, but I’m sure this snippet will be useful at some point!
Personally I prefer to work always on files directly instead of using WP editors (both for PHP and CSS), but it’s just that I’m used that way.
About customers, I prefer to restrict them if I can. They are not devs and they don’t need to know/have access to those things. I give them access to everything else, but not to code just to avoid them breaking stuff by mistake.