How to add javascript library in wordpress website

There is a WordPress theme available for just about any kind of website these days. However, there is a possibility that you’ll want to enhance your site’s front-end functionality. Finding a javascript library in wordpress website development from a third party and adding it to your theme is the simplest way to do this. Adding an external JavaScript library to your WordPress site is simple as we’ll show you in this article. 

6 javascript library in wordpress website

1. FIND THE JAVASCRIPT LIBRARY YOU NEED

In terms of open-source javascript library in wordpress website, GitHub is the best source to check out. Let’s say you want to add a zoomable image lightbox to your site. The search function on GitHub is quite sophisticated. Just type in “JavaScript lightbox” in the search bar to find the one that best suits your needs. 

As an illustration, we’ll look at the Intense Images JavaScript library in depth in this article. However, you can use the exact same procedures to integrate any other JavaScript (or jQuery) library into your WordPress blog or website. 

Javascript library in wordpress website are also referred to as JavaScript plugins for brevity’s sake. They’re not the same as WordPress plugins at all. JavaScript plugins (libraries) run on the front end, while WordPress plugins run on the back end. 

The Plugins menu in your WordPress admin area allows you to add new WordPress plugins. When using JavaScript (or jQuery), you must upload the plugin to your server and then place it in the theme’s proper place (typically /wp-content/themes). 

2. CREATE A CHILD THEME

Because Intense Images is a javascript library in wordpress website that will be used on the front-end, you must include it in your theme’s folder. As a result, the third-party library will be tied to the theme in some way. If you switch to a new theme and want to keep the functionality, you’ll have to add the library again. 

A WordPress theme update will wipe out any customizations you made, so don’t do it unless you’re willing to risk losing them. Creating a child theme and including the external javascript library in wordpress website in it solves the problem (instead of the parent theme). WordPress child themes are covered in-depth in a separate article on our site. We’ll only cover the most critical steps here. 

To begin, log in to your server and create a child theme folder inside your themes folder (/wp-content/themes if you haven’t modified the path). You can call it whatever you want, but it’s a good idea to make a reference to the parent theme in some way. We’ll name the folder twentyseventeen-child as an example. It’ll be a sibling theme to the Twenty Seventeen theme.

Create style.css and functions.php in the new folder. Code editor: open style.css file and paste in the following code:

/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress Theme
Author URI: https://wordpress.org/
Description: Twenty Seventeen Child Theme
Template: twentyseventeen
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen-child
*/

The child theme is linked to the parent theme using this CSS code. The Twenty Seventeen parent theme must also be present in the themes folder, as this is where WordPress gets the child theme’s default styles from. 

Add the following PHP code to the functions.php file:

<?php
/* Adds child theme */
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

This PHP code registers and enqueues the child theme so that it can be accessed from the WordPress backend. In your WordPress admin, go to Appearance > Themes and you’ll see that the child theme has been added to your list of themes. 

3. DOWNLOAD THE JAVASCRIPT LIBRARY

Create a scripts folder inside the child theme’s folder. In this folder, you’ll find all of the child theme’s scripts. The following is the file structure of our example themes folder right now:

themes/
    - twentyseventeen/
    - twentyseventeen-child/
         - scripts/
         - functions.php
         - style.css

Now, copy the third-party javascript library in wordpress website (in this case, Intense Images) to the scripts/ folder on your computer. Choose whether to download the ZIP file from GitHub or use the following command to clone the repository instead: 

git clone https://github.com/tholman/intense-images.git

When the download is complete, your file should look like this:

themes/
    - twentyseventeen/
    - twentyseventeen-child/
         - scripts/
                - intense-images/
         - functions.php
         - style.css

4. CALL THE SCRIPT

As a result, the third-party JavaScript library has been successfully uploaded to your server. However, the third-party script must be called when your site is loaded in the user’s browser. This javascript library in wordpress website development code should be added to a separate file. 

Create a new text file called loader.js in the scripts/ folder and save it there. 

With the.js extension, you have the option of using a different filename. Here’s how to alter your file structure:

themes/
    - twentyseventeen/
    - twentyseventeen-child/
         - scripts/
                - intense-images/
                - loader.js
         - functions.php
         - style.css

Open your code editor and add the following code to loader.js:

window.onload = function() {
    // Intensify all images on the page.
    var element = document.querySelectorAll( 'img' );
    Intense( element );
}

As soon as the page is loaded, this code activates the Intense Images JavaScript plugin. But how do you know which line of code to use to invoke the script? The good news is that the GitHub documentation for the library (almost) always includes the caller script you need to use. 

For instance, Intense Images gives customers a choice between three layouts. The code snippet above uses the first option, which adds the library to all images, but the other two options are equally effective. 

5. ENQUEUE THE SCRIPTS IN FUNCTIONS.PHP

Step 1: Add the JavaScript plugin to your child theme’s front-end. Step 2: Call the caller script from your child theme’s front-end. It is necessary to register and enqueue scripts on the backend, though (in Step 2, we only registered and enqueued the child theme but not the scripts). 

Step 2: Create a functions.php file and add the following code to it. Reopen the file in your code editor and add the following line at the end:

/* Adds scripts */
add_action( 'wp_enqueue_scripts', 'add_scripts' );
function add_scripts() {
    wp_enqueue_script('intense-images', get_theme_file_uri( '/scripts/intense-images/intense.min.js'));
    wp_enqueue_script('loader', get_theme_file_uri( '/scripts/loader.js'), array('intense-images'));
}

The following PHP code includes the Intense Images library and the loader.js file in the child theme. It uses the WordPress API function wp enqueue script() to register and enqueue external scripts. 

We only need to add the minified script file intense.min.js, not the entire Intense Images library. Due to loader.js’ dependency on the Intense Images library, we must pass intense-images (in an array) as a separate argument to it. (Note that if you use a jQuery plugin, you must also include jQuery in your project’s dependencies list.) 

Ensure that the get theme file uri() function has the correct file path passed to it as well. The WordPress API includes this function as well. It looks up the URL of the theme’s folder (in this case, twentyseventeen-child). Here, it’s used to dynamically add the locations of the external scripts’ files to the current working directory. 

6. TEST THE JAVASCRIPT LIBRARY

As a result, the javascript library in website from a third party is now available. Time to put it through its paces and see if it works as intended. The best way to test a library differs depending on the library itself. This is how loader.js sets up Intense Images in our example: it simply adds itself to all images on the site. 

Simply reloading the WordPress site and clicking on any image will reveal whether or not it has been intensified. As an illustration, here’s an image from our demo site: 

Clicking on the image makes it full-screen, and clicking again shrinks it back to its original size. 

This demonstrates that the third-party JavaScript plugin has been properly set up and added to the WordPress theme. 

CONCLUSION

With only a little coding, you can enhance your WordPress theme in a variety of ways. Even if you can find the right plugin, it’s probably not worth the time and effort. If you’re worried about breaking your live site, you can use a development site hosted on a local server to test your custom code first.