How to Add Custom JavaScript to a WordPress Site
JavaScript takes a huge role in WordPress as most of its functions are powered by JavaScript code. As a WordPress user, it’s crucial that you know how to work with JavaScript.
Even if you’re a beginner and just setting up a simple WordPress website, you should make yourself familiar with JavaScript. Mainly because some of the website tools you use, like Google Analytics and AdSense, uses JavaScript code that you need to embed in your website.
No need to worry. You don’t have to learn the entire programming language to use JavaScript in WordPress. In this guide, we’ll give you a quick introduction to what JavaScript is, what it does, and how to use JavaScript in WordPress.
Let’s dive in.
One Subscription: Everything You Need to Build a Website
Get everything you need to build your next website with one simple subscription. From $16 per month, get unlimited access to nearly 2 million WordPress themes, web templates, fonts, graphics, and photos.
What Is JavaScript?
JavaScript is a popular programming language commonly used in website design. Just like HTML and CSS, JavaScript is used to add functional elements to websites like validating the information you submit through a form and it’s even used to powerup the drop-down menus on websites.
Basically, if you see an animated or interactive element on a website, chances are it’s powered by JavaScript.
JavaScript gets a bad rep for making websites load slower. That is partly true. If you stuff your website with too many JS elements and scripts, it will slow down. But, if you know your limits it won’t make a big impact on website load times.
Why Add Custom JavaScript in WordPress?
Whether you like it or not, you’ll have to add custom JavaScript code to your WordPress website. Especially if you plan on adding analytics to your website, monetizing with ads, or even adding animations.
For example, when using Google Analytics to track your website traffic, you will have to add a JavaScript tracking code to your website in order to collect the data.
Even Google AdSense ads use JavaScript to show ads on your website. And there are many other instances where you’ll have to add custom JavaSript code in WordPress.
Best WordPress Plugins for Adding JavaScript
Thankfully, adding JavaScript code in WordPress is quite easy. You can get it done with the help of a free plugin. These are some of the top plugins you can use for that job.
1. Insert Headers and Footers
- Price: Free
This is one of the easiest and simplest plugins you can use to add custom JavaScript to your WordPress website. It’s free, lightweight, and has a simple UI where you can add scripts without any complications.
As the name suggests, the plugin will help you add scripts to the header and footer of your website. It’s most suitable for adding simpler JavaScript code like Google Analytics tracking code, AdSense code, and Facebook Pixel.
2. Simple Custom CSS and JS
- Price: Free
This is a slightly more advanced plugin for adding complex JavaScript code to your website. The plugin includes a code editor where you can write your own JavaScript and easily add them to your website.
It also has a feature that allows you to save your JavaScript code externally in a separate file, which is a good standard to follow when adding custom JS code.
3. TC Custom JavaScript
- Price: Free
TC Custom JavaScript is another simple plugin you can use to easily add JS code to your website. It also comes with a code editor where you write and manage your scripts. However, unlike the Simple Custom CSS plugin, this one doesn’t offer any options to save the files externally.
4. CSS & JavaScript Toolbox
- Price: Free
This plugin is made with advanced users and developers in mind. It has a complicated editor with lots of options for adding not only JavaScript code but also CSS, HTML, and even PHP. The plugin also has a premium version with additional options.
5. Custom Codes
- Price: Free
Custom Codes plugin is another option you can use to add custom JavaScript code, like Analytics tracking code, to your website. It also supports CSS, PHP, HTML, and SASS as well. And it features a modern code editor with syntax highlighting.
How To Add JavaScript Code in WordPress
There are a few different methods you can use to add JS code in WordPress. We’ll walk you through them, step by step.
Method 1: Use Insert Headers and Footers Plugin
The easiest method for adding JS code is to use a simple plugin. And the Insert Headers and Footers plugin is the perfect option for that.
Step 1: Let’s start by installing the plugin. Login to your WordPress admin dashboard and go to Plugins >> Add New. Search for the Insert Headers and Footers plugin. Install and Activate the plugin.
Step 2: After installing the plugin, go to Settings >> Insert Headers and Footers page to add your custom JS code.
Simply copy and paste your code to either the header, body, or footer section of your website. And click Save to save the changes.
This method is best for adding simple JS tags like Google Analytics code to your website.
Method 2: Use Simple Custom CSS and JS Plugin
If you want to add more advanced scripts to your website and pages, use the Simple Custom CSS and JS. It will allow you to customize how the code is added and even save it as a separate file.
Step 1: Go to Plugins >> Add New and search for the Simple Custom CSS and JS plugin. Install and Activate the plugin.
Step 2: Once you install the plugin, a new tab called Custom CSS and JS will appear on your WordPress admin panel. From there, you can choose to add JS, CSS, and HTML code.
Step 3: Create a new JS file for your scripts and write the code using the editor. Here you’ll have options to print the code into an external file and choose where to include the code.
A great thing about using this plugin is that it allows you to manage your scripts and code separately.
Method 3: Manually Add Custom JS Code
If you prefer not to use plugins, you can also manually add custom JavaScript code. This method involves editing the Functions.php file in your website. You can also add simple tags like Google Analytics tracking code to the Header.php file in your theme.
However, we don’t recommend using any of these methods for adding JavaScript code as they can interfere with the WordPress loading sequence. And we strongly recommend beginners not to edit theme files, especially the Functions file.
Having said that, if you must, you can add your custom JavaScript by copy-pasting the following code into your Functions.php file.
function wpb_hook_javascript() {
?>
<script>
// Add your JavaScript code
</script>
<?php
}
add_action(‘wp_head’, ‘wpb_hook_javascript’);
Make sure to add your code in between the <script> and </script> tags. This will add your code to the header section of your website.
For more detailed information about adding custom JavaScript in WordPress, read this official guide.
Conclusion
As we’ve mentioned earlier, you should be careful when adding custom JavaScript code in WordPress. Only add the most important code and avoid the rest. Especially avoid adding JS code from unknown sources.
Even when choosing a theme for your website, be sure to pick a lightweight theme that uses fewer scripts. You can check out our exclusive themes bundle for inspiration on great WordPress themes.
Looking for WordPress hosting? We use Kinsta. They offer world-class WordPress hosting, built to keep your website fast, secure, and always online.