How to Enqueue Your Scripts Depending on Location

If you purchase through a link on our site, we may earn a commission. Learn more.

As you probably know the best way to load scripts in WordPress is to use the wp_enqueue_script() function. However the process for loading scripts is slightly different depending on where you're calling the script from.
Table of Contents

As you probably know the best way to load scripts in WordPress is to use the wp_enqueue_script function. However the process for loading scripts is slightly different depending on where you’re calling the script from.

There are basically three possibilities:

From Inside a Parent Theme

[php]
wp_enqueue_script( ‘my-awesome-script’, get_template_directory_uri() . ‘/js/my-awesome-script.js’, array(‘jquery’), ‘1.0’ );
[/php]

In this case we use the get_template_directory_uri function

From Inside a Child Theme

[php]
wp_enqueue_script( ‘my-awesome-script’, get_stylesheet_directory_uri() . ‘/js/my-awesome-script.js’, array(‘jquery’), ‘1.0’ );
[/php]

From child themes, on the other hand, we need to use the get_stylesheet_directory_uri function which retrieves the stylesheet directory URI for the current theme/child theme.

From Inside a Plugin

[php]
wp_enqueue_script( ‘my-awesome-script’, plugins_url( ‘/js/my-awesome-script.js’, __FILE__ ), array(‘jquery’), ‘1.0’ );
[/php]

The plugins_url template tag retrieves the url to the plugins directory or to a specific file within that directory. You can hardcode the plugin slug in $path or pass __FILE__ as a second argument to get the correct folder name.

Code from Will Anderson’s speech on WordCamp.tv.

If you enjoyed this post, make sure to subscribe to WP Mayor’s RSS feed.

Jean Galea

Jean Galea is an investor, entrepreneur, and blogger. He is the founder of WP Mayor, the plugins WP RSS Aggregator and Spotlight, as well as the Mastermind.fm podcast. His personal blog can be found at jeangalea.com.

Discover more from our archives ↓

Popular articles ↓

2 Responses

  1. Typo in snippet #3, missing single quote around ‘jquery’. Also, the fourth argument (the version) is expecting a string, but you’re giving it a float. It will work, but the 1.0 float converted to a string results in “1” and not “1.0” so you *might* eventually run into trouble:

    var_dump( version_compare( 1.0, ‘1.0’ ) ); // int(-1)

    I can’t think of an example right now, but I recommend to always use strings as version numbers. It has other advantages as well, such as “3.5-beta2” 🙂

    K

Share Your Thoughts

Your email address will not be published. Required fields are marked *

Claim Your Free Website Tip 👇

Leave your name, email and website URL below to receive one actionable improvement tip tailored for your website within the next 24 hours.

"They identified areas for improvement that we had not previously considered." - Elliot

By providing your information, you'll also be subscribing to our weekly newsletter packed with exclusive content and insights. You can unsubscribe at any time with just one click.