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?
Wordpress offers a wp_localize_script() function that allows you to pass a PHP array to a .js file when you register it with Wordpress.
It works like this
1) Register your script with Wordpress using wp_register_script(); Build an array of your parameters that you want to send to the script.
wp_enqueue_script('my-script','/path/to/script.js');
2) Build an array of your parameters that you want to send to the script.
$params = array('foo' => 'bar','setting' => 123);
3) Call wp_localize_script() and give your parameters a unique name.
wp_localize_script( 'my-script', 'MyScriptParams', $params );
4) You can access the variables in JavaScript as follows:
<script>
alert(object_name.some_string);
</script>
Note: you need to use wp_enqueue_script() when you want Wordpress to incluse the JavaScript file in the header.
Pulling it all together
<?php
$myPlugin = new MyPlugin();
//Add some JS to the admin section
add_action('admin_enqueue_scripts', array($myPlugin, 'adminJavaScript'));
class MyPlugin{
public function adminJavaScript() {
$settings = array(
'foo' => 'bar',
'setting' => 123
);
wp_register_script('myJavaScriptName', plugins_url('/myJavaScript.min.js', __FILE__));
wp_localize_script('myJavaScriptName', 'settings', $settings); //pass any php settings to javascript
wp_enqueue_script('myJavaScriptName'); //load the JavaScript file
}
}
?>
<script>
alert(settings.foo);
</script>
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).
The file extension for a javascript file is meaningless. You can use PHP to output your javascript file just like you do HTML pages. Include the JS file as:
<script src="my_javascript_file.php"></script>
And then you can use the line from your question in your javascript file:
var blogTemplateDir = "<?php bloginfo('template_directory');?>";
