Table of Contents
Chaos for the newbie:
Start with the basics:
In order to become an expert, you should learn the fundamentals of the script. It is to be noted that WordPress developers have an inbuilt knowledge about PHP but it is different from JS. The former is a functional language in many aspects while the latter is based on the Object-Oriented principles.
Injecting JS into WordPress can create problems in two situations:
Generally, WordPress plugin uses Jquery that is included in the <head> tag under <script>. The problem arises when another plugin wants to use the same Jquery code but doesn’t know whether the statements are already in the head tag. In worse case, it may lead to duplicity
Do it right first time:
In order to rectify the first problem, use two functions namely wp_enqueue_script () and wp_register_script ().
Here is the process to register and enqueue the JS files.
<?php wp_register_script ($name, $url, $dependencies, $version, $load_in_footer) ;?>
$ name is the name of the script and can be user defined
URL (required string):
It is the path where the script is located
Dependencies (optional, array):
Dependencies include the name of the scripts that depend on or invoked by Jquery. Array ( ‘jquery’ ) is the desired syntax that is to be used in the code.
Version (optional, string):
Version name of the script should be included in the code. In case the parameter is empty, the current version of the WordPress would be added. In case null is mentioned nothing would be added.
Load in Footer (optional, boolean):
Once the script is enqueued, it is loaded into the <head> section. If the parameter is set to true, the script is placed over the <body> tag.
In order to enqueue the script, use the following syntax.
<?php wp_enqueue_script( $name, $url, $dependencies, $version, $load_in_footer ); ?>
All the parameters denote the same meaning as the ones used in the registration syntax.
In order to remove the script from the queue, deploy the following code:
It carries the name parameter identifying the script that has to be dequeued.
Usage of the Hooks:
One of the best ways to enqueue the script is to use the hooks.
wp_enqueue_scripts: It is placed at the front of the website
admin_enqueue_scripts: It positions the script at the back of the site
login_enqueue_scripts: As the name suggests, it creates the login screen.
Localized data with java script:
Not many people know that data in WordPress can be localized with the wp_localize_script() function.
<?php $l10n_data = array( 'nextItem' => __( 'Next', 'my-script' ), 'prevItem' => __( 'Previous', 'my-script' ), 'imageTitle' => __( 'Image %d of %d', 'my-script' ) ); wp_localize_script( 'name-of-the-script', // (required) the name of the script, 'my-script' for example 'nameOfTheObject', // (required) the name of the script, 'my-script' for example $l10n_data // (required) the data to be passed, which can be translatable with the __() function ); ?>
Once the localization task is completed, you can pass the name of the object and the data into the script.
Although Angular framework scores overreact in terms of MVC architecture but the latter comprises of APIs that can be learned easily. In order to gain expertise in Angular mode, you may have to learn the DOM concepts right from the scratch. At the end of the day, the final selection boils down to individual preferences and comfort level.
Scripting syntax is simple but using it in the framework requires practice by trial and error method. Mastering the basic concepts is the key but make sure that you have a complete knowledge about the API as well as their usage. Proper registration of the script is essential to ensure that it has the desired effect on the application. Only a robust script can make full use of the capabilities of the WordPress environment.
So, it’s better late than never, isn’t it? Start now and enhance your knowledge and skill set.