Wordpress Customizer text area is changing my outputted HTML

Question

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 '

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'  => '',
    );

Is there a way to stop this formatting from happening?

Unknown Unknown · Accepted Answer · 2015-02-04T17:30:58

Wordpress is HTML encoding all of the special characters. If the user enters HTML, then the result should be fine. It is not intended for Javascript.

Allowing the user to enter Javascript like this a big security hole. The script could do anything, not necessarily all pleasant.

If you really want to do this and it's your code echoing the Javascript in your theme, run it through htmlspecialchars_decode before you display it. That PHP function will convert the HTML codes back to characters.

Wordpress Customizer text area is changing my outputted HTML

1 Answers