2

I am trying to enqueue a js file (calculator.js) from my theme's functions.php file.

I have a desktop theme and a smartphone theme, and I am using a plugin to switch between the two themes depending on the user's device.

I have the exact same code on my desktop theme and it works perfectly, however when I copied it to my smartphone theme, it just seems to ignore the enqueue script.

Here is my code:

function wpb_adding_scripts() {
    wp_register_script('calculator_script', get_template_directory_uri() . '/js/calculator.js', array( 'jquery' ), NULL, 'all');
    wp_enqueue_script('calculator_script');
    wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/calculator.css',false,'1.1','all');
} 
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

What I have done/notes:

  • Made sure functions.php file does indeed start with a opening php tag
  • Made sure all files are in their correct directories
  • Console is not flagging any errors
  • Sources does not show my js file being loaded, however the css file (calculator.css) is being loaded correctly..

Any insights as to what might be the cause of this issue?

Thank you very much.

7
  • Are both of your themes parent/root themes? I'm asking this because get_template_directory_uri will return the uri of the root / parent theme. So if you put the JS files in the child theme directory, it'll not work. To get the uri of child themes, use get_stylesheet_directory_uri() instead. – Fayaz Aug 7 '18 at 3:40
  • Also, what plugin / code are you using to change the themes? – Fayaz Aug 7 '18 at 3:42
  • You should also make sure that when switching to the 'smartphone theme', jQuery is not being removed from the registered/enqueued scripts list. So if the sources does show jQuery being loaded, try using get_stylesheet_directory_uri() or get_theme_file_uri(). – Sally CJ Aug 7 '18 at 4:02
  • It appears that both themes are separate parent themes. I tried both get_theme_file_uri() and get_stylesheet_directory_uri() without any luck. :/ I am using a plugin called Multi Device Switcher by thingsym. (I inherited this project from someone else so I'm not too familiar with the plugin myself) Upon checking the sources, I did see that jQuery was also not loaded, but as I said above get_theme_file_uri() also didn't work. – Kurisubo Aug 7 '18 at 4:30
  • 1
    Balas' solution worked for me! I guess I had to enqueue jQuery separately. Interesting. – Kurisubo Aug 7 '18 at 4:43
1
You can better try this way and let me know.

function wpb_adding_scripts() {
    wp_enqueue_style( 'slider', get_stylesheet_directory_uri() . '/css/calculator.css');
    wp_enqueue_script('jquery');
    wp_enqueue_script('calculator_script', get_stylesheet_directory_uri() . '/js/calculator.js');

} 
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 
1
  • Thank you!!! It works! Could you possibly explain why my method did not work? Or when or where I can use my solution vs yours. – Kurisubo Aug 7 '18 at 4:42
1

Just some modifications

function wpb_adding_scripts() {
    wp_enqueue_script( 'calculator_script', get_template_directory_uri() . '/js/calculator.js', array( 'jquery' ), '', true );
    wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/calculator.css' );
} 
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

use get_stylesheet_directory_uri() instead of get_template_directory_uri() if your functions.php file is in child theme.

See if this works or not ( normally this way, it does )

0

get_template_directory_uri will always refer to the parent theme folder for assets.

get_stylesheet_directory_uri will refer to the "current" theme folder for assets (which could be the parent or the child, depending on where it is called).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.