Auto updating JavaScript dependancy in functions.php

Question

I'm enqueuing scripts with dependency in functions.php file like:

wp_enqueue_script('ads', get_template_directory_uri() . '/js/ads.js', array( ), '1.6', true); wp_enqueue_script('banners', get_template_directory_uri() . '/js/banners.js', array( 'ads-REKLAMY' ), $timestamp = filemtime( plugin_dir_path( __FILE__ ) . '/js/banners.js' ), true); 

banners.js is a script which uses imported arrays from ads.js. I need to update ads.js file automatically whenever I make changes there.

For now I use version parameter like "1.6". So I need to manually change it to, for example, "1.7" and change import line in banners.js file.

Of course banners.js updates automatically with timestamp. Is there a way to do that with dependancy file as well?

And do I do that with import in file using dependency? Basically I need ads.js, the dependency file with exported arrays, to update automatically whenever I make changes there. Any solution will do except Webpack.

Answer 1

If I understood your question correctly, you have two JavaScript files: ads.js and banner.js.

You want the site to load the updated version of both of these files, whenever any of these files are changed.

If this understanding is correct, then you may do the following:

function my_custom_theme_scripts() { $ads_version = filemtime( get_stylesheet_directory() . '/js/ads.js' ); $banners_version = filemtime( get_stylesheet_directory() . '/js/banners.js' ); wp_enqueue_script( 'ads', get_stylesheet_directory_uri() . '/js/ads.js', array(), $ads_version, true ); wp_enqueue_script( 'banners', get_stylesheet_directory_uri() . '/js/banners.js', array( 'ads' ), $banners_version, true ); } add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' ); 

This way, whenever any of the files are changed, only the updated versions will be loaded in the frontend. When ads.js is changed, but banners.js is unchanged, the same old banners.js will still get the new ads.js, because the new ads.js will be loaded by the $ads_version timestamp. There's no need to change the dependency handle.

Note: I've used get_stylesheet_directory_uri() and get_stylesheet_directory for consistency (for the currently active theme).

Mixing up get_template_directory_uri() and plugin_dir_path() will work in theory, but that sort of inconsistency may break your code in future. plugin_dir_path() is supposed to be used with plugins, and get_template_directory_uri() for the parent theme.

---

Also, I've added:

add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Just in case you are missing the wp_enqueue_scripts action hook. The code will not work properly without it.

Of course, if you are already using the action hook properly, like:

add_action( 'wp_enqueue_scripts', '<function-that-enqueues-scripts>' );

then please don't add it again.