Blimey, it’s been a wee while since I posted here, hasn’t it? I’ve been busy doing a number of different things both at work and home, as well as some mad stuff with NextGenBase including a 24 hour sponsored game-a-thon that you can watch on our Twitch channel if you really feel like it – https://www.twitch.tv/nextgenbase

Still, I thought this lovely little tip I picked up warranted a post on the coding side of things. This last month I’ve been doing a LOT more work with Javascript and JQuery, implementing some lovely front end stuff into a couple of WordPress projects. It’s been great practice learning a lot more about how to code JS and JQ better, managing functions and objects, as well as how to incorporate it all together with WordPress. One of the things I’ve always found a brain teaser, however, is how to get data from WordPress variables on the PHP side into my Javascript without a lot of jiggery pokery involving injecting values into page embedded vars via PHP or using cookies in some way. Thankfully the process is actually incredibly simple to overcome.

Consider this use case; you have a call to another file in your theme, within the JS file you’re currently using. Given the way WordPress themes are set up, however, using relative folder paths becomes tricky. In my PHP I’ll put something like:

get_template_directory_uri().'/path/to/my/file.php';

Which WordPress will translate as:

http://my.domain.com/wp-content/themes/my-theme/path/to/my/file.php

If you’re building a theme or plugin, this makes your work super portable and usable in every instance, regardless or server or WordPress installation structure; and we can even translate that into our Javascript files with the help of a handy WordPress function.

Javascript files are included in WordPress with the following function example:

function add_script(){
wp_enqueue_script( 'my_script', get_template_directory_uri().'/path/to/my/script.js', null, null, true );
}

add_action( 'wp_enqueue_scripts', 'add_script' );

That chunk of code would sit in a themes function.php file and tells WordPress, when it reaches the wp_enquque_scripts stage of its setup on every page load, to run the function ‘add_script’. That function then subsequently includes a link to the appropriate script file within the footer of the page. There’s a similar function to handle stylesheets, wp_enqueue_style. The key part here is the ‘my_script’ identifier (protip, make sure to use a unique one for each script – I’ve lost count of the amount of times my script hasn’t loaded because I just copied and pasted a line without changing the identifier!)

If we want to be able to get values such as our template directory path in the file we’ve included, we can make a simple modification:

function add_script(){
wp_enqueue_script( 'my_script', get_template_directory_uri().'/path/to/my/script.js', null, null, true );
$my_vars = array( 'templateUri' => get_stylesheet_directory_uri() );
wp_localize_script( 'my_script', 'my_vars', $my_vars );
}

add_action( 'wp_enqueue_scripts', 'add_script' );

So, that’s setting an array of variables which is then being passed into the script using wp_localize_script, at which point it will be available in the JS as ‘my_vars’.

Here’s how we’d use it, for example to print out to the console the value that’s been passed for the template uri:

console.log( my_vars.templateUri );

It’s that simple and of course you could pass anything in the array to make it available to your script. I’ve not done any testing at this point but it’s possible that you could hook things into JS on the fly from different functions which could be pretty powerful!

As always, let me know if you’ve found this useful!