php within js-file Wordpress

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

Wrap the .js in a .php file and just include it in your context.

Answer 2

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');?>";

Answer 3

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).

Answer 4

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>