Ads Top

HOW TO ADD A JAVASCRIPT LIBRARY TO YOUR WORDPRESS SITE

December 17, 2018
Read

BY Web Development Services
These days you can find a WordPress theme for any type of website. However, it may still happen that you want to add additional front-end functionality to your site. The easiest way to do this is to find a third-party JavaScript library and add it to your theme. In this article, we will show you how you can improve your WordPress site with an external JavaScript library.

1. FIND THE JAVASCRIPT LIBRARY YOU NEED

The best place to find open source JavaScript libraries is GitHub. Suppose you want to add an image light box to your site that allows users to enlarge images. GitHub has a fairly advanced search functionality. Simply type the query "JavaScript lightbox" in the search box and find the one that best suits your needs.
In this article, we will use the JavaScript library of Intense Images as an example. But you can follow the same steps to add any other third-party JavaScript (or jQuery) library to your WordPress site.
Note that JavaScript libraries are sometimes called JavaScript add-ons. These are different from the WordPress plugins. JavaScript plug-ins (libraries) run on the front-end, while WordPress plugins run on the back-end.
You can install WordPress add-ons from the Add-ons menu within your WordPress admin area. However, the JavaScript (or jQuery) plugins must be uploaded to your server in the folder of your theme (usually / wp-content / themes / your-theme /).

2. CREATE A CHILD THEME

As Intense Images is a JavaScript library that will run on the front-end, you must add it to the folder of your theme. In this way, the external library will be linked to the subject. If you activate a new theme and still want to use the functionality, you must also add the library to the new theme.
However, it is not the best idea to add customizations directly to a WordPress theme, because when you update the theme, you lose your customizations. The solution is to create a secondary theme and add the external JavaScript library (instead of the main theme). We have a complete article on how to create a children's WordPress theme. Here, we will only mention the most important steps.
First, connect to your server and create a new folder within your themes folder (if you have not modified the path, it is / wp-content / themes) for the secondary theme. You can put the name you want, but it is good practice to indicate in some way your relationship with the main topic. In the example, we will create a folder called twenty-seven-child. It will be the theme song for Twenty Seventeen.
Within the new folder, create two files: style.css and functions.php. Open the style.css file in your code editor and add the following code:
/ *
Name of the subject: Twenty-seventeen children
URI of the topic: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress theme
Author URI: https://wordpress.org/
Description: Twenty Seventeen Child Theme
Template: twenty-seven
Version: 1.7
License: GNU General Public License v2 or later
URI License: http://www.gnu.org/licenses/gpl-2.0.html
Text domain: twenty-seven-child
* /
This CSS code links the secondary theme to the main theme. Note that the main theme (Twenty-seven in the example) must also be present within the themes folder, since this is where WordPress takes the default styles from the secondary theme
Then, add the following PHP code to the functions.php file:
<? php
/ * Add a 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 queues the secondary theme so that the WordPress backend can access it. Now, if you click on the Appearance> Themes menu in your WordPress administrator, you will see that the secondary theme has appeared among your topics:
Children's WordPress theme activated

3. DOWNLOAD THE JAVASCRIPT LIBRARY

Create a new folder within the secondary theme folder and call it hyphens. This is where the custom scripts that belong to the secondary theme will reside. Currently, this is what the file structure of our example topics folder looks like:
themes /
- twenty seven /
- twenty-seven-child /
- scripts /
- functions.php
- style.css
Now, download the third-party JavaScript library (Intensive images in our example) from GitHub in the scripts folder /. You can download the GitHub ZIP file or clone the repository with the following command
git clone https://github.com/tholman/intense-images.git
When the download is finished, the structure of your file should look like this:
themes /
- twenty seven /
- twenty-seven-child /
- scripts /
- intense images /
- functions.php
- style.css

4. CALL THE SCRIPTURE

Therefore, the external JavaScript library is already loaded on your server. However, when your site is loaded into the user's browser, you must also call the third-party script. You must add this code to a separate JavaScript file.
Inside the scripts folder, create a new text file and call it loader.js. You can use a different name with the .js extension too. Here is how your file structure should be modified:
themes /
- twenty seven /
- twenty-seven-child /
- scripts /
- intense images /
- loader.js
- functions.php
- style.css
Open the file loader.js in your code editor and add the following code:
window.onload = function () {
// Intensify all the images on the page.
var element = document.querySelectorAll ('img');
Intense (element);
}
This code loads the JavaScript plug-in of heavy images in the page load. But, how do you know what code to use to call the script? Well, the GitHub documents in the library (almost) always include the call script that you need to use.
For example, Intense Images offers users three options. In the previous code fragment, we used the first one that adds the library to all the images, but the other two options work just as well.

5. BEAT THE WRITINGS IN FUNCTIONS.PHP

In the previous steps, the JavaScript plugin (intense-images /) and the caller's script (loader.js) were added to the start of your secondary theme. However, you must also register and queue the scripts in the backend (in Step 2, we only record and paste the secondary theme but not the scripts).
You can do this by adding the following code to your functions.php file that you created in Step 2. Open it again in your code editor and add the following code to the end of the file:
/ * Add scripts * /
add_action ('wp_enqueue_scripts', 'add_scripts');
add_scripts () {function
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'));
}
This PHP code adds both the Strong Images library and loader.js to the secondary theme. It uses the wp_enqueue_script () function that is part of the WordPress API and registers and queues external scripts.
We do not have to add the entire Intense Images library, just the minified script file of intense.min.js. In the case of loader.js, we also need to add strong images (within a matrix) as an argument, since loader.js is a dependency of the Intense Images library. (Note that if you add a jQuery plugin, you also have to add jQuery as a dependency.)
Also pay attention to the correct file path that you add to the get_theme_file_uri () function. This feature is part of the WordPress API as well. Retrieve the URL of the folder of your theme (in the example, twenty-seven children). Here, we use it to dynamically add file paths that belong to external scripts.

6. TEST THE JAVASCRIPT LIBRARY

The third-party JavaScript library is already up and running. It's time to test if it works correctly. It depends on the library how you should try it. In our example, Intense Images is simply added to all the images on the site, since that is how we configure it in loader.js.
Then, to prove it, just reload the WordPress site, click on any image and check if it has intensified or not.
Test the JavaScript library before clicking


Tags :
Powered by Blogger.