Getting file path in script.js

[luuktimmermans]

Hi,

I'm trying to get a file from my theme folder in the script.js. This works with the css files, but it doesn't with the javascript file. How would I do this?

Best regards,

Luuk

[gregsullivan]

Hi Luuk—Thanks for posting this!

What kind of file are you trying to access, and in what context? (E.g., are you trying to import a JavaScript file, or load a JSON file, or something else entirely? When are you trying to load it? Etc.)

I'm going to convert this to a discussion in the meantime. (And sorry for the delay in responding—I was off last week!)

[luuktimmermans]

Hi, no problem! Thanks for answering anyway.

What I’m trying to achieve is the following: I have a media file (let’s say an image) in my themename/theme/assets folder. I want to use this file in my script.js file within a function, so for example:

element.addEventListener("click", function() {
  const image = “../assets/image.webp”;
 
  image.classList.add(“class-name”);
});

How would I do this?

[gregsullivan]

The WordPress-specific way to do this is covered here:

https://wordpress.stackexchange.com/questions/89791/theme-path-in-javascript-file/89795#89795

In short, you could add these two lines after the wp_enqueue_script call in functions.php:

$translation_array = array( 'templateUrl' => get_stylesheet_directory_uri() );
wp_localize_script( 'your-script-handle', 'yourObjectName', $translation_array );

Then, in your script.js file, you could do this:

console.log(yourObjectName);

You could rename templateUrl and yourObjectName as appropriate, and you need to update your-script-handle to match your script handle.

Once you have the path to your theme, you can use that to create a full URL to images contained within the theme.

This approach is (as I understand it) primarily used for localizing strings, but I've used it for reasons like this one in the past.

Hope that helps!

[luuktimmermans]

Ah yes, that works great! Thanks so much.

Another question, how would I include another script to the script.js file, so it gets added during bundling? I have another .js file with a function in it.

[gregsullivan]

You're very welcome! Your most recent question is partially covered on this page:

https://underscoretw.com/docs/esbuild/

(If you want to use the function elsewhere, you'll need to make sure it can be accessed in the appropriate scope. E.g., window.)

This is what the import line looks like to a local file:

import ui from './ui/index.js';

That line appears in ./javascript/script.js, and the imported file is ./javascript/ui/index.js.