I need to pass a php string that is stored in $attr['footer_caption'] inside a shortcode function to a js file where the highcharts are initialized.

$fields = array(

        array(
            'label' => esc_html( 'Footer label' ),
            'description' => esc_html( 'Choose the footer label' ),
            'attr' => 'footer_caption',
            'type' => 'text',
        ),


public static function shortcode_ui_chart( $attr, $content, $shortcode_tag ) {

    $attr = shortcode_atts( array(
        'chart' => null,
        'footer_caption' => null,
    ), $attr, $shortcode_tag );

I've been reading about localize script but couldnt get it to work. Is there a simple way to perfom this? I want the string from that php array in this variable:

    Highcharts.setOptions({
  chart: {
          type: 'column',
          events: {
              load: function () {
                var teste 'WANT TO PASS $attr['footer_caption'] HERE'
                var label = this.renderer.label(teste)

I need to pass a php string that is stored in $attr['footer_caption'] inside a shortcode function to a js file where the highcharts are initialized.

$fields = array(

        array(
            'label' => esc_html( 'Footer label' ),
            'description' => esc_html( 'Choose the footer label' ),
            'attr' => 'footer_caption',
            'type' => 'text',
        ),


public static function shortcode_ui_chart( $attr, $content, $shortcode_tag ) {

    $attr = shortcode_atts( array(
        'chart' => null,
        'footer_caption' => null,
    ), $attr, $shortcode_tag );

I've been reading about localize script but couldnt get it to work. Is there a simple way to perfom this? I want the string from that php array in this variable:

    Highcharts.setOptions({
  chart: {
          type: 'column',
          events: {
              load: function () {
                var teste 'WANT TO PASS $attr['footer_caption'] HERE'
                var label = this.renderer.label(teste)

• plugins
• php
• jquery
• javascript
• array

Share Improve this question asked Apr 27, 2017 at 9:59 user117473user117473 2155 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

You can use the wp_localize_script to pass a variable to your javascript.

Here is an example:

wp_register_script('your_script_name', 'path/to/script.js');
$variables = array (
    'footer_caption' => $attr['footer_caption'],
);
wp_localize_script('your_script_name', 'js_object_name', $variables );
wp_enqueue_script('your_script_name');

Then you can acces to this variable by:

js_object_name.footer_caption

Can you post how you tried to use localize_script? Because i use the function often for passing PHP vars to JavaScript and it always worked.

Another way would be to echo the variable in shortcode_ui_chart so you later can use it in your script:

echo '<script type="text/javascript">var footer_caption = "' . $attr['footer_caption'] . '"</script>';

With this code you can use the variable footer_caption in your javascript.

EDIT: See comments for code explanation

var chart1 = Highcharts.chart({
    chart: {
        events: {
            load: function () {
                var caption 'footer_caption'
                var label = this.renderer.label(caption)
            }
        }
    }
});