- Use the Head & Footer Code plugin (the easiest alternative for non-technical consumers)
- Insert code to functions.php file
- Insert code to header (utilizing the wp_enqueue_script operate or the wp_head hook)
Let us leap in!
1. Set up a plugin these kinds of as Head & Footer Code
To get begun, include the plugin to your internet site by navigating to Plugins → Incorporate New from your admin dashboard, then looking for “Head & Footer Code”.
At the time you click on the Install Now and Activate buttons, you can identify the plugin’s options by going to Tools → Head & Footer Code. On this screen, there are a few containers for the header, footer, and physique sections:
Pros and cons of making use of a plugin
The key edge of utilizing a plugin is that it is a starter-friendly option. You never require to fret about modifying your theme’s information. The Head & Footer Code plugin also may possibly appear in handy if you are hunting for a seamless way of adding other sorts of code and personalized CSS.
2. Use your functions.php file
Ahead of getting begun, we propose generating a child topic. This action aids make certain you will still be in a position to update the guardian theme properly. You should really also consider a backup of your web site just in case anything goes completely wrong.
To get began, find and open your capabilities.php file, then duplicate and paste the pursuing 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.
tag directly into your header.php file. Nevertheless, this technique is not recommended. It can interfere with WordPress’s loading sequence and result in conflict with other themes and plugins.
wp_enqueue_script function, which makes a generic purpose. Alternatively, you can use the
wp_head motion hook.
Let’s appear at both of those options…
Navigate to the template folder of your web page (wp_content → themes → [yourtheme]). Then, decide on Add:
Note the actual file path of this file. For illustration, it need to be anything like “https://www.yourdomain.com/wp-material/themes/twentytwentyuone/js/myjsfile.js”.
Subsequent, track down and open up your features.php file, then duplicate and paste the adhering to code snippet:
Be sure to substitute the template URL with your have. Eventually, help save your file.
This technique, which you can also use for the footer, utilizes the motion hook(s) to increase inline scripts to your internet site. Although the wp_enqueue_script operate enqueues personalized scripts, the wp_head method prints the scripts in your header template (and footer, if you use the wp_footer hook).
To get began, navigate to your features.php file, then copy and paste the pursuing:
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.