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