I was involved in writing a small plugin project last week, for which I found myself reading a database value from WordPress (in PHP) that I wanted to use in JavaScript. I don’t do much in JavaScript and it had occurred to me that I had no idea how I should exchange the data.
After some digging I found several posts on this subject, and I found the most straightforward one was by Toby Osbourn. He made me aware of the wp_localize_script() function and gives a brief example. Thanks, Toby!
The function is designed to over localised values for strings to anything that’s printed via JavaScript, but it can really be used for any data we may need. Here’s how I did it:
The PHP Part
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// MAIN FUNCTION function elv_vanish_links() { // if we're in the admin interface, don't do anything if (is_admin()) { return; } // initialise jQuery wp_enqueue_script ('jquery'); // initialise our own script $elv_vanish = plugins_url('vanisher.js', __FILE__); wp_enqueue_script ('elv_vanish', $elv_vanish, '', '', true); // transfer data to JavaScript $elv_data = array ( 'random_value' => 'Hello from PHP', 'elv_class' => get_option ('elv_class')); wp_localize_script ('elv_vanish', 'elv_data', $elv_data); } add_action ('get_footer', 'elv_vanish_links'); |
This looks more complex than it is, so let’s break it down line by line. Our function is called via the last line here, hooking in to when WordPress calls the footer. The purpose of our function is to insert a bit of jQuery code on the front page, so we’ll begin by making sure that this doesn’t happen when we’re in the Admin Interface. If that’s the case, we’ll simply return without doing anything.
Next step is to initialise jQuery – that’s only necessary if we’re actually using jQuery, so feel free to leave that bit out if you’re so inclined. On this note, WordPress 5.1 only ships with jQuery 1.2.x (no longer supported).
Then it’s time to initialise our own script. In my plugin I have a separate file for that, which is why I’m reading its full path into a variable first ($elv_vanish). To get that full path, the plugins_url() function helps.
Now comes the interesting part: we’re creating an array with two values (random_value and elv_class) and populate them with data. Note the names of the variables in the array, we’ll be able to access exactly those values in JavaScript in a moment. To “transfer” the data, we’ll call wp_localize_script() with three parameters:
- the name of our own script (elv_vanish in my case)
- the PHP array we’ve created (elv_data)
- and a variable we’d like to use in JavaScript ($elv_data to make it easy for my tired brain to remember)
That’s all we need to do in PHP. We’re using an array by the way to enable us to transfer more than a single value. You could use a single variable instead of an array, but an array makes it easy to add values as your project matures.
The JavaScript Part
In order to access our values, we now have an array to play with – namely $elv_data. JavaScript supports dot notation, so any of our PHP array values can be accessed using $elv_data.random_value and $elv_data.elv_class.
It’s super easy – and very exciting I must add 🙂
Further Reading
