Why is my javascript file not found by wordpress? and why doesn't my javascript file refresh?

Question

I added custom javascript to a wordpress theme through the wp_enqueue_script() function.

I placed my file in theme-folder/js/my-javascript.js

But it would not be found by wordpress! I would see the script tag in the html source inserted by wordpress, but clicking on it would take me to a "not found page". I looked around everywhere to see if this was some caching issue. Turned off caching, still nothing.

Finally, I ended up placing my-javascript.js file in the root of theme-folder, instead of 'js' folder. And now my js file was being found and loading.

But now a new problem I don't understand.. I would edit my file and the changes wouldn't reflect! I would have to change the file name of my js file everytime I made a change, renaming the file in my enqueue script function as well...I just wanted to get this task done.

So why does this happen? The site is hosted on dreamhost, and I suspect they used a one-click installer. Does dreamhost do some sort of caching on its own? and that's why?

Am I dumb? or does wordpress somehow know that I hate it?

Edit:

This is how I'm loading the script and how I left it working, but why won't my script refresh when I make changes and why doesn't it work when I place it in theme's 'js' folder?

/* Add floater script */
function add_floater_div_script(){  
    /* wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);  */
    if ( is_page(1208) ) {  
       wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), '', true);  
    }             
}  
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' ); 

Edit: Changed code from "array ( " to "array(" because someone thought this was a problem. I did a quick check myself and PHP is ok with this space so this does not explain the weird wordpress behaviour I'm trying to solve.

Answer 1

Yeah, caching gets really annoying, Though hard reloading should solve the prob but we can't expect client to do it everytime. And WordPress has added a way to take care of that :)

wp_enqueue_script accepts 4th parameter as version number...

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

So just update version after each update...

For development, Just set it as time()... So that it is reloaded every single time and never cached...

wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), time(), true);

Your code will look something like this...

/* Add floater script */
function add_floater_div_script(){  
    /* wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);  */
    if ( is_page(1208) ) {  
       wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), time(), true);
    }             
}  
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' ); 

BE SURE TO REMOVE time() FROM PRODUCTION VERSION. Or your file will never be cached by browser... Just set the version of your theme after dev is complete, so that every new version gets JS updated.

Answer 2

Try by wrapping your enqueue action in a function that you'll call on after_setup_theme hook in your functions.php

<?php
add_action( 'after_setup_theme', 'yourtheme_theme_setup' );

if ( ! function_exists( 'yourtheme_theme_setup' ) ) {
    function yourtheme_theme_setup() {
        add_action( 'wp_enqueue_scripts', 'yourtheme_scripts' );
    }
}

if ( ! function_exists( 'yourtheme_scripts' ) ) {
    function yourtheme_scripts() {
        if ( is_page( 1208 ) ) {
            wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array( 'jquery' ), '', true );
        }
    }
}

Also be sure you're on page with id of 1208 to see if the script is actually loaded (because of the conditional).

And do a hard refresh (Ctrl+Shift+R).