how to add javascript in wordpress template? - wordpress

Question

I want to add 2 js files in my wordpress template function-dir.php.
how to add this js file is there any tag?
is it right function to use
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
Thanks in advance....

Answer 1

You use wp_register_script to register a script with its handle in order to avoid duplicating code (if for instance you enqueue it in several places and need to update the filename). This is usually not needed, I usually use wp_enqueue_script(), which takes the same arguments and outputs it to the page.
I usually do this by creating a setup function with all my style and script enqueues and then hooking that function up to one of the pre-made hooks, like this:
function theme_enqueue() {
/**
* Scripts.
*/
wp_enqueue_script('scripts', get_template_directory_uri() . '/js/lib/scripts.pkgd.min.js', array('jquery'), THEME_VERSION);
wp_enqueue_script('myscript', get_template_directory_uri() . '/js/myscript.js', array('scripts'), THEME_VERSION, TRUE);
wp_enqueue_script('main-menu', get_template_directory_uri() . '/js/menu.js', array('jquery'), THEME_VERSION, TRUE);
}
add_action('wp_enqueue_scripts','theme_enqueue');

Answer 2

You can use following structure as plugin by using wp_enqueue_script;
function add_custom_js() {
wp_enqueue_script( 'script_name', get_template_directory_uri() . '/js/custom.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_custom_js' );
If you are developing plugin, you can add this action to your plugin. Or you can put this to functions.php

Answer 3

wp_register_script() function is used to register your script once and call anywhere, anytime. And wp_enqueue_script() is used to call it in your functions.php file
Method: 1
// First Register
function register_my_scripts(){
wp_register_script('handler_1', get_template_directory_uri() . "/js/script_one.js");
wp_register_script('handler_2', get_template_directory_uri() . "/js/script_two.js");
}
add_action('init', 'register_my_scripts');
Now use :
function wp24_load_script() {
// Check if you want to load for
// specific page
wp_enqueue_script('handler_1');
}
add_action("wp_enqueue_scirpts", "wp24_load_script");
Method: 2
Or you can directly load it with wp_enqueue_script() function:
function wp24_load_script() {
// Check if you want to load for
// specific page
wp_enqueue_script('handler_1', get_template_directory_uri() . "/js/script_one.js");
}
add_action("wp_enqueue_scirpts", "wp24_load_script");