The Importance of WP Localize Script

WordPress is one of the greatest platforms on the web today.  There are reasons for all this popularity: Flexible and Easy.

Yes i mean WordPress is such an easy platform that can be learned in very few steps by anyone. Also is very flexible to be customized by developers and build their products on it.

Most web agencies and freelancers build clients' websites with WordPress because today you can create anything you want with a WordPress Themes or plugin.  There are an unlimited number of themes that can be found on Themeforest or WordPress.com library.

If you are a web developer sometimes you would have needed to pass a variable from PHP to JavaScript.  Most of the time this can be done through GET and POST methods.

WordPress gives you the possibility to pass those variables through a function that is called wp_localize_script();  This function is originally created to offer localized translation of any string used in your script. This is very important because WordPress currently offers localization functions only in PHP and not directly for JavaScript.

The importance of wp_localize_script is when you can pass data directly from PHP to JavaScript.

Functions is very easy to handle there are only 3 parameters required :

$handle
(string) (Required) Script handle the data will be attached to.

$object_name
(string) (Required) Name for the JavaScript object. Passed directly, so it should be qualified JS variable. Example: ‘/[a-zA-Z0-9_]+/'.

$l10n
(array) (Required) The data itself. The data can be either a single or multi-dimensional array.

Pass Variables Through WP_LOCALIZE_SCRIPT

Let's try to pass the PHP variable to the script main.js file. First, we have to enqueue script :

wp_enqueue_script( 'main.js', get_template_directory_uri().'/js/main.js.js',  '1.0', 1 );

After that we have to call the wp_localize_script() function:

wp_localize_script('main.js',  'php_var', $mydatas )

now let's write what you want to send to the main.js javascript file:

$mydatas = array(

'delay' => $delay,

'speed' => $speed

)

Using the data in JavaScript

As you can see i have set two variables that we have been set a value in PHP ($delay, $speed). Now we have only to access these two variables in the main.js file :

$("#tweet_footer").each(function(){
    var $self = $(this);
    $self.carouFredSel({
      circular : true,
      infinite : true,
      auto : false,
      scroll : {
        items : 1,
        fx : "fade"
        speed: php_var.speed, 
        delay: php_var.delay
      },
      prev : {
        button : $self.parent().parent().find('.back')
      },

      next : {
        button : $self.parent().parent().find('.next')
      }
  
    });
  });

In the lines above i have added the php_var.speed and php_var.delay which are the variables we have passed through the wp_localize_script function. I have used the object name php_var to call the the values of $mydatas array.

Conclusion

wp_localize_script is one of the coolest functions WordPress offers. I have shown only a simple example but you can pass multidimensional arrays with a lot of data that normally developers pass through POST and GET and try to get them through hidden divs.  I think this is a practical, easy and hacky way to pass data into your JavaScript files.