I am struggling a lot this time working on including a JavaScript files in plugin folder.

I am trying to create a plugin by transferring widget files from themes directory. I copied the widget file, but that widget file was depending on a JavaScript file so I created a /js/ folder in plugin directory. where this files is hosted "jquery.repeatable.js"

I used this code, but it doesn't seems to include the js file -

function Zumper_widget_enqueue_script()
{   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js' );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');

I searched this on forum- https://stackoverflow.com/questions/31489615/call-a-js-file-from-a-plugin-directory

But still this was not helpful.

I am re-summarizing my question. In my plugin directory there is a js file under this folder - /js/

I wish to include it what is the correct process, do I need to register something also?

Is there something wrong with this portion - 'admin_enqueue_scripts'?

up vote 18 down vote accepted

Your code seems correct, but it will load the script only in admin area beacuse you are enqueuing the script in admin_enqueue_scripts action.

To load the script in frontend, use wp_enqueue_scripts action (which is not the same that wp_enqueue_script() function):

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js' );
}
add_action('wp_enqueue_scripts', 'Zumper_widget_enqueue_script');

Also, that script seems to depends on jQuery, so you should declare that dependencie or the script can be loaded before jQuery and it won't work. Also, I strongly recommend to declare the version of the scripot. This way, if you update the script to a new version, the browser will donwload it again and discard the copy it may have on cache.

For example, if the version of the script is 1.0:

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0' );
}
add_action('wp_enqueue_scripts', 'Zumper_widget_enqueue_script');

If you want to load it in admin area:

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0' );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');

UPDATED:

Use this code instead

function Zumper_widget_enqueue_script()
{   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0.0', false );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');

3rd parameter is to declare dependency and 4th one is to define version.

Set 5rd parameter of wp_enqueue_script() to true. That's meaning, this file will be loaded in footer.

  • Third parameter of wp_enqueue_script() is to declare the script dependencies. The fifth paramater is the one to choose if you want to load the script in the footer or in the header. Anyway, I don't think th place to loaded makes any difference. – cybmeta Feb 6 '16 at 13:22
  • Thanks. I read somewhere in some other plugin that some one is doing like this - wp_enqueue_script('zumper',get_template_directory_uri() . '/js/jquery.zumper.min.js',array('jquery'),false,true); You said setting 3rd to true means it will loaded in footer, then what does this false,true combination means? – The WP Novice Feb 6 '16 at 13:22
  • I have updated my answer. Does it work? – mukto90 Feb 6 '16 at 13:31

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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