How to Add JavaScript in WordPress

JavaScript is one of the most used programming languages and is often utilized on WordPress websites. Its primary purpose is adding client-side elements to pages and posts beyond what’s possible with CMS (Content Management System) or installed themes and plugins. And while it’s an invaluable tool when you’re experienced, a tiny error in code can break your website. Also, even though it’s lightweight, we recommend you keep the code concise and defer its parsing to boost the loading speed. With that acknowledged, let’s jump straight into how to add JavaScript in WordPress.

1. Add JavaScript to WordPress manually

This is the least resource-intensive method but also the riskiest if you’re unsure what to do. To help you understand our demonstrations below, here are 2 typical examples of a JavaScript code as it looks in HTML:

1. <script type="text/javascript">
some code goes here
</script>
2. <script type="text/javascript" src="file/path/to/script-name.js"></script>

As for where the code goes, that’s inside the functions.php file in your WordPress theme folder after you access your WordPress website via FTP. The position depends on the use case:

1. Place the code in the header or footer

To add JavaScript to a header in WordPress using the example above, use this code near the top:

function wpb_hook_javascript() {
    ?>
        <script>
          some code goes here
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

Note. Make sure to avoid having duplicates of the <script> and </script> tags if you copy-paste a code snippet that contains them. Furthermore, if you want the JavaScript to appear in the footer, replace wp_head with wp_footer and add _footer to the function so it looks like this: wpb_hook_javascript_footer.

2. Implement JavaScript on a page

To display JavaScript on a single page in WordPress, you can still use the header’s action hook but add conditional logic. Here’s an example:

function wpb_hook_javascript() {
  if (is_page ('15')) { 
    ?>
        <script type="text/javascript">
        some code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

Note. The number 15 is an example of a page ID we taught you to find already.

3. Place JavaScript on a post

The situation is pretty similar when it comes to placing JavaScript code inside one post only:

function wpb_hook_javascript() {
  if (is_single ('18')) { 
    ?>
        <script type="text/javascript">
        some code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

Note. Once again, 18 represents the ID, only this time of a post rather than a page. You can use method 1 (going to Posts > All Posts instead) or method 3 in the page ID guide to discover it.

2. Add JavaScript code via the WordPress plugin

The problem with the guide above is that changing the WordPress theme forces you to redo everything. Additionally, beginners frequently make the mistake of editing the functions.php in the theme folder directly, instead of creating and editing a child theme. In that case, the next theme update wipes the slate clean. Therefore, you should avoid editing files directly to ensure long-term functionality. With that said, follow these steps to add JavaScript in WordPress using a plugin:

1. Anywhere on the website

Here’s how you can make site-wide changes via JavaScript on your WordPress website:

DIY (Do It Yourself) method

We discussed the aforementioned problem when we taught you to create a site-specific plugin for WordPress in 5 steps. It’s the method that requires the least amount of website resources since it’ll only contain the JavaScript code. The downside is that you’ll have to write and check the code manually. If done improperly, you risk getting the syntax error or, even worse, the white screen of death.

Third-party plugin

There’s an abundance of third-party plugins that let you make site-wide changes to CSS and JavaScript. While they consume more resources, they often have a built-in syntax highlighting that points out errors. Some also let you do a “dry run” to test the code without consequences, while others create a temporary staging environment. Most importantly, they enable multi-site network functionality. Here’s how that works:

1. Install one of the WordPress plugins from the repository.
2. We’ll use the most popular one, Simple Custom CSS and JS for demonstration purposes.

3. In the left sidebar of the WordPress Admin Section, click on Custom CSS & JS.
4. Click on Add Custom JS below the option above or the Add JS Code button in the top left corner.
5. Give it a title, paste the code in the text field.
6. Select the position, visibility, and other configurations under “Options” in the right-hand menu.
7. Click on Publish.
8. If you don’t see the changes immediately, clear your WordPress site cache.

2. Header or footer

While this method works on the same principle, it doesn’t make sense to install a feature-packed plugin if all you do is add JavaScript to the header or footer. To save server resources and ever so slightly increase your website loading speed, we suggest using method 3 in our guide on editing a header and method 4 in the how-to edit footer article. The demonstrated plugin doesn’t have syntax check or dry run, but you can find one that does.

3. Inside posts and pages

The same thing applies here. If you only need to add JavaScript to one or a few pages or posts, it makes sense to do it directly. The least resource-heavy method is to embed the code at the desired position. Here’s a quick demonstration:

1. Install a plugin for this purpose. We’ll use Code Embed by David Artiss, which we aren’t affiliated with, but perfectly illustrates our point.

1. Open the page or post where you need to add JavaScript code.
2. Click on Screen Options in the top right corner.
3. Put a checkmark in front of Custom Fields.
4. Scroll down and click on Enter new in the “Custom Fields” meta box.
5. Enter the name for the code under “Name”. Keep it short but unique.
6. Enter the JavaScript code under “Value”.
7. Click on Add Custom Field.
8. Now simply type {{Name}} wherever you want the JavaScript code to appear.
9. Note. Replace Name with the actual name you chose in step 5.