WordPress: PHP Variable showing null in JavaScript

Question

I am stuck in strange situation I am trying to pass PHP variable in JS by WordPress wp_localize_script and try to show it in console.log but it is outputting null. here is my code in functions.php

$conv = 1.36;
echo $conv;

add_action('wp_enqueue_scripts','cassets');
function cassets(){
  wp_enqueue_script("all-script",get_template_directory_uri().'/all-script.js',array('jquery'),'',true);
  $rate= array(
    'conv' => $conv,
  );
  wp_localize_script( 'all-script', 'rate', $rate);

}

and in all-script.js

var conv = rate.conv;
console.log(conv);

In console window it shows null but php echo value shows right.

Thanks in advance.

Try wrapping your javascript in `$(document).ready(function () { // your script here })` — Tom M, Mar 12 '19 at 17:27
@Teemu - This isn't a duplicate of that question. WordPress allows you to easily pass PHP variables to JavaScript with the `wp_localize_script()` function. His variables are just used out of scope. — Xhynk, Mar 12 '19 at 17:33
@Xhynk Yeah, I realized it almost immediately after closing, reopened now. — Teemu, Mar 12 '19 at 17:34

Xhynk · Accepted Answer · 2019-03-12T17:51:10.980

You're using your $conv variable out of scope. Take a look at PHP's Variable Scope documentation. You're defining $conv in the global scope, but referencing a local scope $conv in your cassets() function.

You need to use the function scoped $conv, either by defining it inside, or passing it to the function as a global variable or pass it as a Reference.

Here's a few examples:

Defining within the scope:

add_action('wp_enqueue_scripts','cassets');
function cassets(){
    $conv = 1.36;

    wp_enqueue_script( 'all-script', get_template_directory_uri().'/all-script.js', array('jquery'), '', true );

    $rate = array(
        'conv' => $conv,
    );

    wp_localize_script( 'all-script', 'rate', $rate );
}

Passing it to the function as a global variable:

$conv = 1.36;

add_action('wp_enqueue_scripts', 'cassets' );
function cassets(){
    global $conv;

    wp_enqueue_script( 'all-script', get_template_directory_uri().'/all-script.js', array('jquery'), '', true );

    $rate = array(
        'conv' => $conv,
    );

    wp_localize_script( 'all-script', 'rate', $rate );
}

Passing it via closure:

$conv = 1.36;

add_action('wp_enqueue_scripts', function() use($conv){
    wp_enqueue_script( 'all-script', get_template_directory_uri().'/all-script.js', array('jquery'), '', true );

    $rate = array(
        'conv' => $conv,
    );

    wp_localize_script( 'all-script', 'rate', $rate );
});

score 2 · Answer 2 · answered Mar 12 '19 at 17:39

Your problem is, that you defined $conv outside your function.

Inside your function $conv was is undefined. (I think u should get a warning from php too).

Try this:

add_action('wp_enqueue_scripts','cassets');
function cassets(){
  $conv = 1.36;
  wp_enqueue_script("all-script",get_template_directory_uri().'/all-script.js',array('jquery'),'',true);
  $rate= array(
    'conv' => $conv,
  );
  wp_localize_script( 'all-script', 'rate', $rate);

}

WordPress: PHP Variable showing null in JavaScript

2 Answers2

Defining within the scope:

Passing it to the function as a global variable:

Passing it via closure: