How to enqueue JavaScripts in a plugin

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'?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

I normally use plugins_url() method to achieve enqueue.

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

Method 3

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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0