How to pass PHP value to JavaScript in WordPress

Often when I work on the custom plugins or custom themes, I will call the PHP functions within JavaScript. I do that because I want the data that normally can access via PHP to be available on my JavaScript code. In WordPress, you can call the PHP functions within JavaScript easily by using the wp_localize_script function. What the function does, it allows you to get the data from the server-side(PHP) to the client side(JavaScript).

If you are interesting to see how to pass JavaScript values to PHP, check out “How to pass Javascript value to PHP in WordPress“.

Usage:

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

wp_localize_script Parameters:
$handle (required) (string) – Script handle the data will be attached to
$object_name (required) (string) – Name for the JavaScript object. Passed directly, so it should be qualified JS variable.
$data (required) (array) – The data itself. The data can be either a single or multi-dimensional array.

PHP code

Below is an example of the main plugin file. I also add the useful comment in it.

• Basically, we will hook ‘mct_load_scripts‘ function with admin_init hook.
• Then in ‘mct_load_scripts‘ function, we will register the JS script file and tell WordPress that we will pass PHP values to JS file that we register. To do that, we use wp_localize_script function.

<?php
// Hook our mct_load_scripts function into WordPress's admin_init hook
add_action( 'admin_init', 'mct_load_scripts' );

/**
* callback function
*/
function mct_load_scripts() {
    wp_enqueue_script( 'mct-script', plugin_dir_url( __FILE__ ) . 'js/mct-script.js', array( 'jquery'), '1.0', true );
    
    // call the PHP functions
    // $option_values can be string, integer, object, array
    $option_values = mct_get_options();
    
    // *important:* wp_localize_script function must be called AFTER wp_enqueue_script() or wp_register_script() and use the same handle as the attached script, which is 'mct-script' in this case.
    wp_localize_script( 'mct-script', 'mct_vars', $option_values );
    // in the mct-script.js, we can access the $option_values by "mct_vars" variable.
}

/**
* get the option data from wp_options table
*/
function mct_get_options() {
    $options = get_options('mct_options'); // get_options function will save the data into wp_options table
    return $options;
}
?>

JS code

In mct-script.js, you can access PHP values by “mct_vars” variable which you define via wp_localize_script function. Below is the JS code.

/* in mct-script.js */
var option_values = mct_vars;
alert( option_values );

Conclusion

Passing PHP values to JS code in WordPress can be done with wp_localize_script function. The setting is similar to pass JS values to PHP code.