Instead of adding your theme javascript manually in the header.php/footer.php, a better way is to enqueue the files, so that they are loaded via wp_head() or wp_footer().
Here is how – add the following to your theme’s functions.php:
/* Enqueue javascript
/* ------------------------------------ */
function alx_scripts()
{
wp_enqueue_script( 'flexslider', get_template_directory_uri() . '/js/jquery.flexslider.min.js', array( 'jquery' ),'', false );
wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ),'', true );
if ( is_singular() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); }
}
add_action( 'wp_enqueue_scripts', 'alx_scripts' );
In this example I am loading flexslider in the header, and a general theme scripts file in footer. So, if you set to true, it will load in the footer.
The comment-reply is a default WordPress javascript used for threaded comment replies. It will only load for is_singular() pages/posts and if threaded comments are enabled. In a similar fashion, you can set your other javascript files to only load for certain pages.
Both of the other examples have:
array( 'jquery' )
This means that if the file is loaded, it requires jQuery – so the default jQuery library will be loaded as well (included with WordPress by default).
Function reference: wp_enqueue_script
Fantastic guide. Many people don’t understand what enqueueing does, but this, although it’s a short overview, sums it up perfectly. Good to see the if statement so you’re not loading the JS when not needed!
Hi,
Thanks, really useful. For about 2 hours I tried to figure it out what’s wrong with my wp_enqueue_script function. Here is the snippet:
wp_enqueue_script(‘aside’, get_template_directory_uri() . ‘/js/aside.js’, array(‘jquery’), true); .
So, the above code failed to load js in footer (rather than in header). After glancing at the code snippet showed in this article, I noticed that I am missing that tiny / ” / part between dependency and boolean:))
Thanks a lot.