Using javascript is extremely easy with Ignition. With Gulp and babel you can write the latest javascript and have your code added to WordPress without having to do anything.
Even cooler, Ignition comes with some events that help you make your site have cool animations and what not. Ignition makes javascript easy and fun.
Your javascript should all be placed inside the assets/js folder. Your code will probably go inside the custom folder where it is automatically added to custom.js which has already been enqueued for you so you wont need to even add your code to WordPress. All you need to do is compile with gulp and re-upload the custom js file.
JQuery
Ignition replaces the WordPress jQuery and swaps it with 3.0. This should work well with most plugins, but if you find an issue you can always downgrade it in functions.php.
The jQuery 3.0 migrate is included also, so there shouldn’t be any problems.
Custom JS
If you are adding javascript to the front end of the theme just place a new file in the “custom” folder. It will automatically get added to custom.js. However, you may need to restart gulp for that to happen as the new file might not be watched.
Localized Scripts
The custom js files also have access to some localized variables including found in the object frontEndAjax. This object currently has the following available:
- ajaxurl – holds the url to the admin-ajax.php for your site. This is needed to run ajax. See here.
- nonce – Adds security when running ajax. See here.
- url – the url to your site. Good to have available in javascript!
After Events Listener
Any javascript that needs to be output in a particular order, may need to be left out of the custom folder and manually added with wp_enqueue_script() in functions.php.
However most of your scripts can be loaded in the custom folder, and if it needs to load after something else you can use an event listener to wait for it to load.
If you need to load something after ignitions events load, you can use the ‘afterIgnEvents’ event.
document.addEventListener('afterIgnEvents', function () {
//your code
});This is useful if you need to do something after the events load, and jquery loads and anything else loads.