How to enqueue JavaScripts in a plugin

admin管理员组

文章数量:1417070

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-

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

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

• plugin-development
• wp-enqueue-script

Share Improve this question edited May 23, 2017 at 12:40 CommunityBot 1 asked Feb 6, 2016 at 12:31 WordCentWordCent 1,89166 gold badges3434 silver badges6060 bronze badges 1

• Possible duplicate of This doesnt work for Plugin get_template_directory_uri() – Milo Commented Feb 6, 2016 at 17:47

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 44

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

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

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.

本文标签： How to enqueue JavaScripts in a plugin