Best Way to Add Custom Inline JavaScript in WordPress Site (Better Way)

If you are completely new to WordPress, adding inline JavaScript might not be the easiest task to figure out on your own. Sure, there are some popular methods that can help you to some extent. In this article, we are going to see best way to add custom inline JavaScript in WordPress website.

One of the first methods of adding WordPress inline scripts is the wp_print_scripts() function – This will help you add any inline JavaScript that you need. There’s also the wp_localize_script() alternative, which is another fairly popular WordPress function.

However, if you are looking to add inline <script> tag enclosed scripts, all the articles available on forums and chatrooms will not provide a comprehensive explanation. That’s why we decided to bring you the best method of adding JavaScript to WordPress – enter the wp_add_inline_script(), an amazing new function that will make your adventure online much easier and satisfying.

Best Way to Add Inline JavaScript in WordPress

So, what is this new WordPress function, and what makes it the best way to add inline scripts in your WordPress platform? Keep on reading the article, and you will find out everything you need to know about this fairly new solution to our problem!

Adding Inline Scripts with wp_add_inline_script()

Let’s start from the beginning! Not very long ago, WordPress introduced a new function dedicated to adding inline JavaScript. This new integration is available starting with the 4.5 version of WordPress, and is a far superior method of adding inline scripts compared to any other alternative previously mentioned. We’re talking about the wp_add_inline_script() function, and you can count that it will get the job done perfectly! Any experienced WordPress developer out there will also confirm this fact.

How Does it Work?

A great thing about this new method of adding WordPress inline scripts is the fact that it can be associated easily with just about any other registered script. At the same time, it can also include a lot more than only JavaScript variables.

At a first glance, this method of adding JavaScript to WordPress will look like the more popular, but also more rudimentary wp_localize_script(). We call it rudimentary, because wp_add_inline_script() allows you to do so much more!

If the script is already in your queue, then the code will be added straight away. The wp_add_inline_script() WordPress function will accept a $data string that contains the code. Now, if you will add two or more blocks of code to the same $handle script, both of them will be printed out in the exact same order they were added. This means that the code that was added last will be able to re-declare the one before it. For instance, unlike the other two alternative functions mentioned in this article, with wp_add_inline_script(), you can add any JavaScript snippet and also associate with any other registered script. What this means is that you will have complete control over the content of the script, as well as its relative location.

This is what makes this function the best way to add WordPress inline scripts, but the pros don’t stop here. Another thing worth noticing about the wp_add_inline_script() WordPress function is the $position parameter. This will allow you to include $script “before” or “after” the $handle and shapeSpace_script. A great tip that comes straight from the pros is to always escape the inline JavaScript by using json_encode(), or any equivalent function.

Inline Script with Fallback

We mentioned that the wp_add_inline_script() function is available starting with the 4.5 version of WordPress or higher. However, if you put everything together, you can easily come up with a fail-proof technique of adding WordPress inline scripts regardless of the version of WordPress you are using. The easiest way to do this, is through a sequence of 3 functions in the front-end post plugin.

The first thing you will have to do is to enqueue your JavaScript file. From here, you can easily call for the second function that will add the inline script via wp_add_inline_script(). This will work on WordPress 4.5 or any newer version. And here is where the magic happens! You can continue with the fallback function that will get the job done on any version of WordPress that is older than 4.5. And that’s pretty much, a wonderful 3 functions technique that will facilitate WordPress inline scripts on literally any version of the WordPress platform.

Alternatives Way to Add Inline JavaScript in WordPress

As previously mentioned, until wp_add_inline_script() was first introduced, the most popular alternatives for adding WordPress inline scripts were the wp_print_script() and wp_localize_script() functions. And while any WordPress developer out there has had its share of using both of them, there are major downsides to each. With the first one, there is absolutely no way of associating the code with a registered script, which basically means that you have no control over the output location. As for the second method, it will only allow you to add JavaScript variables, like var='value'. So, if you’re looking to add equations, functions, or conditionals, you won’t be able to do it with wp_localize_script().

Conclusion

To conclude, it’s the limitation of the alternative methods available at your disposal that make wp_add_inline_script() the best way of adding WordPress inline scripts. This is by far the most complete solution nowadays, and unlike popular belief, it can also run on any version of WordPress if you use the adequate technique. So, with this being said, we hope that you will find the current article comprehensible and useful, and we’re looking forward to hearing if it helped you add inline scripts to your WordPress platform!

We hope you have found this article helpful. Let us know your questions or feedback if any through the comment section in below. You can subscribe our newsletter and get notified when we publish new articles for free. Moreover, you can explore here other interested articles.