3

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.

Improve this question
3
  • looks like cache issue to me. try adding version number to your wp_enqueue_script(). it should look like wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array ( 'jquery' ), '1.2', true); Commented Nov 1, 2016 at 1:59
  • You sure? I was also trying to access the javascript file directly through the url and changing the last number wordpress adds after the = character. Commented Nov 1, 2016 at 2:10
  • hxxp://wordpress-site.org/wp-content/themes/my-theme/custom-floater-8.js?ver=4.6.1 I was trying to remove "?ver=4.6.1" part and accessing the file directly. Also tried modifying the numbers, still wouldn't work. Commented Nov 1, 2016 at 2:13

6 Answers 6

Reset to default
3
+50

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I think this is the best answer, but haven't tried it. I will choose it because time limit for rewarding bounty is running out. I have already done the wordpress work so I really have no incentive to go into their FTP and test out but will add this to my notes and definitely trying this next time. It seems to make sense because I have had this issue on other frameworks. EDIT: Also because of the solution to pass time() to generate unique script version number.
Not caching your scripts is a terrible idea btw - it will load the script every time unnecessarily, and prolong the load time of the site. Bare in mind that google will base the rank of the page based on the page speed as well ;) Also did you try any of our suggestions? You should choose the one that actually works for the future reference if somebody finds your question...
Hi @dingo_d... Google will not check this kinda caching, for google it's just another url to some script it will never run, this is done by the browser ( the kind of caching v r tryna avoid here during dev ). Passing time() as version is a common practice among devs to avoid caching of scripts while software is under development... After everything is done... it's very important to remove time() so that browsers can cache the scripts making site faster for users ;)
3

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).

Improve this answer

4 Comments

Why do I have to check if functions don't exist?
Just a security precaution, it's not mandatory, but a good way to prevent accidentally calling the same function twice. It's mostly recommended for plugins, but I know that they demand this on themeforest, so it just stuck with me...
Ok, I'm gonna try this tonight and see if this is it.
This is not required... We only need to do this if we wanna override (or remove) the hooks/function of an theme from a plugin...
1

The most common issue I see is an error in how you're enqueueing the file. Can you post code in your functions.php file that's enqueuing the JS file? Always be sure to reference the codex and other developer materials as well: https://developer.wordpress.org/themes/basics/including-css-javascript/

For future reference, it should look something like this:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/my-javascript.js');

Edit: After OP posted their code I saw they have a space after array which is causing an error, here is the correct code:

function add_floater_div_script() {
  if ( is_page( 1208 ) ) {  
      wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array( 'jquery' ), '1.0.0', true );
  }
}
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' );
Improve this answer

4 Comments

I've edited question and included my enqueue code. Please take a look, see if I'm doing anything wrong. I've taken a look at the developer materials already.
@8oh8 ok it looks like you just have a space after array–I'll edit my answer to show the correct code but it should be array( 'jquery' ) not array ( 'jquery' )
Hi bezierer, ran tests and PHP does not raise a parse error when there is a space between array and opening parenthesis. I'll edit my post so others don't think the same.
He is enqueueing the files right... It's cache causing the issue... which should be addressed by updating version number after each edit... While in development... time() can be set as version to reload it everytime ;)
1 
add_action('wp_enqueue_scripts', 'load_scripts', 12);
function load_scripts() {
    wp_enqueue_script('filename', get_template_directory_uri() . '/js/filename.js', array(), '1.0.0', true );
}

This is the proper way to import js in wordpress..

Improve this answer

Comments

0

An really easy way to prevent caching of loaded resource files like Javascript-files is to add an random value after the filename that is to be included like so:

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

The PHP function

rand()

generates a random number and is appended to the file name after a '?' as query string. This forces reloading of the file every time the webpage is loaded.

Of course dismiss it for the production version.

Improve this answer

Comments

0

Sometimes the issue could be simple somewhere a duplicated declaration of the name of the enqueue_script.

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

 ...

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

Don't use twice the same name 'custom-script' for example. The second will not be loaded.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.