0

So i'm adding a script into my site via functions.php that lives in the plugins directory. The code is pretty straightforward:

function add_jq_script() {
      wp_register_script('r_footer', plugins_url('/responsiveFooter.js', __FILE__), array('jquery'),'1.1', true);
     wp_enqueue_script('r_footer');
 } 

add_action( 'wp_enqueue_scripts', 'add_jq_script', 999 ); 

the plugins seem to be working on local site, but in dev console, i'm getting a 404 that seems to be concatting my site-url and the absolute url for my plugins: http://localhost/~thisuser/wordpress/wp-content/plugins/Users/thisuser/Sites/wordpress/wp-content/themes/liberty/responsiveFooter.js?ver=1.1

i'm a bit new to wordpress, the url should be http://localhost/~thisuser/wordpress/wp-content/plugins/responsiveFooter.js

is there some wp-option i need to change or some plugin setting somewhere to fix this?

1

plugins_url will output the absolute file path of the plugins directory in your WordPress install.

This of course won't work for a client (browser) calling a script.

To access scripts from the plugins directory, you'll want to use plugin_dir_url() which will get you the url of the plugin directory.

Some things to note about plugin_dir_url()

  • You need to specify the directory of the plugin name your script is located
  • The function output contains a trailing slash, so you won't need to concatenate a slash.

Lets say your plugin is called "my_plugin" and the script is located in a "js" directory, your script registration would look something like this:

wp_register_script('r_footer', plugins_dir_url() . 'my_plugin/js/responsiveFooter.js', array('jquery'),'1.1', true);

Note the omission of __FILE__ which will output the absolute path of the current file (not what you want).


If your script is in your active theme, you'll want to use a different function: get_stylesheet_directory_uri

Some things to note about get_stylesheet_directory_uri

  • It requires a trailing slash unlike plugin_dir_url()
  • You will need to specify the directory path in the theme where your script is located.
  • This function works especially well if you are working with child themes, but a child theme is not required. If you are working with a child theme, this function will get the path to the style.css file in your child theme rather than the parent theme.
  • Note that the function is uri NOT url

So lets say your theme is called "my_theme" and the javascript is located in a "js" file, your registration script would look something like this:

wp_register_script('r_footer', get_stylesheet_directory_uri() . '/my_theme/js/responsiveFooter.js', array('jquery'),'1.1', true);

Links to documentation:

|improve this answer|||||
  • thanks! also, i didn't need the my_theme part of the wp_register_script function for the script in my active directory. – heliotrope Mar 21 '17 at 5:35
  • Glad to hear it did the trick! – Ian Mar 21 '17 at 5:36
0

You have used wrong callable function in add_action(). Your code should be something like this-

function add_jq_script() {
      wp_register_script('r_footer', plugins_url('/responsiveFooter.js', __FILE__), array('jquery'),'1.1', true);
     wp_enqueue_script('r_footer');
 } 

add_action( 'wp_enqueue_scripts', 'add_jq_script', 999 ); 

Additionally, according to your code, you need to keep responsiveFooter.js and functions.php files in the same directory.

UPDATE:

Use this code instead. Paste in your functions.php-

function add_jq_script() {
    wp_register_script('r_footer', plugins_url( '/responsiveFooter.js' ), array( 'jquery' ), '1.1', true );
    wp_enqueue_script('r_footer');
 } 

add_action( 'wp_enqueue_scripts', 'add_jq_script', 999 );
|improve this answer|||||
  • sorry, that was a copy/paste error. my corrected script, and the one you posted are the ones that are giving me the error. i'm thinking now that it is a theme issue? should i be using a child theme for this? – heliotrope Mar 21 '17 at 4:58
  • where did you keep functions.php and responsiveFooter.js files? – mukto90 Mar 21 '17 at 5:00
  • responsiveFooter.js is in /wordpress/wp-content/plugins/ and functions.php is in wordpress/wp-content/themes/liberty. Its the functions file that came with the theme – heliotrope Mar 21 '17 at 5:10
  • i have updated the answer. please check. Note: even if it works, it's not a good idea to keep a JS file directly in the plugins directory. – mukto90 Mar 21 '17 at 9:34

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.