Custom JS text area in customizer is being formatted wrong in document

I have created a wordpress theme, in the wordpress theme customizer I have added a couple of text areas where a user can input their own CSS or JS to be added to the head.

The placement of the text area is fine, i.e. when a user adds code it is displayed on the right place in the page, however it is being formatted differently.

For example, I add the following code to one of the textareas:

jQuery(document).ready(function($){
    $('full_page').css('min-height',($(window).height()-195));  
});

And in my theme it is outputted like this:

jQuery(document).ready(function($){
    $(#039;full_page#039;).css(#039;min-height#039;,($(window).height()-195));  
});

As you can see, the ' is being replaced with #039;

Here is the code in my customizer.php file to create the text area:

$controls[] = array(
        'type'     = 'textarea',
        'setting'  = 'js',
        'label'    = __( 'Custom JS', 'skizzar_bootstrap' ),
        'subtitle' = __( 'You can write your custom JavaScript/jQuery here. The code will be included in a script tag appended to the top of the page.', 'skizzar_bootstrap' ),
        'section'  = 'advanced',
        'priority' = 6,
        'default'  = '',
    );

To output in my theme I am using:

scriptphp echo get_theme_mod('js'); ?/script

Is there a way to stop this formatting from happening?

Topic theme-customizer esc-textarea Wordpress javascript

Category Web


@sam-skirrow just posting here what we did to fix this...

WordPress 4.1 requires us to use a sanitize_callback filter when creating settings for the customizer (with good reason). Since you're using the kirki framework to create these customizer settings, kirki detects that this is a textarea field and so it automatically applies the esc_textarea filter.

However, you can override this callback and use your own when declaring the field, so all that we needed to do in order to fix this was add a js sanitization calback there instead of the esc_textarea.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.