How to Add Custom JavaScript to WordPress (3 Methods)

One of the best ways to improve your website’s front-end functionality is to add custom WordPress JavaScript. However, it can be difficult to figure out how to do this, especially if you’re used to working with the Customizer to inject custom CSS.

Luckily, you can use a few different strategies depending on your level of experience and what you’re trying to achieve. Once you know what your options are, you can choose the custom JavaScript solution that makes the most sense for you.

In this post, we’ll walk you through three methods you can use to add custom JavaScript to your WordPress site and discuss the pros and cons of each option. Here are the three methods we’ll cover – you can click to jump directly to a specific method:

1. Use Header & Footer Code Plugin (the easiest option for non-technical users)
2. Add code to the functions.php file
3. Add code to header (with the wp_enqueue_script function or the wp_head hook)

Let’s get in!

1. Install a plugin like Head & Footer Code

Using a plugin is one of the easiest ways to add custom WordPress JavaScript to your website. For example, head & footer code is a good tool:

This free plugin allows you to insert code in a variety of ways. You can use it for Facebook Pixel, Google Analytics, custom CSS and more.

To get started, add the plugin to your website by navigating to Plugins → Add New from your admin dashboard, then search for “Header & Footer Code”.

Once you click the Install now and activate Buttons find the plugin settings by going to Tools → Header and Footer Code. On this screen there are three fields for the header, footer and body areas:

You can enter your custom WordPress JavaScript in any of these fields. When you’re done, select it save Changes button at the bottom of the screen. The code is then loaded on every page of your website.

Pros and cons of using a plugin

The main benefit of using a plugin is that it is a beginner-friendly option. You don’t have to worry about editing your design’s files. The Header & Footer Code Plugin might also come in handy if you’re looking for a seamless way to add other types of code and custom CSS.

However, the disadvantage of this method is that it involves installing a third-party plugin, which some website owners try to avoid. If you want to keep your extensions to a minimum, you might be better off using one of the other methods. Additionally, the plugin is designed for site-wide JavaScript changes rather than specific pages or posts.

2. Use your functions.php file

Another method of adding custom WordPress JavaScript to your site is to use the built-in functions and hooks to manipulate the functions.php File. With this approach, the scripts are manually uploaded to your server.

Before you begin, we recommend creating a child topic. This step helps ensure that you can continue to safely update the parent theme. You should also backup your website in case something goes wrong.

This method involves the use of IS_PAGE Function. You can add conditional logic to apply your custom JavaScript to a single post or page.

To start, find and open your functions.php file, then copy and paste the following code snippet:

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

This code adds JavaScript to your header. To apply it to a single post you can use:

function ti_custom_javascript() {
  if (is_single ('3')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'ti_custom_javascript');

Note that you will need to replace those 3 in the example above with the zip code you want to add the code to. To find this number, navigate to the post in your admin dashboard, then click To edit. In the browser bar URL, the ID number is the number next to “post=”:

Once you’ve replaced the ID number, save your file and add your custom JavaScript to the marked area. You can also repeat this process for a single WordPress site.

Dos and don’ts of editing your functions.php file

One benefit of editing your functions.php file is that you don’t need to install another plugin. You can also use this technique to add features and functionality to both your theme and WordPress itself. For example, this method can inject JavaScript into a single post or page, or all pages.

The only disadvantage of this method is that you have to work with code and edit your website’s files. So it might not be the best option if you don’t have experience in this department.

There is a way to add custom WordPress JavaScript by using the <script> tag right into yours header.php File. However, this method is not recommended. It can disrupt WordPress loading order and cause conflicts with other themes and plugins.

If you want to add custom JavaScript to all your pages via the header of your website, there are two ways to do it. You can edit those functions.php file and use the wp_enqueue_script Function that creates a generic function. Alternatively, you can use the wp_head action hook.

Let’s look at both options…

Add JavaScript to your header using the wp_enqueue_script function

First, you should upload your custom JavaScript file to your template directory. You can do this using an FTP (File Transfer Protocol) client or a file manager.

Navigate to your website template folder (wp_content → Themes → [yourtheme]). Then select upload:

Note the exact file path of this file. For example, it should be something like “

Next, find and open yours functions.php file, then copy and paste the following code snippet:

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

Be sure to replace the template URL with your own. Finally, save your file.

Add custom JavaScript using the wp_head hook

You can also use the wp_head action hook to add custom JavaScript to your header via inline script. Again, this method is not preferable because it can create too many scripts. However, it’s better than pasting the scripts directly into yours header.php File.

This method, which you can also use for the footer, uses the action hooks to add inline scripts to your website. During wp_enqueue_script Function queues custom scripts that wp_head Approach prints the scripts in your header template (and footer if you’re using those wp_footer hook).

First, navigate to your functions.php file, then copy and paste the following:

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

Note that the wp_head Hook is only triggered on the front end of your website. This means that any custom JavaScript you add using this method will not show up in the admin or login panel. However, if you want to add JavaScript to these areas, you can use the admin_head and login_head action hook or

Pros and cons of adding JavaScript to your header

the wp_enqueue_script The feature is preferred by developers as it avoids conflicts that can arise with other options, such as: B. adding scripts directly to your header.php File. Also, no dependent scripts are created with this method.

The main problem with adding custom WordPress JavaScript to your website’s header is that it can cause problems with other plugins that load their own scripts. This setup can also cause multiple scripts to load more than once, which can affect the overall speed and performance of your site.

Get started with custom WordPress JavaScript

As we discussed in this post, there are three ways you can add custom WordPress JavaScript to your website:

1. Install a plugin like Head & Footer Code.
2. use yours functions.php file to add custom JavaScript to a single page or post.
3. Add JavaScript to your header using either the wp_enqueue_script function or wp_head Hook.

Now that you know how to add custom JavaScript to WordPress, you might be interested in our other guide on how to add custom CSS to WordPress.