wp_localize_script()
Localize a script. Works only if the script has already been added.
Accepts an associative array $l10n and creates a JavaScript object:
"$object_name" = { key: value, key: value, ... }
Works only if the script has already been registered.
Accepts an associative array $l10n and creates a JavaScript object:
"$object_name": { key: value, key: value, ... }
No Hooks.
Return
true|false
. True if the script was successfully localized, false otherwise.
Usage
wp_localize_script( $handle, $object_name, $l10n );
- $handle(string) (required)
- Script handle the data will be attached to.
- $object_name(string) (required)
- Name for the JavaScript object. Passed directly, so it should be qualified JS variable. Example: '/[a-zA-Z0-9_]+/'.
- $l10n(array) (required)
- The data itself. The data can be either a single or multi-dimensional array.
Examples
#1 Do not use wp_localize_script() for data transfer
wp_localize_script() is recommended to be used only for passing localization strings, not for passing data - an object that your script will use. For passing data, it's better to use wp_add_inline_script().
Let's consider an example:
Previously, you could (and still can) do the following:
wp_enqueue_script( 'my-script', 'https://url-to/my-script.js' ); wp_localize_script( 'my-script', 'myScriptData', [ 'ajax_url' => admin_url( 'admin-ajax.php' ), 'param_one' => 'some value', 'param_two' => 25, ] );
But it's better to do it this way, because in this case we preserve the types of the passed data - numbers will remain numbers, not turn into strings:
wp_enqueue_script( 'my-script', 'https://url-to/my-script.js' ); $js = 'window.myScriptData = ' . wp_json_encode( [ 'ajax_url' => admin_url( 'admin-ajax.php' ), 'param_one' => 'some value', 'param_two' => 25, ] ); wp_add_inline_script( 'my-script', $js, 'before' );
Note that you need to add 'before' as the third parameter.
Now in the JS script, you can access this data like this:
console.log( myScriptData.ajax_url ); // "https://example.com/wp-admin/admin-ajax.php" console.log( myScriptData.param_one ); // "some value" console.log( myScriptData.param_two ); // 25
#2 Inserting global data
An example of inserting global javascript data before the JS script (in the example, the script is jquery). Use this code in functions.php:
add_action( 'wp_enqueue_scripts', 'action_function_name_7714', 99 ); function action_function_name_7714(){ wp_localize_script( 'jquery', 'object_name', array( 'some_string' => __( 'Some string to translate' ), 'some_num' => '10' ) ); }
We'll get it in the head part of the site:
<script type='text/javascript'> /* <![CDATA[ */ var object_name = {"some_string":"Some string to translate","some_num":"10"}; /* ]]> */ </script> <script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
#3 Define the AJAX request handler file
wp_add_inline_script() was introduced in WP v4.5, and is now the best practice for that use case. wp_localize_script() should only be used when you actually want to localize strings.
Let's add the script and then the global data to it. Here we add a javascript file with an AJAX request. The file uses the variable MyAjax.ajaxurl as the URL to direct the AJAX request. We will define this URL through wp_localize_script():
add_action( 'wp_enqueue_scripts', 'action_function_name_7714' ); function action_function_name_7714(){ wp_enqueue_script( 'my-ajax', get_template_directory_uri() . '/js/custom_script.js' ); wp_localize_script( 'my-ajax', 'MyAjax', [ 'ajaxurl' => admin_url( 'admin-ajax.php' ) ] ); }
we get:
<script type='text/javascript'> /* <![CDATA[ */ var MyAjax = {"ajaxurl":"http://example.com/wp-admin/admin-ajax.php"}; /* ]]> */ </script> <script type='text/javascript' src='http://example.com/wp-content/themes/twentyeleven/js/custom_script.js?ver=3.5'></script>
Access to variables in Javascript is as follows (for Example 2):
<script> // in the file custom_script.js we can use a variable: MyAjax.ajaxurl alert( MyAjax.ajaxurl ); // print http://example.com/wp-admin/admin-ajax.php </script>
#4 Calling this function multiple times
Note, calling this function multiple times in the a single session with the same object name will overwrite previous values:
wp_localize_script( 'some_handle', 'object_name', $value1 ); ... code executed again... wp_localize_script( 'some_handle', 'object_name', $value2 ); // object_name is now set to $value2.
If you need to have multiple data sets associated with the same script (handle), then you need to rename your object,
wp_localize_script( 'some_handle', 'object_name1', $value1 ); ... code executed again... wp_localize_script( 'some_handle', 'object_name2', $value2 );
Variant
Or remove the original code and replace with the code you need:
global $wp_scripts; $data = $wp_scripts->get_data( 'enqueued-script', 'data' ); if( empty( $data ) ){ wp_localize_script( 'enqueued-script', 'obj', $localized_data ); } else{ if( ! is_array( $data ) ){ $data = json_decode( str_replace( 'var obj = ', '', substr( $data, 0, -1 ) ), true ); } foreach( $data as $key => $value ){ $localized_data[ $key ] = $value; } $wp_scripts->add_data( 'enqueued-script', 'data', '' ); wp_localize_script( 'enqueued-script', 'obj', $localized_data ); }
Notes
Changelog
Since 2.2.0 | Introduced. |
wp_localize_script() wp localize script code WP 6.7.2
function wp_localize_script( $handle, $object_name, $l10n ) { $wp_scripts = wp_scripts(); return $wp_scripts->localize( $handle, $object_name, $l10n ); }