» » » How to call a PHP function from Javascript in WordPress

How to call a PHP function from Javascript in WordPress

posted in: WordPress
2 min read

Often when I work on the custom plugins or custom themes, I will call the PHP functions within the 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 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

/* 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.

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