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.