One of the challenges you’ll encounter when developing WordPress themes is finding a way to make your data (accessible via PHP) also accessible in scripts. For example, you might have a popup that appears every time a user clicks a button. Since we want it to be translatable, the message in that popup should be defined using PHP.
The question is how do we pass this data to our scripts, whether jQuery or JavaScript? The answer lies in a very useful and cool function called wp_localize_script().
The wp_localize_script function puzzled me in my early years as a WordPress developer. I saw references to its usage while researching WordPress themes, but I didn’t quite understand how it worked and what exactly it did.
I didn’t really grasp its usage until about a year ago when I was asked by one of the startup companies I work with to create a landing page displaying a Marketo form, with the ability to specify which form to display based on the form ID entered in the WordPress management interface.
So, I got to work and implemented the solution for them, thinking it would be right to share with you how to use the wp_localize_script function…
The wp_localize_script Function
The wp_localize_script function allows you to use localization for translation of any string in your scripts. This is necessary because WordPress currently only allows usage of PHP for this purpose and not directly in JavaScript.
Although this is the primary use of the function, you can actually use it to make any data in PHP accessible in scripts and on the client side, data that is usually only accessible on the server side of WordPress.
So, regarding our matter – using the wp_localize_script function is done as follows:
<?php wp_localize_script( $handle, $name, $data ); ?> Let’s explain the parameters of the wp_localize_script function:
- $handle – The name of the script to which you’re passing the data (The handle used while enqueuing the script).
- $name – The name of the variable that will hold the data. Note that the variable name must be unique, so it’s advisable to use some kind of prefix to prevent conflicts. It cannot contain underscores since it’s a JavaScript object.
- $data – The actual data. It can be a single array or a multi-dimensional array.
העברת מידע מ ACF ל JavaScript באמצעות wp_localize_script
If you are interested in learning more about using ACF on WordPress sites, take a look at the basic guide to using ACF.
Now we will create a Javascript file and perform enqueuing as we add any asset in WordPress sites:
wp_register_script( 'localize-marketo', get_stylesheet_directory_uri() . '/js/localize-marketo.js', array(), true );
wp_enqueue_script( 'localize-marketo' );Afterwards we will use the wp_localize_script function as follows:
wp_localize_script( 'localize-marketo', 'acf_vars', array(
'my_localized_var' => get_field( 'marketo_id' ),
)
);Note that we used the same handle for the functions (the first parameter). We called the second parameter acf_vars but you can name it whatever you want and it will be the name of the object we refer to in order to get the information.
The array we passed in the third parameter pulls the information from the ACF field marketo_id we created earlier. We named the key my_localized_var but you can choose whatever name you want for it.
Accessing the variables from a Javascript file
To access the variables, we go to the localize-marketo.js file we created, the same one whose handle we added in the first parameter when calling wp_localize_script. We need to use what we entered in the second parameter to access the variables, following the key name we chose. It will look like this:
jQuery(document).ready(function () {
var x = acf_vars.my_localized_var;
});
This is of course JavaScript code and the variable x will contain the text we put in the field we created in ACF, just take the variable and use it however you want…
In conclusion
In this post, we explained how to pass information from Advanced Custom Fields to JavaScript but of course, you can use this function to transfer information from PHP to JavaScript regardless of ACF.
If you are writing code and need to pass specific information between the server and the client side – I am sure you will love the wp_localize_script function. Using wp_localize_script allows you to pass information directly from the database or PHP to JavaScript. In simple words, this is WordPress’s way of allowing you to transfer variables from PHP to JavaScript and this option is very very useful.
