Open ‘functions.php’ file and create a new function called foundation_scripts. This function will look quite similar to the one that was created for CSS.
Foundation is depending on jQuery 2 however WordPress is using jQuery 1.11.3.
(For more information click here)
In order for Foundation to work, pulling jQuery 2.2.2 is needed through function.
Go to jQuery official website and find the latest version of jQuery –
Open it in new tab and copy the link –
Paste the link into the code –
Add ‘enqueue_script’ in order to run jQuery on front end of the site.
However, jQuery cannot run on back end of the site as the back end is not running on 2.2.2 version and it can cause damage to some files if it does run it on higher version of jQuery. Therefore conditional statement is needed to avoid that situation – This means that if we are not in admin area, call jQuery script. To finish it off, add
Now, once the front end is open, it will run the latest version of jQuery.
Checking if jQuery is working
Open source code of the page and find
Open the link and full code should appear. This means that the latest version of jQuery is working.
Linking all javascript links
Create separate folder for javascripts called ‘javascripts’ and copy all files in there. Open ‘functions.php’ and type wp_enqueue_script code with path required javascript. Go to ‘footer.php’ and delete the link from there as it is not needed there anymore. Refresh the page, view the source code and check if the link is there.
Do this for every javascript link in the footer.
Result –
All of them are working fine as the is outputting all of javascripts.
Adding Javascript links from header
To link javascript links from header is the same process as linking them from footer however, there is a small change.
Instead of adding ‘true’ like this –
Value will change to ‘false’ –
This means that links will be added into header instead of footer. Now that javascript links are pulling in dynamically, go to ‘header.php’ and remove javascript links as they are not needed anymore.
There is javascript in header that is not in a file –
To link this javascript with WordPress, creating a new JS file is needed and linking it like rest of javascript links.
New JS file ‘head_own.js’ has been created and JS code from the header has been copied into it.
Go to file ‘functions.php’ and link it the way that was explained earlier. Refresh the page and check result.
Error/Solution
After checking website for changes, recently linked javascript was not working. This was due to wrong order of links in ‘function.php’ file. This means that order of all links has to be exactly the same as it is in ‘header.php’ because they rely on each other and they have to be loaded in certain order.
After changing order of JS links, the full website was working perfectly fine.