Adding custom JavaScript files for global and specific pages - best practices

[konsulenten]

I have a few custom JavaScript-files that is to be added in the project. Some built by myself and some libraries that could be called from Bower.

I've added Instafeed.js to Bower-components and want to add that to some of the pages and post types in the site. To make it work, I added it in a custom footer.php.

I will also use probably use some libraries on all pages (maybe Isotope or similar).
Some of these depend on JQuery and I noticed that they have to be loaded after JointsWP JQuery in order to work.

What are the best practices to solve this?
We probably want these files minified with the rest through Gulp etc?

Best regards,
Reidar Nygård

[pablopaul]

Hi,

I would enqueue the new Library in the "enqueue-scripts.php" (i.e. you can define jQuery as dependency) and add your custom JavaScript in the "scripts.js" or add a new "*.js" file in the same folder. Gulp should grab it and output it to the "scripts.js".

About "page specific" JavaScript I cant really suggest a best practice, still you can find a possibility in The roots / sage theme

Best,
Paul

[JeremyEnglert]

@pablopaul nailed it. 👍

You can enqueue the files in assets/functions/enqueue-scripts.php. Or if you're using Gulp, you can add the scripts to the assets/js/site directory and they will be automatically compiled into the minified JS file.

If you want to load specific scripts only on certain pages, check this out: http://mekshq.com/include-javascriptonly-on-specific-wordpress-page-templates/

[konsulenten]

Thanks for the help @pablopaul and @JeremyEnglert

One small question regarding /functions/enqueue and adding scripts to the assets/js/site directory:
how do I control the order to be loaded.
For example, I need JQuery to be loaded before a couple of custom scripts I could put in the /js/site directory.

Best regards,
Reidar

[konsulenten]

Hi again

I can't seem to get .js-files added correctly when added to the /js/site directory.

For example:
I have a script for my custom menu that should load on all pages, after JQuery.

This is the code:
// Menu - JQuery
$(document).ready(function($) {
$(".menu-item-has-children").append("

+

");
$('.menu-item-has-children').append("

-

");
$('.open').addClass('visible');
$('.open-menu-link').click(function(e) {
var childMenu = e.currentTarget.parentNode.children[1];
if ($(childMenu).hasClass('visible')) {
$(childMenu).removeClass("visible");
$(e.currentTarget.parentNode.children[3]).removeClass("visible");
$(e.currentTarget.parentNode.children[2]).addClass("visible");
} else {
$(childMenu).addClass("visible");
$(e.currentTarget.parentNode.children[2]).removeClass("visible");
$(e.currentTarget.parentNode.children[3]).addClass("visible");
}
});
$('.menu-btn').click(function() {
$('.responsive-menu').toggleClass('expand')
});
});

I put this code in: menu.js. Then added it to the assets/js/site directory. But the function is not loaded on the pages.

How do I know that the gulp file is processing the files in the assets/js/site properly?
When checking the scripts.min.js file in browser it only contains: "jQuery(document).foundation();"
I'm using codekit.

Best regards,
Reidar

[JeremyEnglert]

@konsulenten, are you also running the Gulp commands to compile the JS? You can learn more about those here: http://jointswp.com/docs/gulp/

Also, if you don't want to use Gulp, you can add the files directly to your minified scripts. (This is how I did it when I used CodeKit).

[konsulenten]

Hi again @JeremyEnglert

I was confused by the gulp file.js in the project-folder.
Got scripts working using enqueue.php (see screenshot 1).

It seems my CodeKit config is processing js-files (see screenshots 2-4).
Could you be a little more specific as to what I should do to include all minified scripts properly?

• ("add the files directly to your minified scripts")

Also, I see there is a lot of Foundation scripts and js I will not use, what is the best way within the current setup to exclude Foundation components and css files?

• Is it to make a copy of foundation.scss in the assets-folder and comment out those partials not needed?

Thanks for you great help! I will send you a link to the site when I'm getting closer to launch :)

Best regards,
Reidar

[JeremyEnglert]

Hi @konsulenten, I think part of the confusion stems from using Gulp and CodeKit - they are very similar tools. You really only need to use one.

Compiling JS
By default, the version of the theme you are using enqueues the JS file from 'assets/js/min/scripts.min.js' - if you wanted to, you could add your custom JS directly to that file. Then you wouldn't have to worry about compiling at all.

Removing Unused JS/CSS from Foundation
Your method will definitely work (and is how many people do it). However, if you decide to use Gulp instead of CodeKit, it's even easier. Simply remove the JS files you aren't using from the gulpfile.js. (The gulpfile.js tells Gulp which JS files to grab from Bower).

PS - It does look like some changes have been made in JointsWP compared to the version you are using. However, nothing major.

[konsulenten]

Thanks a lot for the help @JeremyEnglert !

I've gotten quite into the structure of things now, so its great fun to work with this project.

I think I will download the latest JointsWP and replace the .js-files of the theme. I see you have dropped the app.min.js among others...

I have a few small questions about some other parts, just need some advice :) Will send email.

Best regards,
Reidar

[JeremyEnglert]

👍