There are times when you need to add a little JavaScript to your WordPress site but don’t want to spin up an entire plugin. Maybe you’re doing some AB testing or don’t want to edit your theme’s JavaScript directly. Maybe you’re adding some Google Analytics code. If you’ve ever requested a customization of the accordion functionality in our Advanced Sidebar Menu PRO plugin, you most likely needed to add some custom JavaScript.
Whatever your reasons, there are a few methods to accomplish this.
Option 1: Use Theme Settings
By default WordPress does not include support for adding custom JavaScript via settings, however many themes add this ability. If you are using a premium theme, odds are there are instructions for adding custom JavaScript without editing any code.
Here are some commonly used themes and links to their documentation:
Disclaimer: We are in no way affiliated with the suggested plugins or themes. We simply listed the top items we receive support requests for related to custom JavaScript.
Option 2: Use a Plugin
There are a lot of options when it comes to plugins which allow you to insert custom JavaScript. Do a quick search on WordPress.org and you will find quite a few free plugins which will work just fine.
Each plugin will have a little different approach so you’ll want to reference the included documentation for your plugin of choice. We recommend sticking to top rated and highly used plugins.
Option 3: Create a Custom JavaScript File
Creating a custom JavaScript file is most definitely our recommended approach. It allows you to keep your JavaScript separate, leverage browser caching, and won’t disappear if you move your theme to a fresh/different install.
Step 1: Add a new file to your theme
Let’s pretend we want to add Google Analytics code to our site. We create a new file named google-analytics.js to match what our JavaScript does and add it to our active theme. This file may live anywhere in your theme, but it’s recommended to put it inside a js directory to keep things organized.
Inside your new JavaScript file, you add your code. As the contents of this file will be wrapped with the appropriate tags automatically, you don’t need to wrap your code in <script>.
Step 2: Load the script on the site
Now we load this script on the site by calling wp_enqueue_script within your active theme’s functions.php file.
In many cases your custom JavaScript will require jQuery which may be added as a dependency along with a version which allows for browser cache busting. This version includes both.
Option 4: Directly Add JavaScript to functions.php
When all else fails (or you just want it quick and dirty), you can add custom JavaScript directly to your active theme’s functions.php file. WordPress will not automatically wrap your code in <script> tags so you have to make sure you do so. Using the below snippet you’ll want to replace CUSTOM JAVASCRIPT GOES HERE with your JavaScript.
Here is an example of adding a full Google Analytics implementation this way.