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


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;

wp_localize_script is not loaded on my page I have checked the view-source but it's not displaying.

2 Answers 2


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
3: // Register the script
4: wp_register_script( 'some_handle', 'path/to/myscript.js' );
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 );
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.

  • @Bhautik Happy to help! Thanks for coming back and accepting the answer, a lot of people don't do that. Hope you hang around here and help some people your self!
    – DaveLak
    Commented Jun 23, 2018 at 5:22
  • @DaveLake Cheers!!!!..
    – Bhautik
    Commented Jul 16, 2018 at 8:54
wp_register_script('nags-quoting-main-js', NAGS_QUOTING_PLUGIN_URL . 'assets/js/main.js', array(), '', true);

$nags_post_url =  NAGS_QUOTING_PLUGIN_URL . 'post.php';
$use_google_api_key = get_option(NAGS_QUOTING_PLUGIN_NAME . '_use_google_api_key');
$google_api_key = get_option(NAGS_QUOTING_PLUGIN_NAME . '_google_api_key');

wp_localize_script('nags-quoting-main-js', 'nags_quoting_plugin_data', array(
    'nags_post_url' => $nags_post_url,
    'use_google_api_key' => $use_google_api_key,
    'google_api_key' => $google_api_key,

Then Use:

if ( is_page_template( 'page-templates/nags-quoting.php' ) ) {
    if( ! wp_script_is( 'nags-quoting-main-js', 'enqueued' ) ) {

Then Use in JS file:

const nags_post_url =  nags_quoting_plugin_data.nags_post_url;
const use_google_api_key = nags_quoting_plugin_data.use_google_api_key;
const google_api_key = nags_quoting_plugin_data.google_api_key;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.