Classic Allison: late to the party! But better late than never. Let’s talk about using ACF fields within a JS file.

<?php wp_localize_script( $handle, $name, $data ); ?>

Function Purpose

This allows you to translate string values, if necessary.

It also allows you to take data from PHP and make it available to your Javascript! In my case, I was aiming to take a group of data entered into ACF fields and pass them as an array within my JavaScript.

Keep in mind that you need to be using wp_enqueue_script() or wp_register_script() prior to this function being called for it to work.

Function Parameters

The first parameter is the handle of our JavaScript or jQuery init file, which is the same as the first parameter in our wp_enqueue_script() function. This is the file that will use the variables we’re grabbing.

The function is going to create an object that is accessible from our JavaScript. The name of this created object is the second parameter and is a prefix value that will be appended to the PHP values we’re referencing later on.

The third parameter, is an array of variables to pass into our script. Each key in the array will be setup as an item in our JavaScript object.

For instance, in this case I’m enqueuing a file called ‘atarr-super-heroine’:

<? wp_enqueue_script( 'super-heroine', get_template_directory_uri() . '/assets/js/super-heroine.js', array(), $version, true ); ?>

So, when we want to localize the script, we’ll use that name (super-heroine) for the first parameter as seen below.

Example:

<? 
	wp_localize_script( 'super-heroine', 'acf_vars', array(
			'list_parent' => get_field( 'heroine_secret_identity' ),
		)
	);
?>

The second parameter (acf_vars) can be named whatever you’d like to refer to your object as. In my case, acf_vars. The array I passed as the third parameter grabs the ACF field that is named 'heroine_secret_identity' with a key that I named 'list_parent'

Accessing the Variables

To access these variables, we go within the super-heroine.js file that we’ve listed as the first parameter. We use what we passed as the second parameter to access the variables followed by the designated key. In my case, the variables were two repeaters within a grouping (descriptor_list and subject_list).

const desc = acf_vars.list_parent.descriptor_list;
const subj = acf_vars.list_parent.subject_list;

From there, take the variables and use them however you need to within your JS file. Voilà!

Function Resources:

• WordPress Codex: wp_localize_scripts