passing-php-value-to-javascript-in-wp
Home » BLOG » WordPress » How to pass PHP value to JavaScript in WordPress

How to pass PHP value to JavaScript in WordPress

category:  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;
}
?>

wp_enqueue_scripts & admin_enqueue_scripts

wp_enqueue_scripts – it is the proper hook to use when enqueuing scripts that are meant to appear on the front-end.  it is used for enqueuing both scripts and styles.

admin enqueue scripts – it is the first action hooked into the admin scripts actions. it is used for enqueuing both scripts and styles.

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 );

Important note

In the functions.php or your custom plugin, normally you will register the script with wp_enqueue_script function. After you register the script, you will add the wp_localize_script function. Then at the wp_localize_script function, you will identify the handle which is the same handle as in the wp_enqueue_script function. In this case, it is “mct-script”

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.