Based on the information you’ve provided, there are a few potential reasons why your script might not be enqueued properly in WordPress. Let’s troubleshoot:
Try cache busting: It is possible the file is loading but the code is not loading because the file is cached. Try the below code.
The $version variable changes every page load making sure your file always runs the most recently added code. I always use this in development mode, but remove it when I am in live mode by changing it to this:
$version = ‘1.0.0.’;
function enqueue_custom_scripts() {
$version = mt_rand(1000, 100000);
wp_enqueue_script('custom-hotspots', get_stylesheet_directory_uri() . '/js/custom-hotspots.js', array('jquery'), $version);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
Check File Path: Ensure that the file path to your custom-hotspots.js is correct. The script should be located in a js folder in your theme directory. If it’s in a different location or the folder name is different, adjust the path accordingly.
Check File Existence and Permissions: Make sure that the custom-hotspots.js file actually exists in the specified location and that it has the correct file permissions to be readable by the WordPress system.
Script Dependency on jQuery: Since your script is dependent on jQuery (as indicated by array(‘jquery’)), ensure that jQuery is being loaded on your site. Sometimes, themes or plugins might deregister the default jQuery in WordPress.
Console Errors: Check your browser’s console for any JavaScript errors. Errors in other scripts can sometimes prevent subsequent scripts from running.
WordPress Hook Priority: The default priority for add_action is 10. If other scripts or styles are enqueued with a higher priority, they could potentially interfere. You can try changing the priority to see if it affects the loading of your script.
Conflicts with Plugins or Themes: Sometimes, plugins or themes can conflict with the way scripts are enqueued. Try deactivating other plugins or switching to a default WordPress theme temporarily to see if the issue persists.
Debug with wp_enqueue_scripts Action: You can add debugging code inside your enqueue_custom_scripts function to check if it’s being executed. For instance, you can add an error_log statement which will write a message in your WordPress debug log.
WordPress Version: Ensure your WordPress installation is up to date, as older versions might have compatibility issues with certain enqueue functions.
Check reference: This references your child theme;s directory: get_stylesheet_directory_uri()
Make sure that is what you are doing
Direct access to file: Make sure the file is at this url:
yourdomian.com/wp-content/childtheme/js/custom-hotspots.js
Try to access the file by putting the url in the browser address bar to make sure all that is correct.
Here’s an example with a debug log statement:
function enqueue_custom_scripts() {
error_log('Enqueue Custom Scripts function called.');
wp_enqueue_script('custom-hotspots', get_stylesheet_directory_uri() . '/js/custom-hotspots.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');