In open source web development, you find yourself using both PHP and Javascript, especially when you’re on both sides of the client-server application development. There will be instances when you will need to exchange data between the two. In a previous article, we had learnt how to send values from jQuery to PHP, for a form operation. In this article, we will cover the reverse use case, where we need to send data from PHP to your javascript code.
[space]
The Need to Send Data from PHP to Javascript
Values may be needed to be sent to your javascript code, from PHP. The most common use case in WordPress development, is when we need localised string translations. Other cases may be when we need values read from the database, such as a database option required to fill a default value, or a specific URL, such as homepage, etc.
For example, consider your javascript file ‘example.js’, which has the following function:
[pre]function myFunction() {
var value1 = ‘xyz’;
var value2 = 23;
}[/pre]
Consider that these values, ‘xyz’ and ‘23’, actually need to be read from the database.
Using wp_localize_script to Send Values
Since these values have to be read from the database, we have to use PHP. WordPress provides us a function wp_localize_script, which can be used here. Although the primary use of the function is to send translated strings which will be used in a script, you can use the function to send any data values. This function should be called after a script has been registered and enqueued.
[space]
-
Register and Enqueue the Script
The javascript library has to be enqueued, to ensure that it is loaded on the required page. As is the case, when you usually enqueue a script, you have to use either the wp_register_script function along with wp_enqueue_script (or just the enqueue function with all the required parameters
[pre] add_action( ‘wp_enqueue_scripts’, ‘wdm_enqueue_scripts’ );
function wdm_enqueue_scripts()
{
wp_register_script( ‘example-script’, get_stylesheet_directory_uri() . ‘/js/example.js’ );
wp_enqueue_script( ‘example-script’);
}[/pre]
[space]
-
Use wp_localize_script
Once we have enqueued the script, we can pass the values we need, using wp_localize_script. Add the below code, after register script and before enqueue script.
[pre]$passedValues = array( ‘value1’ => ‘xyz’, ‘value2′ => ’23’ );
wp_localize_script( ‘example-script’, ‘passed_object’, $passedValues );[/pre]
Remember, the values will be initialized only once, when the script is loaded.
[space]
-
Using the Values in Your Script
In your javascript library now, you can directly access the passed values using ‘passed_object’ variable. Since all data traditionally will be passed as text, if you want to read integer values, you need to use, parseInt function.
In your example.js file, you can access the passed values as below:
[pre]var value1 = passed_object.value1;
var value2 = parseInt(passed_object.value2, 10);[/pre]
[space]
Using wp_localize_script certainly makes it fairly easy to pass values from PHP to javascript in WordPress. Have you tried using this function in your theme or plugin? Or do you use a different method? Do leave your comments, in the comment section below.
