- Use the Head & Footer Code plugin (the simplest option for non-technical users)
- Add code to functions.php file
- Add code to header (using the wp_enqueue_script function or the wp_head hook)
Let’s jump in!
1. Install a plugin such as Head & Footer Code
To get started, add the plugin to your site by navigating to Plugins → Add New from your admin dashboard, then searching for “Head & Footer Code”.
Once you click on the Install Now and Activate buttons, you can locate the plugin’s settings by going to Tools → Head & Footer Code. On this screen, there are three boxes for the header, footer, and body sections:
Pros and cons of using a plugin
The main advantage of using a plugin is that it is a beginner-friendly option. You don’t need to worry about editing your theme’s files. The Head & Footer Code plugin also might come in handy if you’re looking for a seamless way of adding other types of code and custom CSS.
2. Use your functions.php file
Before getting started, we recommend creating a child theme. This step helps ensure you’ll still be able to update the parent theme safely. You should also take a backup of your site just in case something goes wrong.
To get started, locate and open your functions.php file, then copy and paste the following code snippet:
Note that you’ll need to replace the
3 in the above example with the post ID number to which you want to add the code. To locate that number, navigate to the post from your admin dashboard, and then click on Edit. In the browser bar’s URL, the ID number is the number next to “post=”:
Pros and cons of editing your functions.php file
The only downside of this method is that it involves working with code and editing your site’s files. Therefore, it may not be the best option if you’re not experienced in this department.
<script> tag directly into your header.php file. However, this method is not recommended. It can interfere with WordPress’s loading sequence and cause conflict with other themes and plugins.
wp_enqueue_script function, which creates a generic function. Alternatively, you can use the
wp_head action hook.
Let’s look at both options…
Navigate to the template folder of your site (wp_content → themes → [yourtheme]). Then, select Upload:
Note the exact file path of this file. For example, it should be something like “https://www.yourdomain.com/wp-content/themes/twentytwentyuone/js/myjsfile.js”.
Next, locate and open your functions.php file, then copy and paste the following code snippet:
Be sure to replace the template URL with your own. Finally, save your file.
This method, which you can also use for the footer, uses the action hook(s) to add inline scripts to your site. While the wp_enqueue_script function enqueues custom scripts, the wp_head approach prints the scripts in your header template (and footer, if you use the wp_footer hook).
To get started, navigate to your functions.php file, then copy and paste the following:
The wp_enqueue_script function is preferred among developers because it prevents conflicts that can arise with other options, such as directly adding scripts to your header.php file. In addition, using this method doesn’t create any dependent scripts.
- Install a plugin such as Head & Footer Code.