404 when enqueue_script using plugin_url

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?

Topic plugins-url functions wp-enqueue-script Wordpress

Category Web


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

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:

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.