The Importance of Wp Localize Script

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

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

The most web agencies and freelancers build clients website with WordPress because today you can create anything you want with a WordPress Themes or plugin.  There are 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 times 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 for offer localized translation of any string used in your script. This is very important because WordPress currently offers localization function 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 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 try to pass 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 write what you want to send to 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 this two variables in 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 that are the variables we have passed through the wp_localize_script function. I have have used the object name php_var to call the the values of $mydatas array.

Conclusion

wp_localize_script is one of the most cool function WordPress offer. I have showed only a simple example but you can pass multidimensional arrays  with lot of data that normally developer pass through POST and GET and try to get them through hidden divs .  I think this is a practically, easy and hacky way to pass data into your JavaScript files.