WordPress is consistently and seamlessly making bigger and surer strides to becoming the overwhelmingly choicest Content Management System of all. And it hardly surprises the folks who have paid close attention to the thick of things that characterize the very fibre of web technologies.
Now, WordPress has made it so popular and sought-afer owing to the array of highly extensible features that make it a platform that is robust, and at the same time, incredibly flexible. The very nature of your WordPress website can be altered using certain functions that may be small in implementation, but huge in effect.
Using Require.js (an extremely resourceful JavaScript library) is one such implementation that may not be an effortless exercise, but it isn’t a sweat-soaked one either.
Using Require.js
There isn’t a dearth of developers who go the distance to use Require.js for facilitating the custom loading of add-ons like plugins and extensions on their websites. This library gives them absolute control over when and how they wish some plugin to load, or not load. One issue that is often faced by webmasters is that their website is at times forced to load certain elements that come as unneccessary supplementaries along with those that are needed to be loaded. And this is where Require.js proves to be handy.
What this control does is that it enables webmasters to bolster the performance of their website without resorting to fussy techniques and tools. Also, if you, along with the website manager happen to be a developer as well who prefers writing codes for his website, Require.js can spare you the exercise and the possibility of leaving some exceptions and bugs in your programs (that apparently have long and short term discrepancies in store for you).
Using this Library with WordPress is a Little Tricky, Though
If your website is running on a platform that is overtly minimalized and basic, implementing Requires.js should almost be a breeze. However, when you are using a platform as dynamic as WordPress, the complexity levels leap a little. But so do the benefits and resourcefulness of the whole exercise. The directories in WP are structured in a manner that makes it a little difficult to carry out the process and there is an unsure vibe to the final result. That said, there is a simple enough alternative that serves to be just perfect.
But, before we begin with that, let’s take a look at why using Require.js is so recommended:
Require.js, as iterated before, is a JavaScript library. When you are using this library, you are making it possible for yourself to use the external JavaScript files conditionally in unison within the other JavaScript file. When using this technique you are calling a file in DOM, what it does is that it trims down the number of HTTP requests to be made, which has a positive impact on the overall load speed of the page. Also, it lends a sense of structure to the way your files and methods are being executed and also averts the possibility of conflict between the plugins and extensions of the system with the code implementations of your own.
And this is how we make use of it
Once you are done with downloading Require.js, the next step will involve you referencing it in the HTML file you have with you:
<script type=“text/javascript” src=“js/require.js”></script>
Now, you have to make it clear to Require where the external plugins can be found, and you will let it know through the custom file. For instance, in the directory named, js, you have created a subdirectory by the name of “library” which is where the jQuery plugins are saved. Now, in the custom file, which is let’s say named function.js, the Constructor function is configured like this:
require.config({
baseUrl : "js/library"
});
Now, your script has a clear eyed idea of where it can find the Require function.
Using the Script in WordPress
As mentioned before, WordPress is very versatile and unpredictable in nature, which is what makes the entire process a complex one since you aren’t sure at what part of the root directory the CMS is installed. And this elevates the need to refer the files with a greater degree of certainty. And this is where the wp_localize_script becomes a must. Now, you need to call a function in the functions.php file of your WordPress set up:
$my_js_dir = array(
‘path’ => get_stylesheet_directory_uri() . ‘/js'
);
wp_localize_script( ‘the-dependent’, ‘the_variable_reference’, $the_js_dir );
The code ensures that WP outputs the JavaScipt variable before the dependent file is added to the queue. And this is how the variable is printed:
var the_variable_reference = { path : “http://xyz.com/wp-content/themes/the-theme/js” };
We also need to alter the require.config method:
require.config({
baseUrl : my_variable_reference.path + “js/plugins"
});
And thus, the Require.js is directed to seek the plugins without any degree of doubt or unpredictability as it is given an absolute URL to do so.
Conclusion
Do you have an alternative for adding the JavaScript files to your websites built on WP? Do let us know through the comments section.
