How to Use JavaScript in WordPress Development

JavaScript  to WordPress Development is similar to what an engine is to Car.

The above quotation is perfect as JavaScript  plays an important role in WordPress Development. Every developer in the WordPress environment should learn the script to make the applications more robust and scalable. Almost everybody knows that Java is very different from JavaScript  but the most important question is, are the WordPress developers so naïve?

javascript-and-wordpress

JavaScript and WordPress:

Prior to the launch of WordPress 4.4, JavaScript  was mainly used for creating themes in the earlier version. In fact, anybody would notice the presence of JS, WP-includes, and WP-admin folder. So, JS was always around but the advent of the applications such as Calypso and the REST APII has increased its role.

Chaos for the newbie:

Learning JavaScript is not the rocket science but starters can get confused between Jquery, AngularJS, and Node.js. The first is a JavaScript library while the second one pertains to JavaScript framework and the third components is a JavaScript runtime environment. In the midst of growing technicalities, simpletons may find extremely difficult to concentrate on one perspective.

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.

JavaScript WordPress Tutorial:

Injecting JS into WordPress can create problems in two situations:

Duplicate Codes:

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

Translation issue:

If you are making a light image plugin, the parameter such as next, previous and images of X and Y have to be passed in the form of strings. The trick is to use the JavaScript without echoing in the head tag.

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.

Registration:

<?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.

Enqueue the JavaScript  Files:

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:

wp_dequeue_script()

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.

Select the JavaScript framework:

People using JavaScript with WordPress already have detailed knowledge of the HTML and CSS. According to the experts, Angular JS is the best framework to learn the numerous facets of scripting. It imbibes MVC structure and quite easy to learn for the beginners. React is another framework that WordPress developers prefer to use.

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.

Conclusion:

JavaScript WordPress Theme always came naturally to the PHP experts but JS is a different kettle of fish. In order to become a master, you are required to make suitable choices right at the start of the learning process.

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.

Jenni R

I'm a Chief Branding Officer of IntenseBlog Website, a knowledge-hub to help you build a profitable blog. For the last 3 years I have dedicated myself to blogging and online marketing solutions. Connect with me on: Google+, Facebook and Twitter.

  1. Reply

    Thanks for sharing your valuable views with us. Your post helps to increase my knowledge.

  2. Reply

    Hi Jason Daszkewicz
    JavaScript is very important for WordPress development.What I think content is everything in the site.the process to register and enqueue the JS files is very informative for me.Thanks for sharing such a nice post. I am looking for another superb post from your side.

  3. Reply

    Hi Jason,

    Thanks for the knowledgeable post. I appreciate your suggestions and tips which you have mention in this post.
    Keep writing informative articles.

    Thanks

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Send a Message