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 script. In WordPress, you can call the PHP functions within JavaScript easily by using the wp_localize_script function. What it does, it allows you to get the data from the server-side to the client site.

Usage:

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

Here is an example in the main plugin file

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

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, int, object, array
    $option_values = mct_get_options();
    
    // *important:* wp_localize_script function must be called after wp_enqueue_script function with the same handle which is 'mct-script'.
    wp_localize_script( 'mct-script', 'mct_vars', $option_values );
    // in the mct-script.js, we can access the option values by mct_vars variable.
}

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

In mct-script.js (javascript file)

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

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. And in 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”. 

Another example

Also, you can send the ajax URL from the admin site to the client site. Here is an example.

In php file

<?php 
   // in the functions.php or custom plugin 
   wp_enqueue_script( 'mtm-script', MTM_PLUGIN_URL .'js/mtm-scripts.js', array('jquery'), '1.0', true ); 
   wp_localize_script( 'mtm-script', 'mtm_ajaxobj', array('ajaxurl' => admin_url('admin-ajax.php'),         'ajaxnonce' => wp_create_nonce('load_more_posts')));  
?>

in the mtm-scripts.js

// pass the value to the action 
var data = {   
   'action': 'load_posts_by_ajax',  // load_posts_by_ajax is the PHP function   
   'security': mtm_ajaxobj.ajaxnonce // get the value from PHP with wp_localize_script() helps 
}; 

$.post(   
    mtm_ajaxobj.ajaxurl, // url is ajaxurl   
    data,  // send data via ajax   
    function (response) {     
       if (response.length !== 0) {         
           // add something here     
       }   
    }
);

That’s it. You access any data you want from the server-side and use them in the client script.

More Information

• 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.