Seperate Footer Javascript

I’ve been compiling my code with Grunt but I ran into a problem when I added a few JS plugins then added the settings for those plugins to the main.js file.

Everything complied fine but I needed some parts inside the main.js file to appear in the footer to work and other parts to appear in the header.

Is there anyway to split this up within the main.js folder or is there another way I should be doing this. For now, I’ve created a separate footer.js file that doesn’t compile with grunt and is enqueued in a custom.php functions file.

Thanks!

Why?

Typically, you shouldn’t be putting JS in the <head> (exceptions: Modernizr, Typekit, Respond.js, Turbolinks, etc.).

The Gruntfile can be updated to compile multiple JS files, see the docs for uglify: https://github.com/gruntjs/grunt-contrib-uglify

1 Like

@benword you’re correct. I tried the js settings in main.js again but had to change the order to get everything working. Just took some trouble shooting in Chrome.

Thanks.

@ben is correct of not adding JS on <head>. But if you need to add it anyways, you can create another .js file, update grunt uglify, then add the new .js file to the theme using wp_enqueue_script().