Adding JavaScript variables via functions.php

This is quite useful when you have several JavaScript functions which requires to define url (e.g. ajax calls). Rather than hardcoding link inside each function we can specify one variable. In this way, it can be used in different functions.

Creating function

We need to start with writing set_js_vars() function in functions.php. First, we will use wp_register_script function to register a script.

Function parameters:

  • $handle (required) – unique name for script;
  • $src (required) – URL or path to script
  • $deps (optional) – array of registered script handles on which this script depends. (script will not be enqueued before provided dependencies)
  • $ver (optional) – script version number.
  • $in_footer (optional) – boolean value to enqueue script before </body> tag.

We will provide only required parameters. In our example we don’t have any dependencies. Also we need to load variables as soon as possible so $in_footer parameter must be false (default value).

For $handle we will use “jsVars” name. Since we do not loading any JavaScript file $src is empty string.

function set_js_vars() {
    wp_register_script( 'jsVars', '');
}

Next step we need to set JavaScript object with variables. For this purpose, we will use wp_localize_script function.

Function parameters:

  • $handle (required) – script name to which JavaScript object will be attached.
  • $object_name (required) – name of JavaScript object.
  • $l10n (required) – array with data.

For $handle parameter we will use previously registered “jsVars” script. Therefore $object_name will be page_urls. Also $l10n (data array) will have few url’s generated with default WordPress functions.

function set_js_vars() {
    wp_register_script( 'jsVars', '');
    wp_localize_script( 'jsVars', 'page_urls', array(
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        'homeURL' => get_home_url(),
        'templateDir' => get_template_directory_uri(),
    ) );
}

Further, we must enqueue our script with wp_enqueue_script function.

Function parameters:

  • $handle (required) – unique name for script;
  • $src (required) – URL or path to script
  • $deps (optional) – array of registered script handles on which this script depends (script will not be enqueued before provided dependencies)
  • $ver (optional) – script version number.
  • $in_footer (optional) – boolean value to enqueue before </body> tag.

This function is very similar to wp_register_script. However we cannot use only wp_enqueue_script function because it load script immediately and we can’t attach our JavaScript object with data to script.

function set_js_vars() {
    wp_register_script( 'jsVars', '');
    wp_localize_script( 'jsVars', 'page_urls', array(
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        'homeURL' => get_home_url(),
        'templateDir' => get_template_directory_uri(),
    ) );
    wp_enqueue_script( 'jsVars' );
}

Action hook

Last step is to hook our function to “wp_enqueue_scripts” action. For this purpose, we will use add_action function.

add_action( 'wp_enqueue_scripts', 'set_js_vars' );

Final code

function set_js_vars() {
    wp_register_script( 'jsVars', '');
    wp_localize_script( 'jsVars', 'page_urls', array(
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        'homeURL' => get_home_url(),
        'templateDir' => get_template_directory_uri(),
    ) );
    wp_enqueue_script( 'jsVars' );
}

add_action( 'wp_enqueue_scripts', 'set_js_vars' );