How to Pass PHP Data to JavaScript in WordPress

Hello devs, in this tutorial i will discuss about wp_localize_script()  in wordpress. How we can use wp_localize_script()  function in our wordpress app, i will show you it. Have you heard before about wp_localize_script() ?

Sometimes we need to pass data from php file to javascript file. Using wp_localize_script()  we can pass data from php file to javascript easily. In this wp_localize_script() example tutorial, i will simply pass data from php file to javascript file.

Let's see the example.

wp_enqueue_script('this_is_your_handle_name', 'assets/js/script.js',array('jquery'),'1.0.0',true);

 

Look in this above we just include our script.js file with handle name. We need this handle name when we will use wp_localize_script(). 

functions.php

wp_localize_script( 'handle_name', 'js_file_object_name', [
  //data goes here
]);

 

Look, wp_localize_script() take two parameter, one is handle name and other is object name. We can use this object name to access this value from wp_localize_script() data.

functions.php

wp_enqueue_script('this_is_your_handle_name', 'assets/js/script.js',array('jquery'),'1.0.0',true);

wp_localize_script( 'this_is_your_handle_name', 'your_object_name', [
  'data' => 'CodeChief is Awesome'
]);

 

Look, now we can access this above data using your_object_name from script.js file. As we mentioned script.js with the handle name this_is_your_handle_name. Hope you will understand. Now in our script.js file

script.js

;(function($){
    $(document).ready(function(){

       //we can use data from here like

       var _data = your_object_name.data;
       console.log(_data);
       
    });
})(jQuery);

 

Read also : How to Remove WordPress Version Number

 

Output
CodeChief is Awesome

 

Hope it can help you. Now you can use wp_localize_script() in your wordpress application to make it more awesome.