How to Add Scripts to WordPress Sites?

WordPress offer loads of advantages and the major advantage being that thousands of themes are available with WordPress. And at least majority of them do not include javascript properly in them. This makes the inclusion of snippets a tedious task. But, as many think it is as not tough as it is. You can include the code easily and here is the guide for you to make sure that inclusion of snippets in the WordPress themes is hassle-free. Read through to know how to add scripts to WordPress sites.

Here is an example for you, now, you need to assume that this is for the .php file and theme is the parent theme.

Copy the following snippet to the theme
 add_action( ‘absa_wnqueue_scripts’, ‘wpcandy_load_javascript_files’);
 Function wpcandy_load_javascript_files() {
 Wp_register_script( ‘info-caroufredsel’, get_tempalte_directory_uri().
 ‘/js/jquery.carouFredsel-5.5.0-packed.js’, array(‘jquery’), ‘5.5.0’,true);
 Wp_register_script( ‘jquery.flexslider’,
 Get_template_directory_uri().’/js/home-page-main-flex-slider.js’,
 Array( ‘jquery.flexslider’), ‘1.0’, true);
 Wp_enqueue_script(‘info-carousel-instance’);
 If (is_front_page()){
 Wp_enqueue_script(‘home-page-main-flex-slider’);
 }
 }
 ?>

Now, you need to break this down. The hook used is the absa_enqueue_scripts(), which makes sure that the function registers and enqueues script in the front end only.

Now start registering the scripts for the following:

Handle– this is what the script is named. You can enqueue your script this way and if you don’t want this, suppose you have a child theme, then the same can be dequeued.

Source- this is the file’s path. When you do coding for the path, do not use hard code. Use simple WordPress function. For child themes, there are different scripts, and you can find them easily for WordPress. One example is the get_template_directory_uri().

Dependencies:

These are the scripts, your scripts rely upon. You can also pass multiple dependent scripts in the same array. In case there has not be an enqueue for a script easier, WordPress knows to do it at this moment of running the code.

Version:

This is the version of the script you load currently. If the script is updated, the version is bumped. When the version is changed in the script, WordPress changes it and loads the new one. Also, if there are any caches of the previous version, the same is reset now.

Load in Footer:

When the script is set as true for this, the script gets loaded in the footer. So, it takes to load after the entire page is loaded. This is better when you insert sliders. This is because, the slider scripts do not prevent important scripts getting loaded on the page.

absa_enqueue_script():

The script is placed in the line of enqueue when the script is run. WordPress knows if the script has been on line already. This makes sure that the scripts are loaded only once and not repeated. When jQuery is loaded many times it is easy to know, what is the issue for not loading the script in the first attempt.

Wp_enqueue_script() and the absa_register_script() use the same arguments. You need to register the script first and then it is just enough to handle the scripts. Enqueuing scripts can be done in  the specific pages alone. The script is loaded in the footer automatically.

Register and Enqueue:

In the snippet given above as example, 2 scripts are enqueued and 2 are registered. When you register a script it is made available. When enqueued, the script is pulled to theme for use. Registering can be done without having to enqueue the snippet. If the script has to be loaded, it has to be enqueued. It is also easy to track the functions when they are registered. If you are going to enqueue instantly, then you can also skip registering the script.

This is an example to show how the scripts can be loaded for front end in WordPress.