Adding JavaScript to WordPress Tutorial (With or Without a Plugin)

As you build your site, you might have situations where you need to add JavaScript across your entire WordPress site or only to a certain piece of content.

This can be helpful for embedding third-party tools, adding tracking scripts like Google Analytics or Facebook Pixel, or even directly adding functionality to your site.

Thankfully, you have several options for adding JavaScript to WordPress, which are what we're going to cover in this article.

Below, we'll cover three broad approaches to using JavaScript on your WordPress site:

• Use a free plugin to add JavaScript code snippets and embeds.
• Manually add JavaScript code snippets and embeds.
• Enqueue JavaScript if you want to add it to your theme or plugin.

How to Add JavaScript to WordPress With a Plugin

For most users, the simplest way to add JavaScript to WordPress is via a WordPress plugin. These plugins make it easy to add and manage all your various JavaScript snippets.

What's more, many of them also make it easier to conditionally load your JavaScript on certain content or for certain users, rather than sitewide.

For example, maybe you only want to add a certain code snippet to your homepage but not your blog posts. Or, maybe you only want to execute a certain snippet for anonymous visitors, but not logged-in visitors.

Here are some examples of when these plugins work well:

• Adding tracking scripts: Google Analytics, Facebook Pixel, Pinterest Pixel, etc.
• Integrating with third-party tool: Live chat services, opt-in tools, etc. Many tools work by adding a bit of JavaScript to your site.
• Adding custom site functionality: You can use JavaScript to customize your site's functionality directly.

WPCode (Formerly Insert Header and Footers)

WPCode is a popular code snippet manager that used to be known as Insert Headers and Footers. True to its roots, it lets you easily add JavaScript to your site's header or footer. It also includes features to let you conditionally load your JavaScript so that it only appears on certain content or for certain users.

To get started, install and activate the free plugin from WordPress.org. Then, go to Code Snippets, then + Add Snippet to add your first JavaScript snippet.

The plugin includes some preset snippets that you can use. However, to add your own custom snippet, just select the option for Add Your Custom Code (New Snippet) by hovering over it and clicking Use Snippet.

On the next screen, give your snippet an internal name to help you remember it and select JavaScript Snippet as the Code Type. Then, you can add your JavaScript snippet into the code box.

Below, you can see what it looks like to add the Google Analytics tracking code.

Note: WPCode will automatically add the opening and closing <script> tags, so you don't need to include them in the code.

Below that, you'll find options to let you control where to insert this JavaScript. You can put it sitewide in the header, footer, or body. Or, you can use conditional rules to target specific content on your site. Alternatively, you can also manually place it using a shortcode.

If you want even more control over when to use this snippet, you can add more conditional logic using the Smart Conditional Logic feature. For example, this feature would let you only load the code for certain types of users.

For most situations, though, you only need to use the Insertion settings:

When you're happy with the settings, click the button in the top-right corner to Save Snippet. Then, change the toggle beside it to Active to make the snippet live on your site:

And that's it! If you want to add more JavaScript snippets, you can repeat the process for each snippet. Adding each snippet separately will make it easier to manage all your different snippets and also give you more control over where/when to load each snippet.

Header Footer Code Manager

Header Footer Code Manager is another popular free plugin for adding JavaScript to WordPress.

In general, it has a similar feature list to the WPCode plugin above. But, one small advantage is that its free version lets you target snippets to specific user devices (e.g. mobile vs desktop visitors).

However, the free version of the plugin lacks the other user-specific targeting rules of WPCode, so there are pros and cons. The Pro version of Header Footer Code Manager does add support for user targeting, among other features.

To get started, install and activate the free plugin from WordPress.org. Then, go to HFCM > Add New to add your first JavaScript snippet.

At the top of the interface, you can configure the settings for this snippet:

• Name: An internal name to help you remember what this snippet does.
• Snippet Type: Set this to JavaScript.
• Site Display: Choose where to add this snippet. You can add it sitewide or to specific types of content. Or, you can manually place it using a shortcode by choosing the Shortcode Only option.
• Exclude Pages / Posts: You can manually exclude individual pieces of content. For example, you could add the snippet sitewide except for your blog listing page.
• Location: Choose the location in your site's code to add the snippet. You can add it in the header or footer.
• Device Display: This gives you the option to only load the snippet for users with a certain type of device (e.g., users who are browsing on a mobile phone).
• Status: Set this to Active to enable the snippet on your site.

Below that, you can add your actual JavaScript snippet in the Snippet / Code box. When you're finished, make sure to click the Save button to save your snippet.

And that's it! If you want to add more JavaScript snippets, you can repeat the process to add each snippet as its own entry.

The plugin also has a tool to bulk import/export snippets, which is helpful if you have lots of JavaScript snippets that you want to use across multiple sites.

How to Add JavaScript to WordPress Manually With PHP and Hooks

If you don't want to use a WordPress plugin, you can also manually add JavaScript snippets to some or all of your website using the WordPress hook system.

Essentially, hooks let you inject any content, including JavaScript, at specific parts of your site. For adding JavaScript to WordPress, you'll most likely rely on these two hooks:

• wp_head: Adds content to the header of the page. In code terms, it adds code inside the <head> section.
• wp_footer: Adds content to the footer of the page.

In addition to the JavaScript that you want to add to your site, this will also require some general knowledge of PHP, especially if you want to target specific content.

However, we'll provide plenty of code examples to work from, so you should be able to follow this guide even if you don't have much PHP experience.

To add these code snippets to your site, you have three different options:

• functions.php file of your theme: If you add code to your theme's functions.php file, make sure to use a WordPress child theme so that your code snippets don't get overwritten when you update the main theme.
• Custom plugin: You can create a custom plugin to house your code snippets. It's a little more complex to set up but it eliminates the need to use a child theme.
• Code Snippets plugin: If you are ok with installing a new plugin, you can house these PHP/JavaScript snippets in a plugin like Code Snippets.

Add JavaScript to WordPress Header Using wp_head (Sitewide)

To add JavaScript to the <head> section of your entire WordPress site, use the following code snippet:

Here's an actual example of what this might look like if you're using this approach to add Google Analytics to WordPress using the older Universal Analytics method:

Add JavaScript to WordPress Footer Using wp_footer (Sitewide)

To add JavaScript to the footer of your entire WordPress site, you can use almost exactly the same code snippet from above. The only difference is that you'll want to use the wp_footer hook instead of the wp_head hook.

Add JavaScript to a Specific WordPress Post

Both of the above code snippets will add the JavaScript snippet across your entire site.

However, you might have situations where you only want to load the JavaScript on a specific post (or page - that's next).

To do this, you can add an IF statement to your code snippet that targets the ID of the post where you want to add the JavaScript.

Here's what that looks like to add the JavaScript to the header of the targeted post:

In this example, 122 is the ID of the post to which you want to add your JavaScript.

To find the ID of a post, open the content editor for that post and look at the URL. You should see post=[number] at the end of the URL. That number is the ID of the post.

Add JavaScript to a Specific WordPress Page

You can use the same approach to add JavaScript to a specific WordPress page.

However, you'll need to switch the conditional from is_single to is_page like so:

You can follow the same instructions from the previous section to find the ID of the page that you want to target.

How to Enqueue JavaScript Files in WordPress

This last method of adding JavaScript to WordPress is more for theme and plugin developers looking to include JavaScript files in their extensions.

That is, you would not use this approach to add the Google Analytics tracking script to your site, but you would use this approach if you're building your own WordPress theme and you want to include a JavaScript file to power some of your theme's functionality.

If you want to load whole JavaScript files, rather than just including a JavaScript snippet, the proper approach is to "enqueue" the script.

Enqueuing the script accomplishes two things:

• It registers the script with WordPress.
• It tells WordPress where/when to load that asset.

If you're interested in this approach, you can follow our complete guide on how to enqueue scripts in WordPress.

Start adding JavaScript to WordPress.

Adding JavaScript to your WordPress site can come in handy in a range of situations, from adding tracking scripts to integrating with third-party services, adding new functionality to your site, and more.

For most types of JavaScript snippets that you'll interact with, you have two main options for adding them to WordPress:

1. Use a JavaScript snippet management plugin like WPCode or Header Footer Code Manager.
2. Manually inject the code snippets using PHP and the WordPress hook system.

For non-technical users, the plugin approach is usually best. Not only does it make it easier to add JavaScript, but it also makes it easier to use conditional display rules and manage all your various snippets going forward.

Finally, if you're building a plugin or theme that requires a certain JavaScript file, you'll want to use wp_enqueue_script to enqueue that JavaScript, rather than one of the other two methods.

Get started today and unlock the flexibility that JavaScript offers for your site.