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

Hosting Expert 3 min read

May 26, 2022 5:08 AM

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.

$handle:- It’s the name of the JavaScript file.
$src:- The address of the file.
$deps:- If you want to create an array, you can.
$ver:- You can mention the JavaScript version.
$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.