Adding JavaScript Files to a Child Theme

Suppose you want to include a JS file in all your pages, using a WordPress Child Theme. How should you do it?

Following our post, we may include the script as follows:


<script type="text/javascript" src="JS_FILE_LOCATION_HERE">

But what is exactly "JS_FILE_LOCATION_HERE"? You should NOT use some absolute hard-coded url as http://mysite.com/wp-content/themes/mychildthemedirectory/file.js, of course. Instead, WordPress allows you to get important information on your blog using for example content_url or the more general get_bloginfo function. However, when using a Child Theme, you’ll probably be happy to hear about get_stylesheet_directory_uri. In the event a child theme is being used, this function will return the child’s theme directory URI.

All in all, if your JS file is in your Child Theme directory, the line in the script above should be:

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/file.js"></script>
(note the slash (/) after the directory URI and before the file name)