Recently, I was working on a plugin that uses a custom post type to create Markers for Google Maps. Since interaction with Google Maps requires use of javascript, I needed to find a way to send post data and postmeta for the posts to be used in javascript to create Google Map Markers. When each post of custom type ‘mkm-gmap-cpt’ is saved to the database, the address custom field is geocoded and values for ‘latitude’ and ‘longitude’ are saved as postmeta for the post. To create Google Maps Marker for these posts, I needed to be able to send the values for ‘latitude’ and ‘longitude’ to the javascript for processing. Additionally, I wanted to send the ‘post_content’ to the javascript to be used in the info window for the marker.
WP_localize_script
As is often recommended, I used wp_localize_script to send my variables to javascript. Using wp_localize_script is quite simple with the following three steps.
- Enqueue your script that will use the variables using ‘wp_enqueue_script’
- Collect your parameters in an array
- Call
wp_localize_scriptto send the parameters to the script that will use them
For my plugin, I first enqueued the script that would be handling the creation of the Google Map and corresponding Markers.
I then gathered data from my posts and collected it in an array
The $params the array is a multidimensional array that contains latitude, longitude, and description values for each post. Up to this point, everything was copacetic. I next tried to send the $params array to the script using wp_localize_script. This is where things broke down. Initially, I used the following code.
wp_localize_script creates a JSON encoded object that will appear in a script> tag before the dependent script is called. It creates the variables that will be used by the script that is specified. When I checked the result of this in my javascript, I found the following.
Instead of sending a JSON encoded object containing the values of the $params array to the javascript, it instead sent the word “Array” with the key being the post ID. This certainly was not helpful. It turns out, when you send an array of values to wp_localize_script, WordPress simply adds commas, line breaks and escapes the data for use in javascript. It completely ignores the values stored as an array. Fortunately, there is a loophole. In the function that ultimately handles the data from the wp_localize_script function, it will allow any value with the key l10n_print_after to pass without modification. You must be careful when using this method as WordPress does not escape the data for you, so you need to be careful what you send to it. To remedy my situation, I used the following code to send the $params array.
Instead of printing the word “Array” as output, this code properly encoded my $params array for use in javascript. It produced the following.
By setting the second argument of the wp_localize_script function to ‘markers’ and sending an array with the key l10n_print_after as the third argument, two things happen. First, an empty object with the ‘markers’ is created.
Second, the value that was given the key l10n_print_after is printed. In this case, I intentionally set the first part of this string to be ‘markers = ‘ so that I would assign the previously created ‘markers’ object to the JSON encoded object that was assigned the l10n_print_after key in the $params array. In the end, a useable object that contains the data needed for the markers is printed.
Using this method to JSON encode multidimensional arrays makes creating variables in PHP and sending them to javascript for use in exciting, interactive web apps a breeze. While I initially thought that this function is limited to using unidimensional arrays, I was pleasantly surprised to find that the WordPress dev team built in a loophole that allows for one to send any data to the javascript and make this function infinitely flexible.
