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
– Tom M, Commented Mar 12, 2019 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
– Xhynk, Commented Mar 12, 2019 at 17:33
@Xhynk Yeah, I realized it almost immediately after closing, reopened now. — Teemu
– Teemu, Commented Mar 12, 2019 at 17:34

Xhynk · Accepted Answer · 2019-03-12 17:51:10Z

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 );
});

Sysix · Accepted Answer · 2019-03-12 17:39:06Z

2

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);

}

answered Mar 12, 2019 at 17:39

Sysix

1,8341 gold badge20 silver badges26 bronze badges

Collectives™ on Stack Overflow

WordPress: PHP Variable showing null in JavaScript

2 Answers 2

Defining within the scope:

Passing it to the function as a global variable:

Passing it via closure:

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Defining within the scope:

Passing it to the function as a global variable:

Passing it via closure:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related