Returning or echoing a bunch of HTML
- Duplicate code on the same page: Let’s say you created a WordPress plugin and you need to include jQuery. You
scripttag in the
<head>and it works! But what if another plugin wants to use jQuery as well – how would it know that jQuery is already loaded in the
<head>? It wouldn’t, and even if the other plugin includes jQuery the right way, the page would still have two instances of jQuery, because you’re not.
The solution to the first problem is simply “registering” and “enqueueing” the JS files with the two core functions of WordPress:
wp_enqueue_script(). The second problem’s solution is even easier: The core
wp_localize_script() function allows you to pass translatable data into your JS code.
Some notes on the parameters:
- Name (required, string): The name of the script. You can choose any name you want, providing that’s not used by another script.
- URL (required, string): The URL of the script. No need to explain this, right? 🙂
- Dependencies (optional, array): The name(s) of other scripts that our script depends on. For example, if your script depends on jQuery, it will need to be loaded after jQuery. In this case, you should use
array( 'jquery' )for this parameter.
- Version (optional, string): The version number for your script. You can choose between providing a string, setting the parameter to
nullor leaving it empty. If you set it to string, that’s going to be added to the output code like
my-script.js?ver=1.2. If you leave the parameter empty, the version of your WordPress installation will be added as the version number. If you set it to
null, nothing will be added.
- Load in Footer (optional, boolean): When you enqueue this registered script, it will be loaded in the
<head>section. But if you set this parameter to
true, it will be loaded right before the closing
You can also “deregister” scripts that are already registered by the core or other plugins with the
wp_deregister_script() function. It only accepts a
'name' parameter, which you provide the name of the script to be “deregistered”. Obviously.
There are a bunch of scripts on the WordPress Codex that are already registered in the core. Although, you should double-check the list for the current version of WordPress, since it refers to WordPress version 3.3 and might be out of date.
You can register a script but that doesn’t mean that it’s going to be loaded automatically. After registering your scripts, you should “enqueue” them with the
Some notes on the parameters:
- Name (required, string): The name of the script.
- URL (optional, string): The URL of the script. As you can see, this time the URL parameter is optional because if you already registered the script, you can just provide the name and you’re good to go. But if you didn’t register your script, you must provide a URL for this parameter.
- Dependencies (optional, array): The name(s) of other scripts that our script depends on.
- Version (optional, string): The version number for your script.
- Load in footer (optional, boolean): If set to
true, the script will be loaded right before
You can also “dequeue” scripts with the
wp_dequeue_script() function. Similar to the
wp_deregister_script() function, it only accepts a
You can check the “state” of a script with the
wp_script_is() function. For example, if you want to check if ‘
my-script‘ is enqueued, simply use
wp_script_is( 'my-script', 'queue' ) in an
Hooks to Enqueue Your Scripts
The right way to enqueue your scripts (and styles, too) is using the hooks below:
- wp_enqueue_scripts – This one enqueues scripts in the front end of your website.
- admin_enqueue_scripts – This one enqueues scripts in the back end of your website.
- login_enqueue_scripts – This one enqueues scripts in your login screen.
After registering, enqueueing and localizing the script, you can pass the localized variable in your script by using the name of the object and names of the data, like
alert( nameOfTheObject.prevItem );!
There is a reason why WordPress is the biggest content management system in the world: Its power comes from its flexibility. And I believe this tutorial proves (once again) how flexible it is.