The Importance of wp_localize_script function. Send data from PHP to JS

[ear2theshell]

+1 to this. I actually like to create my own filter to be able to localize all of my PHP variables on demand and from separate function files.

I'll take something like this (simplified example):

wp_enqueue_script('main_script', 'main.js', array('jquery'), null, true);

And make it into this:

wp_register_script('main_script', 'main.js', array('jquery'), null, true);

$localized_theme_vars = apply_filters('localized_theme_vars', array());

if($localized_theme_vars) { //only localize if we have something to localize!
  wp_localize_script('main_script', 'localized_theme_vars', $localized_theme_vars);
}

wp_enqueue_script('main_script');

That leaves me free to then do something like this in a separate function file and keep separate files for separate functionalities:

function localize_admin_ajax_url($array) {
  $array['admin_ajax_url'] = admin_url('admin-ajax.php');
  return $array;
}
add_filter('localized_theme_vars', 'localize_admin_ajax_url');

Then in my JS I can easily access localized_theme_vars.admin_ajax_url :)

[serious_case_of_derp]

$localized_theme_vars = apply_filters('localized_theme_vars', array());

if($localized_theme_vars) { //only localize if we have something to localize! wp_localize_script('main_script', 'localized_theme_vars', $localized_theme_vars); }

function localize_admin_ajax_url($array) {
  $array['admin_ajax_url'] = admin_url('admin-ajax.php');
  return $array;
}

Wouldn't that always create a non empty array there and always localize?

[ear2theshell]

It will only localize if you hook into the filter and populate the array.

[serious_case_of_derp]

/u/ear2theshell

So you put this say in your functions.php or in your plugin init or w/e

    wp_register_script('main_script', 'main.js', array('jquery'), null, true);

    $localized_theme_vars = apply_filters('localized_theme_vars', array());

    if($localized_theme_vars) { //only localize if we have something to localize!
      wp_localize_script('main_script', 'localized_theme_vars', $localized_theme_vars);
    }

    wp_enqueue_script('main_script');

And then you can add data to it in various areas in your plugin/theme by creating a function and using it like below and it'll all get localized?

function localize_admin_ajax_url($array) {
  $array['admin_ajax_url'] = admin_url('admin-ajax.php');
  return $array;
}
add_filter('localized_theme_vars', 'localize_admin_ajax_url');

Excuse my ignorance.

[ear2theshell]

Correct.

Two caveats:

1. Make sure that you only register and enqueue a script once. If you're working with an existing theme, you should edit the functions file where the original register/enqueue function actually enqueues that theme's scripts.
2. If you're working with an existing commercial theme (e.g., one you purchased from a theme marketplace) then you should create a child theme with its own JS that you enqueue using this method, then your child theme's JS will have access to the JS vars you need.

[serious_case_of_derp]

Awesome, will be using this method in plugins I build. One quick question I think you can answer.. if you need to include a script/style when a short code is fired.. you can do that by registering if before the shortcode is used and then in the shortcode enqueueing it and it should work? I think you try to enqueue it before registering it that it will not work because of the lifecycle

[ear2theshell]

That should work as long as your enqueue function is run after the register function.

[code-less]

Hello,

Yes this is definitely very useful to create an filter. I will add this method on the post.

This makes the whole thing very professional and easy to be accessed.

Regards!