[Coding Snippets #2]: Wordpress Conditional CSS/JS Loading
A short one, but welcome to Coding Snippets #2!
A while ago, I wanted to add to a client's website some custom javascript, but it had to be loaded after jQuery was loaded. It was surprisingly easy to do it, and many people don't know about this.
Here's the code:
add_action('wp_enqueue_scripts', 'enqueue_custom_js');
function enqueue_custom_js() {
wp_enqueue_script('custom-jq-functionality', plugins_url( 'js/custom.js', __FILE__ ), array('jquery'), false);
}
Note: This code works correctly only on plugin files. If you want to use it in a theme, you will need to modify it a little bit.
Let's skip through the code:
add_action line is used to notify Wordpress we have a hook we want to execute at a certain point. The function name is enqueue_custom_js and we want it to execute during wp_enqueue_scripts (this is when all javascript is loaded).
Then we go to line 3.
wp_enqueue_script('custom-jq-functionality', plugins_url( 'js/custom.js', __FILE__ ), array('jquery'), false);
wp_enqueue_script accepts 5 parameters, only the 1st is required, all others are optional.
The first parameter is the script name, in this case custom-jq-functionality. It MUST be a unique name, and we can use this name to load other scripts after this.
The second parameter is the actual filename. We need the full URL of the file, so it can be loaded on the frontend. plugins_url function takes care of that, and accepts 2 parameters, both required. The first one is the actual filename (relative to the plugin directory name), and the second one is the plugin directory (__FILE__ takes care of the second one).
The third parameter are the dependencies of what we need loaded BEFORE loading this script. They should be passed as an array, even if it is a single one. In our case, I only needed jQuery, so array('jquery') is the correct one. You can see a complete list of the default WP scripts & JS included and registered by WP here, just remember that you have to use the handle and not the script name.
The fourth parameter (and the last one in our example) is the version of our JS. If you don't want to use a version, just use false, and it will use the current Wordpress version.
The fifth parameter is to define where you want the script to load, in head or before closing the html body. true is before closing the html body, and false is in head (and it's the default one)
So what about loading scripts on a specific page? (the "conditional" part of the post)
We can encapsulate the wp_enqueue_script line in an IF, checking the page loaded.
if( is_page( array( 'custom-jq-page', 'contact' ) ) ){
wp_enqueue_script('custom-jq-functionality', plugins_url( 'js/custom.js', __FILE__ ), array('jquery'), false);
}
The is_page function accepts one parameter, and it can be an integer (post id), a string (slug or post title), or an array of integers or an array of strings (you can't mix integers and strings).
According to our statement, if the page that is currently loaded is either the page with the slug/post title "custom-jq-page" or "contact", our custom JS will load. Otherwise, nothing will be loaded.
If you have any questions, feel free to write a comment and I'll try to help if I can. Hopefully, the next post will take less than three and a half months to arrive :D
WordPress is a registered trademark of The Wordpress Foundation. Wordpress and the code I talked about in the post are both released under the GPLv2 license. You can read the license terms [here](https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html)