Enqueueing additional ajax javascript file in Sage 9?

Hi all,

I’m getting really confused and a bit frustrated by Sage 9, nothing I’m used to in my long experience working with WordPress seems to work any more!

I am simply trying to enqueue a new .js file - ajax.js and localise admin_ajax. I’ve followed the docs here to the letter - https://roots.io/sage/docs/theme-development-and-building/.

In setup.php I have the following:

add_action('wp_enqueue_scripts', function () {
    $ajax_params = array(
      'ajax_url' => admin_url('admin-ajax.php'),
      'ajax_nonce' => wp_create_nonce('my_nonce'),
    wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), false, null);
    wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
    wp_enqueue_script('sage/ajax.js', asset_path('scripts/ajax.js'), ['jquery'], null, true);
    wp_localize_script( 'sage/ajax.js', 'the_ajax_script', $ajax_params );
}, 100);

Then the contents of my ajax.js file are:

// eslint-disable-next-line no-unused-vars
function some_function(){
// eslint-disable-next-line no-undef

Added my file to config.json:

  "entry": {
    "main": [
    "customizer": [
    "ajax" : [

The I ran yarn run buld. But when I try to call my function on a page, I’m getting ReferenceError: some_function is not defined - what am I doing wrong? Is this a scopping issue?

Also if anyone can tell me how the heck you format code on these posts, that would also be great!!

Many thanks

You can add code formatting using backticks. I’ve edited your post to demonstrate their use.

re: Your problem

When you say

But when I try to call my function on a page,

How are you attempting to call it? Inside a script tag in your body (i.e. <script>some_function()</script>)? Or are you trying to call it in main.js or somewhere else?

If you’re using a script tag in the body, then you’re attempting to execute the function before it’s been defined: Your wp_enqueue_script() call that enqueues ajax.js is enqueuing it in the footer. Changing the last argument of that call to false (or simply removing it) would enqueue ajax.js in the <head>.

If you’re calling some_function() in main.js, then you would need to add sage/ajax.js to the array of dependencies when you enqueue sage/main.js.

You may also want to double-check the following:

  • Does ajax.js appear in dist/scripts/ after you run yarn build?
  • Do the correct generated links to your scripts, and your embedded localized script, appear in the source of the page when WordPress generates it?
  • You appear to be localizing your ajax parameters to the object the_ajax_script but some_function() attempts to access ajax_object. (This probably isn’t causing your current problem, but it might create future ones.)

Hey there, thanks for the response! Yes the call couldn’t be more simple, just this in the template body:


So surely that should work?? I checked my source and ajax.js is there, although when I view the file, it’s got a load of webkit stuff in as well as my simple function - is that normal??

It’s still telling me that some_function is not defined though :frowning:


It doesn’t even work if I put a the function in the main.js file? I don’t get it… it must be me not really understanding it, I’m not particularly up to speed on ES6 and am just used to defining a function in a javascript file using the function keyword… how am I supposed to do that in Sage 9? Sorry if this is an obvious answer!