How To Conditionally Enqueue Scripts In WordPress

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/NVraCcmIMLU/

There are situations that may arise where you want to load a JavaScript file only on a certain page or pages instead of loading it on every page of the website, primarily because you only want it to run on that page and don’t need it to load on pages where it is not running. Most WordPress themes enqueue (load) their necessary scripts on all pages already, but what if you want to conditionally enqueue scripts or a script instead? This quick tutorial will show you how to do that – to check if you are on a certain page or pages and, if so, load the corresponding script file.

UNLIMITED DOWNLOADS: 500,000+ WordPress & Design Assets

Sign up for Envato Elements and get unlimited downloads starting at only $16.50 per month!

DOWNLOAD NOW

WordPress has an abundance of conditional tags built in (see details here). Utilizing these to match the conditions you’re looking for, you can wrap the enqueuing of your script so that it only loads when the condition is met. For instance, if you only wanted the script to run on a page with the slug of ‘mypage’, you would use the conditional tag if(is_page(‘mypage’)) { load that script! } to conditionally enqueue your script only on that page.

Of course, there are a multitude of other conditional tags you can use, found at the link above. Some more common uses may be:

is_single()  – When a single post of any post type (except attachment and page post types) is being displayed, narrowed down by using the post ID, title, slug, or an array of a combination of any of the three.
is_front_page() – When the main blog page is being displayed and the ‘Settings > Reading ->Front page displays’ is set to “Your latest posts”, or when ‘Settings > Reading ->Front page displays’ is set to “A static page” and the “Front Page” value is the current Page being displayed. (Confusing? Click here for more explanation.)
is_home() – This one gets a bit more tricky, but when used correctly it will display your blog posts page. (See here.)
is_category() – When the archive page of a specific category or group of categories is being displayed, narrowed down by using the category ID, name, slug, or an array of a combination of any of the three, plus a few more conditions can be designated.

So let’s move on to how to use these tags to conditionally enqueue scripts in WordPress. Simply open your theme’s functions.php file and add the following code at the bottom.

add_action(‘wp_enqueue_scripts’, ‘firstwd_enqueue’);
function firstwd_enqueue() {
if (is_page(‘mypage’)) {
wp_enqueue_script(‘script-name’, get_template_directory_uri().’/path-to-script-name.js’, array( ‘jquery’ ), ”, true);
}
}

You will need to make sure to change ‘mypage’ to the slug of your page, ‘script-name’ to whatever you want to use as a unique name of the script, and ‘/path-to-name-of-script’ to match the url to the script within your theme’s directory (often something like ‘/assets/js/name-of-script.js’).

Again, refer to the WordPress Codex for all of the variations of tags that you can use to conditionally enqueue scripts in WordPress. be sure to check out our other WordPress tutorials for more quick snippets like this along with more in-depth articles as well.