1

Custom CSS is a feature since 4.7

Just choose the Additional CSS tab when customizing your current theme to get started!

The problem is that a theme developed a while back does not show the Additional CSS tab.

I happened to be using twentythirteen as a base for another project, and there it is, nothing anywhere in the functions.php is enabling it, it just works.

Anyone have any idea about how to enable it?

While I can use the following:

$wp_customize->add_setting( 'custom_theme_css', array(
) );
$wp_customize->add_control( 'custom_theme_css', array(
  'label' => __( 'Custom Theme CSS' ),
  'type' => 'textarea',
  'section' => 'custom_css',
) );
    $wp_customize->add_section( 'custom_css', array(
  'title' => __( 'Custom CSS' ),
  'description' => __( 'Add custom CSS here' ),
  'panel' => '', // Not typically needed.
  'priority' => 160,
  'capability' => 'edit_theme_options',
  'theme_supports' => '', // Rarely needed.
) );

I am essentially creating a new setting, rather than using the new core feature.

I want to enable the core, something like $wp_customize->add_section('custom_css');

2
  • 2
    The custom css in 4.7 is enabled by default, it must be code in your theme or a plugin conflicting with the core code. Try disabling plugins and check if that helps, if not look inside your theme for custom_css customizer section as it might override core settings.
    – Greg36
    May 4 '17 at 21:32
  • This is all that is removed: ` $wp_customize->remove_section('colors'); $wp_customize->remove_section('header_image'); $wp_customize->remove_section('background_image'); $wp_customize->remove_section('static_front_page'); $wp_customize->remove_control('blogdescription'); $wp_customize->remove_control('display_header_text'); $wp_customize->remove_control('site_icon'); ` Jun 8 '17 at 18:43
1

Lol, coming back to my own post 3 years later looking for answers.

Deactivating plugins did nothing, but ended up finding WP_Customize_Code_Editor_Control which has options for code_type.

So here is a manual method for adding a proper CSS editor to a theme. This probably only useful for updating older themes that were already installed.

add_action( 'customize_register', function($wp_customize) {

    $wp_customize->add_setting( 'custom_css', array(
    ) );

    $wp_customize->add_control( new WP_Customize_Code_Editor_Control( $wp_customize,'custom_css', array(
      'label' => __( 'Custom CSS' ),
      'code_type' => 'css',
      'section' => 'custom_css',
      'settings'  => 'custom_css',
    ) ));

    $wp_customize->add_section( 'custom_css', array(
      'title' => __( 'Custom CSS' ),
      'description' => __( 'Add custom CSS here' ),
      'panel' => '', // Not typically needed.
      'priority' => 160,
      'capability' => 'edit_theme_options',
      'theme_supports' => '', // Rarely needed.
    ) );

    $custom_css = get_theme_mod( 'custom_css', '' );
    wp_register_style( 'custom-css', false );
    wp_enqueue_style( 'custom-css' );
    wp_add_inline_style( 'custom-css', $custom_css );

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.