When you first learn HTML, the only way you know how to insert any kind of interactivity is using script tags in the header or footer of the page to set the type and source of an external JavaScript file. (Or if you’re really just learning, the entire JS function between script tags right there in the body itself. That’s fine for learning, but it’s pretty bad practice once you move into advanced WordPress development. Enter the enqueue function.
Once you move past simple, one-page websites, those beginner practices can create some really sticky situations. As you start adding more and more JavaScript, your website gets slower and slower. Updating it takes longer. Eventually, you’ve made a big pile of JavaScript-getti and no matter how hard you try, that pile of noodles ain’t coming untangled.
Thankfully, you can use the enqueue function in WordPress to add styles and scripts that the CMS take care of for you. All the messiness is handled for you. While it’s not as simple as directly pasting the script or styles you want in the header or footer of each page, it’s the right way to handle it. WordPress isn’t terribly opinionated, there is definitely a series of best practices you should know about
And wp_enqueue_scripts is at the forefront of those practices.
What’s the Big Deal?
The primary reason you will want to use wp_enqueue is to keep your site running smoothly and quickly. Page speed is important and using the same scripts and styles over and over and over again doesn’t help. At all.
Luckily, wp_enqueue is an example of functional programming. All that means is that you write a single piece of code to be executed (your JavaScript snippet), and you use wp_enqueue to call it instead of having to rewrite/paste the whole thing every time you need it.
That’s. Awesome.
Even more awesome, using the enqueue method makes WordPress itself insert the _script_ tags into the header and footer where they belong automagically, loading them without having to input them on each page separately.
WP Enqueue Syntax and Params
Enqueueing scripts really isn’t that difficult. If you are savvy enough to work with JavaScript in the first place, the PHP functions you use for enqueueing will be a cinch.
In a typical script tag, you will either import the external .js file directly or paste the entire, long snippet of code between the tags themselves. (This is also what you’re doing if you paste something into the Divi code module or the WP Custom HTML or Text widgets).
You just need to know a few basic parameters and syntax.
The Codex gives this as the base enqueue code:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
All in all, it’s pretty simple to break down into usable bits by parameters.
- wp_enqueue_script() is the function all that will put all the code in the page where it goes.
- $handle is a unique name for the script itself.
- $src represents the URL of the actual .js file you’re enqueueing.
- $deps are the $handles of any dependencies this one requires.
- $ver will be the version number. If none is specified, you get the WP installation version added automatically.
- $in_footer or $in_header tells WordPress where to put your script.
The full documentation to enqueue scripts can be seen in the Codex.
Attention, Students: WP Registration Begins Now!
In addition to _wp_enqueue__, WP has a handy-dandy method called _wp_register__, too. Both methods use the same parameters and syntax, so you really get a two-for-one deal with the pair of them. Essentially, registering a script is the same as naming a function in JavaScript.
While not necessary, registering your scripts can make your life a lot easier because you won’t have to declare them as dependencies later on down the line. They’ll already be registered. Hence…_wp_register__. Once a script is registered, you can call it back by its $handle, as you will see in the example below.
You will register your code like this:
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);
Then, whenever you need it again, you can always call it back like this:
wp_enqueue_script( 'jquery' );
Additionally, registration means that you don’t have to load a script even when it’s not needed. WPMU has an awesome example of shortcode creation: if you register the script to a shortcode that uses _wp_enqueue__, it will only get used when the shortcode is. However if you only call it by enqueueing it, it will be loaded even when the shortcode isn’t used.
You can read all about the method in the Codex.
Additionally, plugin authors are required to enqueue scripts if they want included in the WordPress.org repo, so if that’s on your plate…better get to queuein’.
Putting It Together
Implementing the code is easy. Just drop a snippet like the one below into your functions.php. and WordPress handles the rest. I mean, this is a really basic snippet to call jQuery, but you can see how the stuff plays together.
You would normally use something that looks like this:
<script type="text/javascript" src="jquery.js"></script>
Once you learn how use enqueue_scripts_, you will see something more like this:
add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts(){
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, true);
wp_enqueue_script( 'jquery' );
}
Now, notice in the code above how it uses the add_scripts()_ function that’s a part of WordPress already to outline the order of the next few steps. First, the wp_register_ function gets all the details specified and puts the script in the page footer, and then uses wp_enqueue to finally call it once everything is set up.
Wrapping Up
That’s really all there is to it. Well, that’s not true–enqueue is a pretty ingrained part of WP. But those are the basics that get you poking around at doing more with WordPress than you may have before.
The basics we all learned of putting in scripts when we started web development still work, but they aren’t always the best way to do things. Part of the beauty of WordPress being built on PHP is that you can bring this kind of logic into your work while still really keeping the same basic structure and workflow as you would have had anyway.
Article thumbnail image by hanss / shutterstock.com
The post What is WP Enqueue and How Do You Use It? appeared first on Elegant Themes Blog.
