What is WP Enqueue and How Do You Use It?

When a person first learn HTML, the only way you understand how to insert any kind of interactivity is using script tags within the header or footer of the page to create the type and source of an external JavaScript file. (Or if you’re really simply learning, the entire JS function between script tags right there in the body by itself. That’ s fine for learning, yet it’ s pretty bad practice as soon as you transfer to advanced WordPress development. Get into 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 requires 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 particular enqueue perform in WordPress to add styles plus 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 in order to handle it. WordPress isn’t terribly opinionated, there is certainly definitely a series of best practices you should know about

And wp_enqueue_scripts is at the forefront of those practices.

What’s the particular Big Deal?

The primary reason you will want to make use of wp_enqueue is definitely to maintain your site running smoothly plus quickly. Page speed is important and using the same scripts and fashions more than and over and over again doesn’t help. At all.

Luckily, wp_enqueue is definitely an example of functional programming. Almost all that means is that you write a single piece of code to become executed (your JavaScript snippet), and you use wp_enqueue to call it instead of needing 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_ labels into the header and footer where they belong automagically, loading them with out having to input them on every page separately.

WP Enqueue Syntax and Params

Enqueueing scripts really isn’t that tough. If you are savvy enough in order to work with JavaScript in the very first place, the PHP functions you make use of for enqueueing will be a easy.

In a common script tag, you will either import the external. js file directly or paste the entire, long snippet of code in between the tags themselves. (This can also be exactly what you’ re doing if you paste something into the Divi code component or the WP Custom HTML or Text widgets).

You just require to know a few basic parameters and syntax.

The particular Codex gives this as the base enqueue code:

   wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );   

All in all of, it’s pretty simple to break down into usable bits by parameters.

  • wp_enqueue_script() is the function all that will place all the code in the page where it goes.
  • $handle is a unique name for the script by itself.
  • $src represents the URL of the actual. js file you’re enqueueing.
  • $deps are the $handle s of any dependencies this one requires.
  • $ver will be the version number. If not one is specified, you get the WP installation version added automatically.
  • $in_footer or even $in_header informs WordPress where to put your screenplay.

The full documents to enqueue scripts can be seen in the Codex.

Attention, Students: WP Registration Begins At this point!

In addition to _wp_enqueue__, WP has a handy-dandy method called _wp_register__, too. Both methods use the particular same parameters and syntax, so a person really get a two-for-one deal along with the pair of them. Essentially, signing up a script is the same because naming a function in JavaScript.

While not necessary, registering your own scripts can make your life a lot easier because you won’t have to announce them as dependencies later on lower the line. They’ll already be registered. Hence… _wp_register__. Once a script can be registered, you can call it back by its $handle , as you will discover in the instance below.

You will register your code like this:

   wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);   

After that, whenever you need it again, a person can always call it back like this:

   wp_enqueue_script( 'jquery' );   

Additionally, sign up means that you don’t have to load a script even when it’s not needed. WPMU posseses an awesome instance of shortcode creation: if you sign up the script to a shortcode that uses _wp_enqueue__, it will only obtain used when the shortcode is. However when you only call it by enqueueing it, it will be loaded even if the shortcode isn’t used.

You can read all about the particular method in the Codex.

Additionally, plugin authors are needed to enqueue scripts if they need within the WordPress. org repo, so in the event that that’s on your plate… better get to queuein’.

Putting It Together

Implementing the code is usually easy. Just drop a snippet like the one below into your functions. php . and WordPress handles the rest. I mean, this particular 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>  

As soon as you learn how use enqueue_scripts_ , you will see some thing more like this:

   add_action('wp_enqueue_scripts', 'add_scripts'); function add_scripts()  wp_register_script( 'jquery', 'http://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 currently to outline the order from the next few steps. First, the wp_register_ function gets every the details specified and puts the script in the page footer, plus then uses wp_enqueue to finally call it as soon as everything is set up.

Wrapping Up

That’ s i9000 really all there is to this. Well, that’ s not true– enqueue is a pretty ingrained part of WP. But those are the fundamentals that get you poking around with doing more with WordPress than you may have before.

The basics we all learned of placing in scripts when we started internet development still work, but they aren’ t always the best way to do things. Part of the attractiveness of WordPress being built on PHP is that you can bring this sort of logic into your work while nevertheless really keeping the same basic framework and workflow as you would possess had anyway.

Article thumbnail image by hanss / shutterstock. com

The blog post What is WP Enqueue and How Perform You Use It? appeared first upon Elegant Themes Blog.