Do you want to learn how to load JavaScript on WordPress?

All WordPress theme is usually composed of PHP, HTML, CSS and JavaScript files. JavaScript is a popular programming language among developers. WordPress theme. It is a language that makes an HTML page interactive and can also allow you to interact with the server.

Knowing how to use it on your website will be a huge advantage.

In order to actually use JavaScript, you need to know how to load it on your website.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

How to load JavaScript WordPress

Let's take a step back and take a first look at how WordPress loads scripts and styles. You learned that when creating the JavaScript files, you can add them to your page in the header section or at the footer.

Discover also our tutorial on How to compress your CSS, HTML and Javascript files

WordPress does exactly the same thing, but you can't just drop these script tags into the header file or footer of your WordPress theme. WordPress uses a smart loading mechanism called “ enqueueing ».

This mechanism is necessary to give meaning to dependencies. If you are writing jQuery code for your WordPress theme, then jQuery itself must be loaded first.

You write code that relies on a jQuery plugin. In this case, jQuery must be loaded first, then the jQuery plugin, then your code.

How to "Enqueueing" Scripts (Add to Queue)

You can queue scripts in your WordPress theme folder or your WordPress Plugin. Here is the complete code to include a script that relies on jQuery:

my_theme_scripts of function () {

 wp_enqueue_script ('my-script ", get_template_directory_uri ().' /js/my-script.js', array ('jquery'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

First of all, a function must be " hooked On WordPress (Using Hooks WordPress). The first argument of the function add_action () tells WordPress where these scripts should be placed:

  • On the public space
  • On the dashboard

If you use " wp_enqueue_scripts They will be loaded on the public space, if you use " admin_enqueue_scripts They will be loaded on the dashboard.

In the function « add_action ", you can use " wp_enqueue_script To add the scripts you need. The function takes a required parameter and four optional parameters:

  • The first parameter is the name of your script. You can choose what you want, but be sure to use a unique name.
  • The second parameter should contain the location of the file on your WordPress theme or WordPress Plugin.
  • The third parameter contains an array of dependencies. In the example above I said that jQuery is a dependency. All dependencies are loaded before the script in question.
  • The fourth parameter is a version number
  • The fifth and last parameter indicates whether you want to load the script on the header or the footer. Use "true" to load at the footer, or "false" to load the script on the header (you can also not fill this parameter).

Dependencies

WordPress offers a copy of jQuery, which is why you can add it as a dependency without any hassle. There are a large number of other jQuery scripts and plugins that WordPress offers. If your code depends on one of them, you don't have to use one of your copies, just add it as a dependency. here is a List of scripts that WordPress offers.

If you include multiple independent scripts, you can add them as dependencies in exactly the same way. Take a look at the example below:

my_theme_scripts of function () {

 wp_enqueue_script ("my-base script", get_template_directory_uri (). '/js/my-base-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ("my-script-extension", get_template_directory_uri (). '/js/my-script-extension.js', array ("my-script-base'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Since the first script depends on jQuery, then the next script depends on it as well. So you do not need to add jQuery as a dependency for both. This makes dependency management easier.

conditional Loading

Sometimes you'll want to use your script on every page, but often times you'll want to load a script on a specific page. This is especially true when considering adding scripts to the dashboard. A good example is the use of shortcodes. Shortcodes allow users to create advanced displays on the visual text editor using a few simple tricks.

my_theme_scripts of function () {

 wp_register_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ('my-script');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

We've saved the script so that WordPress learns about the script, but we use the " enqueue ". In this way, the script is only added to the page if the shortcode is used on this page.

Another method of loading scripts with conditions is to use conditional functions. If you want to load a script on all archive pages of the category, you can use the function is_category ().

For example, you could create a carousel of images that users can add to the article like this: [carousel ids = '42,124,123,331,90, XNUMX ′]. A carousel will be created on the article page using the images designated by their IDs.

To do this, you must create a file " carousel.js Which is based on jQuery. Here's a code to get there (It does not create a carousel, but lets you see how the loading process happens):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts of function () {

 wp_register_script ('my-carousel', get_template_directory_uri (). '/js/my-carousel.js', array ('jquery'), '1.0.0', true);

}

add_shortcode ('carousel', 'my_carousel');

my_carousel function ($ args) {

 $ atts = shortcode_atts (array (

 'Ids' => ",

 ), $ Atts, 'carousel');

 wp_enqueue_script ('my-carousel');

 // Code to display the carousel here

}

Removing and replacing scripts

This is by far a common scenario, but sometimes you may need to remove or replace a script. I fell into situations where a script added by a plugin (but not used by the theme) caused compatibility issues. “Withdrawal” was the best option, as the error completely disappeared.

You can also replace jQuery with a newer version if you are testing something to make sure it will be compatible with newer versions.

In these situations the functions wp_deregister_script () " and " wp_dequeue_script () " are useful. Here's how to edit code already added on WordPress.

my_theme_scripts of function () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', true);

 wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

final thoughts

This method of uploading to WordPress is great because it allows you to add your scripts in a modular fashion. This will allow you to ensure that dependencies are added in a modular fashion.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Premium SEO Pack

Premium SEO Pack is a WordPress Plugin which optimizes your SEO and compresses CSS to improve the loading speed of your website.

The plugin also allows you to manage the design of your website in a few clicks. Its functionalities are among others: CSS and JS compression, video and snippet sitemap integration, formatting of HTML and XML files, redirection of 404 and 301 pages, sharing on social networks, provision of 'ALT label, highly customizable layout

Download | Demo | Web hosting

2. Woocommerce Delivery Time Picker for Shipping

Woocommerce Delivery Time Picker for Shipping is a WooCommerce extension that allows customers to choose the delivery date and time on the checkout page. 

Customers will be able to select the delivery time of the package at home. The delivery time will be visible to the administrators of the website and it will also be sent by e-mail to the administrators of the website or the online store.

Download | Demo | Web hosting

3. Menu Hero

This plugin allows you to create your own custom WordPress menu in a few fairly easy steps. In particular, it allows you to easily and intuitively create an elegant and professional WordPress menu. 

From the most complex mega menu full of features, to the simplest menu with drop-down menu, the WordPress plugin HeroMenu sets up any type of menu and gets it up and running in minutes.

In terms of features it offers among others: perfect operation on PC, tablet and smartphone, from Custom CSS to add your own styles to the menu, a megamenu builder, several supported browsers: Chrome, Firefox, Safari, Opera, IE9 and more.

Download | Demo | Web hosting

Recommended Resources

Check out other recommended resources that will help you resolve other common WordPress errors. 

Conclusion

Here is ! That's it for this tutorial, I hope it helped you understand how to load JavaScript on WordPress. Do not hesitate to share it with your friends on your Social Media preferred. 

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

But in the meantime, tell us about your Comments and suggestions in the dedicated section.

...