10

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.

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>

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

Improve this question

2 Answers 2

Reset to default
15

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.

Improve this answer
2
  • @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! Commented Jun 23, 2018 at 5:22
  • @DaveLake Cheers!!!!.. Commented Jul 16, 2018 at 8:54
2 
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' ) ) { wp_enqueue_script('nags-quoting-main-js'); } }

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;
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.