Passing PHP Variables to JavaScript in WordPress

One thing that I found difficult to understand when starting out with WordPress development was how to use PHP variables in my JavaScript. I’m not sure why I found it so confusing. There are a lot of good examples out there but I thought I would break down how use PHP variables in your JavaScript using the simplest example I could think of.

I think that part of my confusion was that the name of the WordPress function we will be using, wp_localize_script, is named for its main purpose – allowing language translations in your JavaScript to make your code available in multiple languages like French and Russian. But, in order to do this, wp_localize_script makes PHP-passed variables available to use in your JavaScript.

In my example, I am simply going to pass a single variable to my enqueued JavaScript and write it to the JavaScript console. I have broken my code out into a very, very basic plugin that is available for review on GitHub. Let’s break down the plugin.

First, I need to load my JavaScript. I will do this using wp_enqueue_script.

function php_to_js_enqueue() {
    wp_enqueue_script( 'php-to-js', plugins_url( 'js/php-variable-example.js', __FILE__ ), array( 'jquery' ), null, true );
}
add_action( 'wp_enqueue_scripts', 'php_to_js_enqueue' );

I am loading in a JavaScript located in my plugin’s js folder called php-variable-example.js. The JavaScript file is about as simple as can be. It is just writing a variable to the JavaScript console:

jQuery( document ).ready(function($) {
    console.log( php_vars.example_variable );
});

The value of php_vars.example_variable should show up in my JavaScript console area. But how do we pass this php_vars.example_variable to the JavaScript? We just need to add a little code to our function where we are enqueuing the php-variable-example.js file. This is where we will use wp_localize_script.

First, we need to use the “handle” that we used when enqueueing our JavaScript. We used php-to-js as our handle. We pass this handle to wp_localize_script so that it knows what script we want to pass our information to. And then we tell it what information to pass. I am setting up a PHP array with one single item in my php_to_js_enqueue function before I enqueue my script:

$data_to_pass = array();
$data_to_pass['example_variable'] = 'Hello, world!';

Then, I use wp_localize_script to pass that array to my JavaScript:

wp_localize_script( 'php-to-js', 'php_vars', $data_to_pass );

Note that the handle in wp_localize_script matches the handle in my wp_enqueue_script call (php-to-js). The second value, php_vars, is the name that I am giving my array for use in JavaScript. In my php-variable-example.js file, I will reference the array with php_vars. The last parameter is the actual data I want to pass which is the array I set up with one item.

The array is now available in my JavaScript. My array item’s key is example_variable so I can retrieve that information in my JavaScript by using php_vars.example_variable. When I reload my page, I see that, in my browser’s Web Inspector tools, that the value I gave example_variable in PHP is being output to the console.

As a recap, here is the complete PHP code:

function php_to_js_enqueue() {
   $data_to_pass = array();
   $data_to_pass['example_variable'] = 'Hello, world!';
   wp_enqueue_script( 'php-to-js', plugins_url( 'js/php-variable-example.js', __FILE__ ), array( 'jquery' ), null, true );
   wp_localize_script( 'php-to-js', 'php_vars', $data_to_pass );
}
add_action( 'wp_enqueue_scripts', 'php_to_js_enqueue' );

And here is the JavaScript:

jQuery( document ).ready(function($) {
    console.log( php_vars.example_variable );
});

The files can be viewed and downloaded from GitHub.