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.