1

I get this error in my console when visiting the admin pages:

GET https://example/test/wp-content/plugins/home/account/public_html/wp-content/themes/mytheme-theme/inc/custom-script.js?ver=4.9.4 net::ERR_ABORTED

I have tracked down the error to the code below:

function theme_add_color_picker( $hook ) {

if( is_admin() ) {

    wp_enqueue_style( 'wp-color-picker' );

    wp_enqueue_script( 'custom-script-handle', plugins_url( 'custom-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );

    wp_enqueue_script( 'admin-color-picker', get_template_directory_uri() . '/javascripts/admin/admin-color-picker.js', array( 'jquery' ) );

}
}

The problem here is that custom-script.js isn't available inside the /inc folder, and it is nowhere in the theme-folder at all. But the color picker works perfectly. And if I remove this line:

wp_enqueue_script( 'custom-script-handle', plugins_url( 'custom-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );

It will stop working all together. So how come I get this error, but it still works?

Would like to have a clean console log.

EDIT:

I changed to this instead:

wp_enqueue_script( 'wp-color-picker' );

I get this error:

Uncaught TypeError: $(...).wpColorPicker is not a function
at HTMLDocument.<anonymous> (admin-color-picker.js?ver=4.9.4:3)
at i (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,thickbox&ver=4.9.4:2)
at Object.fireWith [as resolveWith] (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,thickbox&ver=4.9.4:2)
at Function.ready (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,thickbox&ver=4.9.4:2)
at HTMLDocument.K (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,thickbox&ver=4.9.4:2)
  • What happens if you just enqueue 'wp-color-picker' instead? – fuxia Mar 8 '18 at 8:29
  • I thought that solved it. Changed to wp_enqueue_script( 'wp-color-picker' ); Now I get another error instead. Updated main post. – jockebq Mar 8 '18 at 12:42
1

The colour picker is working fine because it's a separate script being enqueued as a dependency of custom-script-handle. So even if custom-script-handle isn't loading because the URL is wrong the colour picker script will still load.

If you don't enqueue custom-script-handle then the colour picker won't work because the script is being enqueued at all. You would need to enqueue it separately with wp_enqueue_script( 'wp-color-picker' );

The reason custom-script-handle itself isn't loading, and causing the console error that you see, is because the URL is wrong. The reason the URL is wrong is because you're using plugins_url() incorrectly. Specifically in how you've used __FILE__.

From the documentation, the 2nd argument to plugins_url() is:

A full path to a file inside a plugin or mu-plugin. The URL will be relative to its directory. Typically this is done by passing __FILE__ as the argument.

The problem is that in your case __FILE__ is within a theme. So your __FILE__ is:

/home/account/public_html/wp-content/themes/mytheme-theme/inc/{whatever-the-file-name-is}.php

But the plugins directory is:

/home/account/public_html/wp-content/plugins

WordPress already knows the URL to the plugins folder, https://example/test/wp-content/plugins/, but needs to use those two paths to figure out the URL to the specific file you've requested. So what plugins_url() does is try to figure out the plugin folder by subtracting that second path from the first path.

So if used correctly, __FILE__ will be something like:

/home/account/public_html/wp-content/plugins/my-plugin/inc/assets.php

The plugin path is then subtracted from this and you get:

my-plugin/inc/assets.php

plugins_url() then takes off the filename:

my-plugin/inc

Then adds the filename you provided in the first argument (custom-script.js):

/my-plugin/inc/custom-script.js

And finally adds that to the plugins URL:

http://example.com/wp-content/plugins/my-plugin/inc/custom-script.js

But since your __FILE__ isn't in the plugins folder, there's no overlap. So when it subtracts the plugin directory and filename the relative path is still:

/home/account/public_html/wp-content/themes/mytheme-theme/inc/

And then that and the filename get added to the plugins URL and you end up with this:

https://example.com/wp-content/plugins/home/account/public_html/wp-content/themes/mytheme-theme/inc/custom-script.js

So if you need your theme to enqueue custom-script.js, you either need to put it in the theme or enqueue it using the handle the plugin will have already registered for it. Don't try an load files from a plugin directly from within a theme.

| improve this answer | |

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.