how to use wp_localize_script in custom page template

I have the template called homepage that assigned to home page and bottom of a template I have script tag. now I want to use my json in that script tag.

home-template.php

<?php
add_action('wp_enqueue_scripts', 'pass_var_to_js',99);
function pass_var_to_js() {
    // Localize the script with new data
    $translation_array = array(
        'popularDestination' => json_encode($data['POPULAR DESTINATIONS']),
    );
    wp_localize_script( 'home_page_json', 'home', $translation_array );

    // Enqueued script with localized data.
    wp_enqueue_script( 'home_page_json' );
}
?>

<script type="text/javascript">
var data = home.popularDestination;
</script>

but wp_localize_script not loaded in my page i check view-source. not displaying.

sorry for bad English.

Answers 1

  • Based on the code provided it looks like you are misunderstanding how wp_localize_script works. The signature of the function looks like this:

    wp_localize_script( $handle, $name, $data );

    Where $handle is the name of a JavaScript file you have registered or enqueued before calling wp_localize_script. Take a look at the example in the codex (I've added line numbers below):

    1: <?php
    2: 
    3: // Register the script
    4: wp_register_script( 'some_handle', 'path/to/myscript.js' );
    5: 
    6: // Localize the script with new data
    7:  $translation_array = array(
    8:    'some_string' => __( 'Some string to translate', 'plugin-domain' ),
    9:    'a_value' => '10'
    10: );
    11: wp_localize_script( 'some_handle', 'object_name', $translation_array );
    12: 
    13: // Enqueued script with localized data.
    14: wp_enqueue_script( 'some_handle' );
    
    1. Take a look at line 4 above. First a JavaScript file is registered with the $handle 'some_handle'.

    2. Next, on line 11, wp_localize_script() is used to register the localization data for the script handle 'some_handle' registered on line 4.

    3. Finally, on line 14, the JavaScript file (registered on line 4) is enqueued. Because wp_localize_script() was passed the same $handle registered on line 4, WordPress automatically includes the localized data on every page that wp_enqueue_script( 'some_handle' ); is called.

    In other words, you need to use wp_localize_script with a registered JavaScript file. Not by itself like you are doing currently.

    This quote from the notes section says more or less the same thing:

    IMPORTANT! wp_localize_script() MUST be called after the script has been registered using wp_register_script() or wp_enqueue_script().


    Also, I don't think you need to json_encode() your $data. WordPress should do that for you.


Related Questions