A while back, I wrote a post detailing why it was a bad idea to generate Javascripts using PHP in WordPress plugins. In that post, I mentioned a couple of better ways to do it.
At the time, I didn’t know about the third, and best way, to accomplish this. Mike’s comment over there reminded me of it. WordPress has it built in.
If you already know about wp_localize_script, you can stop reading now.
The wp_localize_script function was made in order to allow for WordPress translations to be able to also translate some of the JS files inside WordPress. Thus the name “localize”. The way it works is to load up the translated versions of text from the translation files and then include them into the resulting HTML output as a Javascript object. The scripts then use that object to produce any text output they need to produce.
Turns out that’s really similar to our goal of sending arbitrary parameters from WordPress to be used by Javascript code.
How to do it:
1. Make your script static (instead of generated) and enqueue your script as per normal. Example:
wp_enqueue_script('my-script','/path/to/whatever.js',…);
No real changes there. You’ll have to come back and modify your script to use these parameters it’s getting passed, but we’ll get to that in a minute.
2. Build an array of your parameters that you want to send to the script.
$params = array( 'foo' => 'bar', 'setting' => 123, );
Note that my parameters are simple examples, but this is PHP code. You can get your parameters however you like. Such as get_option to pull them from the database, perhaps.
3. Call wp_localize_script and give your parameters a unique name.
wp_localize_script( 'my-script', 'MyScriptParams', $params );
What this will do is make WordPress output an inline script with your parameters (properly encoded) just before the enqueue outputs the script tag that loads your script in the first place. So then those parameters will be available to your script as an instance of an object with “MyScriptParams” (from my example).
This means that Javascript code can now reference them as attributes of the name you gave.
So, step 4. Modify your script to use those parameters. In my example, I used “MyScriptParams” and the parameter names are “foo” and “setting”. In my Javascript code I can use them as “MyScriptParams.foo” and “MyScriptParams.setting”.
Much cleaner. One static and unchanging JS file to cache. Parameters get put into your HTML itself as a one-liner. You can deal with the parameters using a normal PHP array before passing them over. No need to screw around with generating Javascript from PHP or looking for wp-load or even messing with tricky actions.
Perfect.
