- Use Header & Footer Code Plugin (the easiest option for non-technical users)
- Add code to the functions.php file
- Add code to header (with the wp_enqueue_script function or the wp_head hook)
Let’s get in!
1. Install a plugin like Head & Footer Code
This free plugin allows you to insert code in a variety of ways. You can use it for Facebook Pixel, Google Analytics, custom CSS and more.
To get started, add the plugin to your website by navigating to Plugins → Add New from your admin dashboard, then search for “Header & Footer Code”.
Once you click the Install now and activate Buttons find the plugin settings by going to Tools → Header and Footer Code. On this screen there are three fields for the header, footer and body areas:
Pros and cons of using a plugin
The main benefit of using a plugin is that it is a beginner-friendly option. You don’t have to worry about editing your design’s files. The Header & Footer Code Plugin might also come in handy if you’re looking for a seamless way to add other types of code and custom CSS.
2. Use your functions.php file
Before you begin, we recommend creating a child topic. This step helps ensure that you can continue to safely update the parent theme. You should also backup your website in case something goes wrong.
To start, find and open your functions.php file, then copy and paste the following code snippet:
Note that you will need to replace those
3 in the example above with the zip code you want to add the code to. To find this number, navigate to the post in your admin dashboard, then click To edit. In the browser bar URL, the ID number is the number next to “post=”:
Dos and don’ts of editing your functions.php file
The only disadvantage of this method is that you have to work with code and edit your website’s files. So it might not be the best option if you don’t have experience in this department.
<script> tag right into yours header.php File. However, this method is not recommended. It can disrupt WordPress loading order and cause conflicts with other themes and plugins.
wp_enqueue_script Function that creates a generic function. Alternatively, you can use the
wp_head action hook.
Let’s look at both options…
Navigate to your website template folder (wp_content → Themes → [yourtheme]). Then select upload:
Note the exact file path of this file. For example, it should be something like “
Next, find and open yours 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 hooks to add inline scripts to your website. During wp_enqueue_script Function queues custom scripts that wp_head Approach prints the scripts in your header template (and footer if you’re using those wp_footer hook).
First, navigate to your functions.php file, then copy and paste the following:
the wp_enqueue_script The feature is preferred by developers as it avoids conflicts that can arise with other options, such as: B. adding scripts directly to your header.php File. Also, no dependent scripts are created with this method.
- Install a plugin like Head & Footer Code.