Syntax Highlighter Control For WordPress Customizer
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.
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.