How to add JavaScript to WordPress?

Are you looking forward to improving the front-end functionality of a website? Then you can add custom JavaScript to it. To help you with that, we also wrote this article on how to add JavaScript to WordPress.
We will be sharing different techniques you can follow to add JavaScript, and you have the freedom to pick any of them and use them.

Use Plugins

One of the most convenient ways How to add JavaScript in WordPress would be to use plugins. If you are looking for such a plugin, you may use the Head & Footer Code. You can insert code into the website in numerous ways through this plugin.
To enable the Header & Footer Code plugin, go to the WordPress dashboard, Plugins, and Add New. Then you may search for the plugin and install it.
After you install the plugin, you need to search for custom JavaScript codes and insert them into your website through this plugin. This is one of the most effective and simplest ways How to add custom JS in WordPress.
If you are a beginner to WordPress, we encourage you to look at this method to include files in WordPress. That’s because you need to go through a few simple steps, and there is no need to edit the themes of the WordPress website. However, you will still need to go ahead and install a third-party plugin on your website.

Edit functions.php file

Another option for people looking for how to add JavaScript to WordPress page would be to edit the functions.php file. This file is responsible for leveraging all the built-in functions of the WordPress site. You can manually upload JavaScript code into the server by changing this file.
Before you proceed with this method of how to add script in WordPress page, you will need to create a child theme. Then you will be able to use it as a backup.
Here’s the code snippet that you can use to add custom JavaScript code to the functions.php file. You can add conditional logic so that you will be able to get the JavaScript code to apply for just one page or post.
This can be done using the IS_PAGE function.

function ti_custom_javascript() {
?>
<script>
// your javascript code goes here
</script>
<?php
}
add_action('wp_head', 'ti_custom_javascript');

One of the benefits of using this method on how to add script in WordPress page is that there is no need to install separate plugins.
On the other hand, you may use this feature and add both functionality and features to the WordPress website. On the other hand, you may add JavaScript code to just one page, one post, or all pages via this method.
If you are still trying to access the code, this method of adding JavaScript to WordPress is not recommended. You might make mistakes, eventually forcing your website to be non-functional.

how to add javascript in wordpress

How to add JavaScript to header

While wondering how to add custom JavaScript in WordPress, you may also look at the option where you add the code to the header. This is where you can use the HTML tag named <script>/.
This is quite a standard method. We also suggest this as the most recommended method on how to include JS file in WordPress.

There are two main options for adding custom JavaScript to all the website pages with the site header. You can edit the functions.php file and then use the wp_enqueue_script function to create a generic function. Or else, think about using the wp_head action hook.
If you are following the first method, you will need to upload the custom JavaScript file you have into the directory of the template. This can be done with the help of an FTP client.
Explore the template folder with File Explorer, then select the upload button to upload the JavaScript File. The path would be similar to something like https://yourwebsite.com/wp-content/theme/sampletheme/js/myjsfile.js/.

As the next step, you must open up the functions.php file. There you need to copy and paste the following code:

function ti_custom_javascript() {
wp_enqueue_script( 'example-script', get_template_directory_uri() . '/js/examplescript.js');
}
add_action('wp_enqueue_scripts', 'ti_custom_javascript');

But if you add a custom JavaScript through the wp_head hook, you should follow a different approach. You can add the custom JavaScript code via the header through an inline script. However, this method is not recommended as it will force you to create too many scripts. Adding scripts without using the header.php file is still a better option.

To begin with, you will need to open up the functions.php file on the WordPress website. Then you should copy and paste the following code:

function ti_custom_javascript() {
?>
<script>
// your javascript code goes here
</script>
<?php
}
add_action('wp_head', 'ti_custom_javascript');

You need to understand that the wp_head hook will only be called on the front end of the website. As a result, the custom JavaScript code you add will not be visible in the login areas or admin panel. If you want to add the custom JavaScript code to those areas, you should be editing the login_head and admin_head hooks.
Most developers prefer to work with the wp_enqueue_script file, as it will help them to stay away from conflicts that take place with other available options.
For example, it will avoid conflicts when adding a script to the header.php file. On the other hand, this method would not create dependent scripts. However, it may cause problems with the other plugins you have installed.

how to add custom js in wordpress

Related: what does url stand for

Conclusion
Now you know how to add script in WordPress page. Pick the most appropriate method and add your custom script to the WordPress website. Then you can enhance the visual appeal as well as the functionality of your website with ease.