Question

In a .js-file, I need to get the template-directory of a WordPress theme, i.e. I need to get the return-value of <?php bloginfo('template_directory');?> within the js-file.

The idea is something like:

var blogTemplateDir = "<?php bloginfo('template_directory');?>";

How can this be achieved? What is the standard (WordPress) way of doing this?

Answer 1

As Erik earlier posted, the file extension for the JavaScript-file is meaningless, as it in the end all comes down to the content. Upon encountering this situation during development, I found that I needed to add the following to the top of the so called JavaScript-file:

<?php

   //Let's set the header straight
   header('Content-type: text/javascript');

   //Get the WP-specifics, so that we can use constants and what not
   $home_dir = preg_replace('^wp-content/plugins/[a-z0-9\-/]+^', '', getcwd());
   include($home_dir . 'wp-load.php');
?>

This ensures that you get the definitions into your JavaScript-file, and you can use the example above with themes too (just make sure you change the /plugins into /themes instead).