Insert Script into WordPress Header

, , , , , ,

Recently had a client with a WordPress website in need of injecting a JavaScript tracking code into the Header. This would allow the injected JavaScript tracking code to appear within the header <head> of every page on their website. Newer WordPress themes usually provide an option to inject code into the either the header, body or footer areas but the client had a custom WordPress theme with no such feature or ability.

In this article I will show you how to quickly and easily add a script, JavaScript or any other custom code into the Header area of your WordPress website with or without a WordPress plugin.

 

Add Script into WordPress Header

WordPress actions can include “hooks” which are called when that action is encountered by WordPress. For example, when your theme runs header.php, it should cause the function wp_head() to run. When the wp_head() function is executed you can “hook” into it and provide WordPress with any code that you would want to included.

WordPress themes include a header.php file as a template file. You could simply paste your script, JavaScript code or any other custom tracking codes there but this isn’t ideal. Any such modifications to your (parent) theme files would be lost as soon as you update or change your WordPress theme.

There are better ways of injecting a script or other custom code into the WordPress Header area. The easiest way is with the use of a free WordPress plugin whilst my preferred way is to simply use the built-in WordPress wp_header hook. Note, there are other solutions but these two are the best in my opinion.

 

Script Injection WordPress Plugins

There are many plugins available for adding header, body and footer scripts to your WordPress website. Below are two that I would recommend if you are interested in using a WordPress plugin.

 

Add a Script to WordPress Header

To include a script in the header of our WordPress website we would want to open our child theme’s functions.php file and insert the following example code (excluding the php open and close tags):

The above script simply opens an alert window on your pages, but you may replace the existing script with one of your own. This is basically what the previously mentioned WordPress plugins do just more efficiently. Manually adding the above Header hook might take a few more minutes to implement but is better in the long run.

 

Insert Header Script for Specific Page

To include a script within the header of a specific page on our WordPress website we would want to open our child theme’s functions.php file and insert the following example code (excluding the php open and close tags):

 

Conclusion

I welcome your thoughts, questions or suggestions on my article on inserting a script or other custom code into your WordPress Header.

You may support my work by sending me a tip using your Brave browser or by sending me a one time donation using your credit card.

Let me know if you found any errors within my article or if I may further assist you by answering any additional questions you may have.

 

Editors Note:

  • This article was first published on August 6th, 2022 and was revised on January 16th, 2023 to include instructions for inserting a script into the header of a specific WordPress page.