Accessing PHP variables in javascript using WordPress can come in very handy, especially in plugins or themes that use separate javascript files and php page templates where accessing a variable is not possible to do directly. A great example of where this would be necessary is when you have a string that needs to be translated using PHP but is to be rendered using javascript, maybe in an alert box or error message. You might have database data that is retrieved using PHP but actually used in a javascript calculation or function. WordPress offers the wp_localize_script() function which is a great tool that renders your PHP variable as a javascript object when the HTML template is rendered. This process does require you to enqueue your javascript file(s), but of course you’re already doing that!

The signature for wp_localize_script() looks like this:

wp_localize_script( $handle, $object_name, $l10n );

To make a single PHP variable available to your javascript files, add this code to your plugin file or to your theme’s functions.php file:

// plugin file or functions.php

/**
 * Enqueue scripts
 *
 * @author  Joe Sexton <joe@webtipblog.com>
 */
function js_enqueue_scripts() {

    $vars = "value";

    wp_register_script( "scripts", plugin_dir_url( __FILE__ ) . "/scripts.js" );
    wp_enqueue_script( "scripts" );
    wp_localize_script( "scripts", "php_vars", $vars );
}
add_action( "wp_enqueue_scripts", "js_enqueue_scripts" );

As you can see, we have declared a PHP variable with the value “value”. To make this available to our javascript we register and enqueue our script as normal, and then we use wp_localize_script() to create a javascript object called “php_vars”. We set the handle to the same handle as our enqueued script, the javascript object name to “php_vars”, and the l10n value to the data we want to set to the “php_vars” javascript object. This function will render the following on the page:

<!-- page HTML -->

<script type="text/javascript">
/* <![CDATA[ */
var php_vars = "value";
/* ]]> */
</script>

To access the PHP “value” that we set “php_vars” to just access it like you would any other javascript object in your script file:

// javascript file
console.log( php_vars.variable );

wp_localize_script() is not limited to a single PHP variable, arrays can also be passed like so:

// plugin file or functions.php
/**
 * Enqueue scripts
 *
 * @author  Joe Sexton <joe@webtipblog.com>
 */
function js_enqueue_scripts() {

	$array = array(
	    "key_1" => "value_1",
	    "key_2" => "value_2"
	  );

    wp_register_script( "scripts", plugin_dir_url( __FILE__ ) . "/scripts.js" );
    wp_enqueue_script( "scripts" );
    wp_localize_script( "scripts", "php_vars", $array );
}
add_action( "wp_enqueue_scripts", "js_enqueue_scripts" );

The rendered page will contain this snippet:

<!-- page HTML -->
<script type="text/javascript">
/* <![CDATA[ */
var php_vars = {"key_1":"value_1","key_2":"value_2"};
/* ]]> */
</script>

Then access your javascript object like this:

// javascript file
console.log( php_vars.key_1 );
console.log( php_vars.key_2 );

Using wp_localize_script you can translate strings or make calculations in your PHP files and then use that data as a javascript object when the page is rendered.