How to Properly Add a JavaScript File to WordPress Theme Using cPanel

How to Properly Add a JavaScript File to WordPress Theme Using cPanel

Either you develop a WordPress theme from scratch or modify an existing theme, you may require to know the proper way to add a JavaScript file.

If you’re thinking about using the old school method of Web 1.0 by linking the JavaScript to the head, then it’s a bad idea because nowadays, it’s an era of Web 2.0 in which people have dynamic websites.

You should understand the concept of WordPress Theme Codex and how to enqueue a JavaScript and a CSS file. We have already discussed adding a CSS file.

So, in this tutorial, you’re going to learn about adding a JavaScript file to a WordPress theme dynamically.

To match the latest coding standard, you should always follow WordPress Codex, which keeps updating time to time. You may be wondering as if you require coding skills or not.

Well, if you’ve searched for this article, I assume you already know the basics of WordPress theme development.

Learn the JavaScript Enqueuing Codex

While developing a WordPress theme, you may encounter with many similar functions. As you can see, to add a JavaScript file, you can use the same function as you did to add a CSS file.

Although there is a little bit of difference because JavaScript has many categories, still everything is effortless. Let me show you.

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Let me explain all the parameters.

  1. $handle:- It’s the name of the JavaScript file.
  2. $src:- The address of the file.
  3. $deps:- If you want to create an array, you can.
  4. $ver:- You can mention the JavaScript version.
  5. $in_footer:- By default, it’s value is “false” which means the JavaScript file gets added to the head.

Now have a look at this example.

wp_enqueue_script( 'new-script', get_template_directory_uri() . '/js/new-script.js/', array() );

The file name is “my-script” and it’s located in a “js” folder.

Note: If you wish to load it from the footer area to improve the website’s performance, you can set the $in_footer value to “true.”

The code transforms as follow.

wp_enqueue_script( 'new-script', get_template_directory_uri() . '/js/new-script.js/', array(), true );

The task isn’t over yet. To make it work, you need to create a function and use an action. If you have already added a CSS file, you can use the same function.

Let Me Show You the Full Code.

functionmy_new_scripts{
wp_enqueue_script( 'new-script', get_template_directory_uri() . '/js/new-script.js/', array(), true );
}
add_action( 'wp_enqueue_scripts', 'my_new_scripts' );

Now the question arises, where do you need to add such a code?

Well, as you already know, the functions.php file of your WordPress theme is responsible for all the functions a WordPress website has, add the code to the file and save.

If you’re modifying your existing theme, I hope you can easily access the functions.php file using cPanel. Nowadays, almost everyWordPress hosting company offers access to cPanel.

Just go to file manager>>wp-content>>themes>>theme name>>functions.php. Right-click to choose edit and you’re good to go.

How to Properly Add a JavaScript File to a WordPress Theme

Code editing can be a scary thing if you’re not familiar with WordPress functions and PHP.

For a WordPress theme developer, adding a new JavaScript file can make the website more dynamic than before, you may need it for the mobile version of the navigation menu.

Depending on your needs, you can use a JavaScript file.

I Hope it’s Hard to Add a JavaScript File to a WordPress Theme

In a while, people start to fret when they read about WordPress coding. But for a regular WordPress user, it’s not necessary to deal with codes.

WordPress is a user-friendly platform, which was developed for non-techie people. You can buy a WordPress theme from the market.

There are millions of themes on the web.

Conclusion

The tutorial is for advanced users or the people who want to learn about WordPress theme development. Boosting your coding skills is always a good idea.

I hope adding a JavaScript file isn’t as hard as people say.

Check out these top 3 WordPress hosting services:

A2 Hosting
$2.99 /mo
Starting price
Visit A2 Hosting
Rating based on expert review
  • User Friendly
    4.5
  • Support
    4.0
  • Features
    4.5
  • Reliability
    4.8
  • Pricing
    4.0
Hostinger
$2.99 /mo
Starting price
Visit Hostinger
Rating based on expert review
  • User Friendly
    4.7
  • Support
    4.7
  • Features
    4.8
  • Reliability
    4.8
  • Pricing
    4.7
HostArmada
$2.49 /mo
Starting price
Visit HostArmada
Rating based on expert review
  • User Friendly
    4.5
  • Support
    4.5
  • Features
    4.5
  • Reliability
    4.5
  • Pricing
    4.0

How to Properly Add a CSS File to a WordPress Theme Using cPanel

This how-to guide explains the proper way to enqueue a CSS file to a WordPress t
2 min read
Arvind Singh
Arvind Singh
Hosting Expert

How to Delete Extra Database Tables After Uninstalling a WordPress Plugin

Not all the plugins come with an option to delete all the settings
4 min read
Max Ostryzhko
Max Ostryzhko
Senior Web Developer, HostAdvice CTO

How to Edit the CSS for your WordPress Site Using the cPanel Hosting Control Panel

As you know, the design of a WordPress website is controlled by
4 min read
Avi Ilinsky
Avi Ilinsky
Hosting Expert

How To Edit Your WordPress Website's .htaccess file Using cPanel

There are many files and folders present in the WordPress direc
4 min read
Michael Levanduski
Michael Levanduski
Expert Hosting Writer & Tester
HostAdvice.com provides professional web hosting reviews fully independent of any other entity. Our reviews are unbiased, honest, and apply the same evaluation standards to all those reviewed. While monetary compensation is received from a few of the companies listed on this site, compensation of services and products have no influence on the direction or conclusions of our reviews. Nor does the compensation influence our rankings for certain host companies. This compensation covers account purchasing costs, testing costs and royalties paid to reviewers.
Click to go to the top of the page
Go To Top