将javascript文件链接到wordpress子主题

Question

I'm trying to link a javascript file to my child theme. I've looked at the WordPress Codex and numerous examples, but it still is not working. I'm working on localhost, so from what I have read, i want to use the get_stylesheet_directory(). I've echoed it out and it is pointing to the correct path. Below is my code that is placed in my functions.php child theme:

add_action( 'wp_enqueue_scripts', 'theme_js' );
function theme_js() {
wp_enqueue_script( 'theme_js', get_stylesheet_directory() . '/js/theme.js',    array('jquery'), '', true );
}

My javascript file looks like this:

/**
 * Custom Theme Styles
 */
( function( $ ) {

$('.main-navigation li a').click(function() {
    var link = $(this).attr('href');
    $('html, body').animate({
    scrollTop: $(link).offset().top
    }, 1500);
});
 })( jQuery );

Answer 1

You have to register the script first, then enqueue it. Here is the codex: http://codex.wordpress.org/Function_Reference/wp_register_script

Answer 2

The src string in the enqueue needs to be a URL, not a path, so you need to use get_stylesheet_directory_uri() instead of get_stylesheet_directory() :

add_action( 'wp_enqueue_scripts', 'theme_js' );
function theme_js() {
    wp_enqueue_script( 'theme_js', get_stylesheet_directory_uri() . '/js/theme.js',    array('jquery'), '', true );
}