I'm am working on a WooCommerce website, and have all my jQuery in the footer inside script tags. I use PHP to filter out the needed scripts for any particular page.

However, I would like to use the suggested method of using wp_enqueue_script to load my jquery. The trouble is that scripts containing PHP wont work unless I pass any PHP variables to he script using wp_localize_script, which works.... mostly.

I call the enqueue in my functions.php using the wp_enqueue_scripts hook, but some of the PHP variables are not available when I register the script. Some global variables are, but some of my custom variables that are defined further down the line are empty when I try to access them via localize_script.

I'm hoping this makes some sense? If so, how would I go about doing this properly?

For example, let's say some PHP variables are defined in a particular page template. These variables won't be accessible if I enqueue a script using the hook mentioned above. How can I enqueue a script that has access to all the PHP variables defined on the page?

The actual code is a bit complex so ill try to simplify:-

In my functions.php I have the following:-

function wp_enqueue_woocommerce_style(){

    $array = array(
        "var1" => <?php echo $var1 ?>,
        "var2" => <?php echo $var2 ?>

    wp_register_script('chroma_js', get_template_directory_uri() . '/js/chroma.js', '', '1.1', TRUE);
    wp_localize_script( "chroma_js", "php_vars", $array);


add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style',99 );

Which enqueues my script to the footer. However, the 2 PHP variables are defined in the function I hook into 'woocommerce_before_single_product'. When I try to access var1 & var2 in my script they are not defined. Any PHP variables already defined when I call the enqueue work fine. So, im not sure how to go about passing these variables to an enqueued script.

  • You need to pass PHP variables via wp_localize_script() to JS scripts Commented Jan 31, 2016 at 15:18
  • Thanks Peiter. Yes, you are right. I wrote the above post wrong. I am using localize_script and having the problems. Ive edited the above post to avoid further confusion. Commented Jan 31, 2016 at 15:38
  • you get null because your script load before you php variable.If you want to check just define it and check Commented Jan 31, 2016 at 15:52
  • I understand Vasim. Thats essentially my question. How can I use enqueue_script and still have access to my variables? Simply putting the wp_enqueue_scripts into the footer, after all the variables have been defined, doesnt work. It only seems to work when I put the enqueue in my functions file. But at that stage the variables are not defined. Hence my problem. Commented Jan 31, 2016 at 16:14

3 Answers 3


If you're outputting the script in the footer, you can call wp_localize_script at any point after your script is enqueued but before the script is output on wp_footer priority 20.

function wp_enqueue_woocommerce_style(){
        get_template_directory_uri() . '/js/chroma.js',
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

function wp_localize_woocommerce_style(){
    $array = array(
        'var1' => $var1,
        'var2' => $var2
    wp_localize_script( 'chroma_js', 'php_vars', $array );
add_action( 'wp_footer', 'wp_localize_woocommerce_style', 0 );
  • This looks promising. I didn't consider calling the enqueue and localize at different locations. So, basically, if a PHP variable has been defined before wp_localize_woocommerce_style is hooked in, it'll be available to the enqueued script, correct? And to be clear, both these functions still go in functions.php, right? Commented Jan 31, 2016 at 16:40
  • yes, you'll be able to access data defined between when the script is enqueued at wp_enqueue_scripts and when it's output in wp_footer. both go in functions.php.
    – Milo
    Commented Jan 31, 2016 at 16:48
  • That sounds perfect. Thanks Milo. I cant try this yet as im tangled up in something else, but im going to give it a go and report back asap. Commented Jan 31, 2016 at 16:54
  • Gave it a go Milo. Worked a treat. Thanks very much. Commented Feb 1, 2016 at 1:47

// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );

// Localize the script with new data
$translation_array = array(
    'some_string' => __( 'Some string to translate', 'plugin-domain' ),
    'a_value' => '10'
wp_localize_script( 'some_handle', 'object_name', $translation_array );

// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );

You can access the variables in JavaScript as follows:

// alerts 'Some string to translate'
alert( object_name.some_string);
Note: The data in the resulting JavaScript call will be passed as text (see ticket #25280). If you are trying to pass integers you will need to call the JavaScript parseInt() function.

// Call a function that needs an int.
FinalZoom = map.getBoundsZoomLevel( bounds ) - parseInt( object_name.a_value, 10 ); 
  • I dont have any problems running the right scripts on the right pages. Its more a case of PHP variables not being available. For example: I have a PHP function action hooked into 'woocommerce_before_single_product' which defines some key PHP variables. I then want these variables available in my enqueued script. The enqueue and register calls are hooked into "wp_enqueue_scripts" as in your example. But if I try to pass the variables I defined using register_script, they come through as null. It seems the variables are not yet defined when I call enqueue. Commented Jan 31, 2016 at 15:15
  • What actually your code i did not get you Commented Jan 31, 2016 at 15:16
  • Can you write down your code snippet here Commented Jan 31, 2016 at 15:17
  • Very sorry Vasim. I got my terms wrong. I am using "localize_script" to pass the variables. Ive edited my original post accordingly and added a code snippet. Commented Jan 31, 2016 at 15:33
  • okay,I am enthusiastic to learn wp. Commented Jan 31, 2016 at 15:37

I'm used this code recently to get variable in header image path.Add this function to your functions.php:

function img()
    return get_template_directory_uri().'/assets/img/';

and use this in your header.php like this:

<img src="<?php echo img(); ?>my-image.jpg">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.