Search
Close this search box.

How to Pass PHP Data to Javascript Variables in WordPress

Listen to this article

Pass Values PHP jQueryIn 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]

  1. 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]

  1. 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]

  1. 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.

 

Ankit Shah

Ankit Shah

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads