Pass php variable to javascript in Wordpress's WP_Widget class

Question

In the widget function of my WP_Widget class in my wordpress plugin, I have a php array variable named $hello. I want to pass this variable to javascript. I have seen the function wp_localize_script and tried to use it. But it is not working from inside the function. How to make it work?

This is the code in widget() function of my WP_Widget class.

wp_register_script('color-script', plugin_dir_url(__FILE__).'scripts/custom.js');
wp_enqueue_script('color-script');
$data = array("text_color" => $instance['text-color'], "bg_color" => $instance['bg-color'], "button_color" => $instance['button-color']);
wp_localize_script('color-script', 'php_data', $data);

This is the javascript in custom.js.

document.getElementById("wid-small-div").style.color = php_data.text_color;
document.getElementById("wid-small-div").style.background = php_data.bg_color;

Could you provide some code samples of what you are trying to do? Otherwise your vague question will get a vague answer. — Joao
– Joao, Commented Oct 9, 2013 at 17:26
How are you using wp_localize_script? Check out a good explanation on how to pass a PHP variable to Javascript in Wordpress: webtipblog.com/… — joe42
– joe42, Commented Oct 9, 2013 at 17:27

Ennui · Accepted Answer · 2013-10-09 17:29:58Z

It's not that simple. PHP is a server-side language which means the server receives a request, renders a page and then sends it to the browser. Javascript is a client-side language (at least in your case) which means it is applied by the browser on the client side after it receives the rendered page from the server.

You can't just pass PHP variables to Javascript because they are not accessible by the browser and the PHP has already finished executing before the JS even comes into play.

In order to do this you need an AJAX request or something similar, which is an asynchronous call to the server (i.e. to a PHP function) made by Javascript that allows you to pass data (usually JSON) between the server and client without reloading the page. jQuery has very robust built in AJAX support that makes this fairly easy.

In your case you just need to use jQuery to send a request to a PHP function on the server that returns the $hello array so you can use it in JS. You can use wp_localize_script() to achieve this too for simple situations like passing variables between PHP and JS but we can't troubleshoot your code without seeing your code.

powerbuoy · Accepted Answer · 2013-10-09 17:36:12Z

0

All you need to do is print the contents of the $hello variable as a JS-variable:

# WP_Widget::widget()
echo '<script>var hello = ' . json_encode($hello) . ';</script>';

Then once the widget is rendered you will have a hello variable in JS.

answered Oct 9, 2013 at 17:36

powerbuoy

12.9k10 gold badges51 silver badges85 bronze badges

2 Comments

Rishi Over a year ago

I did this

echo "<script>document.getElementById('wid-small-div').style.color = " . '"#' . $instance['text-color'] . '"' . ";</script>";

but it does not work.

powerbuoy Over a year ago

Most likely because that code is printed before the #wid-small-div exists. I'd do as in my example, and then, on document.ready, run your style.color-code

Etiene Dalcol · Accepted Answer · 2013-10-09 17:36:58Z

0

Yes, you can pass PHP variables to javascript, but you can't pass variables from Javascript to PHP. PHP is processed server-side, so by the time the page is showed on the browser, all PHP has been already processed and Javascript will start its work.

You can try it this way:

var hello = '<?php echo $hello ?>';

answered Oct 9, 2013 at 17:36

Etiene Dalcol

1014 bronze badges

Collectives™ on Stack Overflow

Pass php variable to javascript in Wordpress's WP_Widget class

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related