WordPress Tutorials

Proper JavaScript Usage with WordPress

In case of WordPress, the most significant CMS (Content Management System) and blogging platform, JavaScript is quite necessary and is quite useful for various things like lightbox galleries, content sliders, UI elements, slick shopping carts, accordions, etc. However, one would need to know how to use the JavaScript along with the WordPress.

Simply echoing or returning some HTML scripts or elements is just a single means to do it but it is quite wrong. Let us check out from this article on how to enqueue the various JavaScript files in one single page and transfering the given data into the JavaScript code.

Basic Problems in Employing JavaScript in WordPress

jscodeBasically, there are two major kinds of issues that one may happen to come across when the JavaScript files are directly injected into the WordPress using the HTML code.

  • Duplicating the Codes on a single page:- Lets assume that you have developed a WordPress plugin and you want to add a jQuery into it. So, what you would do is echo the proper and correct script tag in the given head and it simply works.

Now what happens when another plugin wants to use the given jQuery often? How would this so called plugin know that jQuery has to be loaded into the <head>? Basically, it won’t and in case if the given jQuery would include the plugin in the right manner, it would still have two instances.

  • Translation problem:- Just imagine you want to develop lightbox gallery plugin; you would need to ensure that the string passes through ‘Previous’, ‘Image Y of X’ and ‘Next’.

Proper Means of Using JavaScript in WordPress

The answer to the first issue is just enqueueing and registering the jQuery files with basic two types of core functions of the WordPress like wp enqueue script() and register script(). In addition, the second answer is quite easy. All you have to do is understand that the core wp or the localization script() function would permit one to allow the translatable information into the JS code.

Registeration of JavaScript Files

Now before one can simply enqueue the files of JavaScript, you would need to have them register first. It can be done by using the so called function called wp register script(). The following are some of the notes of this given parameter –

  • URL(required, string):- Here it means the URL of the given script.
  • Name (required, string):- Here the name of the given script has to be defined. You have the freedom to select any name that you really want, provided it is not there or used by any other script.
  • Versions (optional, string):- This really means the version number for the script. You have the choice to select between the setting of the parameters to empty or null, providing strings, etc. In case if you just set the script to string, then the output code will be different. Now if you just leave the parameter as empty, then the given version of the WordPress installation would simply add as a version number. And in case if you just add or set it as null, then nothing will be added.
  • Proper JavaScript Usage with WordPressDependencies (optional, array):- Here the name or names of various other kind of scripts which depends on. For example, in case if your script simply rests on jQuery, it would be loaded on after the jQuery. In such case, you would be needing to select the array consist of the jquery for the parameter.
  • Load in Footer (optional, boolean):- As you enqueue the given registered script, then it would simply be filled with the <head> section. In case, if you do set the given parameter as positive, then it would be loaded simply before the <body> tag is closed. Also you have the option to deregister the given scripts which have been registered by various other plugins or core by using the wp degresigster function or script. Here, only the name parameter is accepted and it would easily provide one the script which has to be deregistered.

Basically, there are quite a lot of scripts present in the WordPress Codex which have been registered at the core. However, one has to double check them (the list) to see whether the current version of WordPress is present as most people still use the outdated one.

Enqueuing the script

Now the right means of enqueuing the script and the various kinds of style is simply by using the following hooks –

  • admin enqueue scripts:- This particular script enqueues at the backend of the website
  • wp enqueue scripts:- The given script would enqueues the front end of the website
  • login enqueue scripts:- Here this script would ensure that your scripts is present in the login screen

Frankly, what makes WordPress one of the best CMS (Content Management System) is because of the flexibilty it has.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.