How to enqueue JavaScripts in a plugin

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

Leave a Comment