Using wp_localize_script with jQuery variables including strings, booleans and integers

The use of wp_localize_script is an API in WordPress is to retrieve PHP values from the database to use in javascript/jquery scripts, it can also be utilized to make string values language translatable if required, but also used to pass user defined variables/settings say from a plugin to load via a jQuery init file for a jQuery plugin.

By default the values are retrieved as strings even the boolean and integer values.

How wp_localize_script works

 <?php wp_localize_script( $handle, $name, $data ); ?>

Thewp_localize_script function takes 3 arguments, the $handle is the javascript/jquery init script file name that we need to target that will use the variables that we need to pass, the $name is a prefix value that is appended to the PHP values we are referencing which can be anything and the $data is the actual PHP values we are passing from the database.

<?php
//Our Plugin Function Registering and Enqueing our needed scripts
function wpb_scripts_styles() {
//Our main JQuery init script
wp_register_script ( 'jsinit' , plugins_url( '/js/js-init.js', __FILE__ ), array( 'jquery' ), '1.0.0', false );
//Calling our stored db wp_options field
$options = get_option( 'wpb_stored_options_test' );
//Wrapping our values in an array = $data
$data = array (
//Wrapping our values in an inner array to protect boolean and integers = wpb_stored
'wpb_stored_name' => esc_html( $options['wpb_stored_name'] ), //this is a string
'wpb_stored_string' => esc_html( $options['wpb_stored_string'] ), //this is a string
'wpb_stored_truth' => $options['wpb_stored_truth'], // this is a boolean true/false
'wpb_stored_number' => $options['wpb_stored_number'], // this is an integer
);
// Pass PHP variables to jQuery init script 'jsinit'
wp_localize_script( 'jsinit', 'phpVars', $data );
// Enqueing our init script after wp_localise_script
wp_enqueue_script( 'jsinit' );
}
add_action( 'wp_enqueue_scripts', 'wpb_scripts_styles' );
view raw regular-way.php hosted with ❤ by GitHub

In the above is a plugin example that is using wp_localize_script so the $handle it is using is the ‘jsinit‘ script this is the script that we wish to transfer our PHP variables to.

The $name is set to ‘phpVars‘ which will be used to prefix the PHP variables.

The $data is set in an array and is pulling out 4 values from our ‘wpb_stored_options_test‘ which already have been defined.

Most importantly the wp_localize_script is executed before the jsinit script is enqueued, otherwise the variables can’t be supplied to it.

Referencing the values in the jQuery init file

jQuery(document).ready(function($) {
$(phpVars.wpb_stored_options_test).jquerysomething({
prependTo: phpVars.wpb_stored_name,
label: phpVars.wpb_stored_string,
duration: phpVars.wpb_stored_number,
showChildren: phpVars.wpb_stored_truth,
});
});
view raw regular.js hosted with ❤ by GitHub

So this is how in the ‘jsinit‘ file the PHP variables are pulled in, note how the $name phpVars is used as a prefix.

You will see these values in the source code like so

<script type='text/javascript'>
 /* <![CDATA[ */
 var phpVars = {"wpb_stored_name":"Store Names","wpb_stored_string":"Store Strings","wpb_stored_number":"800","wpb_stored_truth":"1"};
 /* ]]> */
 </script>

So these are the PHP variables being passed to our ‘initjs’ script via the wp_localize_script API, they are wrapped in a script tag and CDATA tags. This all works as intended with strings but notice that our integer and boolean values are also interpreted as strings, you may want to pass these values into your script as true booleans and integers.

You can achieve this by wrapping your $data values inside an inner array and declaring the value as a boolean or integer by the process of type casting.

<?php
//Our Plugin Function Registering and Enqueing our needed scripts
function wpb_scripts_styles() {
//Our main JQuery init script
wp_register_script ( 'jsinit' , plugins_url( '/js/js-init.js', __FILE__ ), array( 'jquery' ), '1.0.0', false );
//Calling our stored db wp_options field
$options = get_option( 'wpb_stored_options_test' );
//Wrapping our values in an array = $data
$data = array (
//Wrapping our values in an inner array to protect boolean and integers = wpb_stored
'wpb_stored_inner' => array(
//Assigning our required values from the db
'wpb_stored_name' => esc_html( $options['wpb_stored_name'] ), //this is a string
'wpb_stored_string' => esc_html( $options['wpb_stored_string'] ), //this is a string
'wpb_stored_truth' => (bool)$options['wpb_stored_truth'], // this is a boolean true/false
'wpb_stored_number' => (int)$options['wpb_stored_number'], // this is an integer
),
);
// Pass PHP variables to jQuery init script 'jsinit'
wp_localize_script( 'jsinit', 'phpVars', $data );
// Enqueing our init script after wp_localise_script
wp_enqueue_script( 'jsinit' );
}
add_action( 'wp_enqueue_scripts', 'wpb_scripts_styles' );

So in the above note the inner array on the $data called wpb_stored_inner and also our boolean and integer values are cast with (bool) and (int). The last thing to do is reference the values in the ‘initjs’ file which now has to include the inner array in the path of the value.

jQuery(document).ready(function($) {
$(phpVars.wpb_stored_inner.wpb_stored_options_test).jquerysomething({
prependTo: phpVars.wpb_stored_inner.wpb_stored_name,
label: phpVars.wpb_stored_inner.wpb_stored_string,
duration: phpVars.wpb_stored_inner.wpb_stored_number,
showChildren: phpVars.wpb_stored_inner.wpb_stored_truth,
});
});
view raw regular-inner.js hosted with ❤ by GitHub

The values now have a prefix of phpVars.wpb_stored_inner and then the value.

This will then result in preserved boolean and integers values being passed.

<script type="text/javascript">
/* <![CDATA[ */
var phpVars = {"wpb_stored_inner":{"wpb_stored_name":"Store Names","wpb_stored_string":"Store Strings","wpb_stored_number":800,"wpb_stored_truth":true}};
/* ]]> */
</script>

So now in the above the wpb_stored_number has a integer value and wpb_stored_truth has a boolean.

 

Leave a Comment





%d bloggers like this: