This is the second control of O2 – WordPress Customizer library. In case you’re wondering about the first control, you can check this blog post. Spoiler alert: it was a Font Awesome icon picker, which also supports Genericons and Dashicons.

Second control is a syntax highlighter It allows you to add a syntax highlighter to your WordPress Customizer, which supports all famous languages, such as JavaScript, CSS & HTML. This control uses CodeMirror, so do check that out if you ever need a syntax highlighter.

You can find it in O2 library here. It’s a part of the library so you will have to download the entire library. Feel free to delete other controls if you’re not using them.

Place /o2/ folder in your theme, and include it by adding the following code:

define( 'O2_DIRECTORY', get_template_directory() . '/inc/o2/' );
define( 'O2_DIRECTORY_URI', get_template_directory_uri() . '/inc/o2/' );
require get_template_directory() . '/inc/o2/controls/code/code-control.php';

First you need to define directory and directory URI of the /o2/ folder after that you need to include code-control.php file.

And that’s all you need to do.

You can add it to your customizer like this:

$wp_customize->add_setting( 'o2_code', array(
    'capability' => 'edit_theme_options'

$wp_customize->add_control(new O2_Customizer_Code_Control($wp_customize, 'o2_code', array(
    'label' => __('CSS', 'textdomain'),
    'description' => __('Your custom CSS.', 'textdomain'),
    'section' => 'your_section',
    'priority' => 5,
    'settings' => 'o2_code',
    'choices' => array(
        'language' => 'css',
        'theme' => 'icecoder',

That will do the work. You can put any language you want, if supported by CodeMirror, in the language option. And here are all the themes you can choose from.

Feel free to leave a comment if you have any questions or suggestions.