A quick and easy way to add things to your WordPress HEAD

Authored By: James LePage
Published On: July 31, 2020

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

amazon elementor E book

In this quick tutorial, we are going to introduce a quick and easy way to add code, and other content into the <head> of your WordPress website.

Add code to the head of wordpress
WordPress Website HEAD

There are many ways to add code to the header of your WordPress website, but this method gives you a lot of flexibility, while still keeping things incredibly simple.

When Would I need to add content to the <HEAD>?

Typically, if you're trying to verify your websites domain or add third party JavaScript like Google Analytics, HubSpot, Facebook pixel, or more, you're going to need to add code to the header of your website.

With WordPress, there are dozens of ways to do this, though they differ from the methods that you would use for a straight up HTML website as the header can only be accessed through PHP files.

If PHP scares you, don't worry, we're going to be using a method that allows you to add code to the head of your WordPress website from the admin to back end using a graphical interface. At the same time, it's not a plugin that restricts you to its settings, and it won't negatively impact the speed of your WordPress website.

With that in mind, let's take a look at the simplest way to add code and other content to the <head> of your WordPress site.

We're going to be using a plugin called Code Snippets, which is one of our favorite tools and prominently displayed in our plugin toolbox.

This is an incredibly powerful plugin that allows you to easily add, edit, and manage code snippets throughout your WordPress website. You can use it for everything from adding custom CSS to style login pages to adding third party JavaScript to the head of your website. We're going to show you the method that we use to add code to the head of our websites using code snippets, but keep in mind that this is only one of the many applications for this plugin.

First, download the plugin and then Create a new code snippet. We're going to be using a very simple PHP action to inject the code directly into the header of our WordPress website. In this example, we're going to be adding Google tag manager to a website using this method, but the most common application of third-party code would probably be incorporating Google Analytics into WordPress.

Again, this plugin is incredibly powerful, but will have virtually no performance impact on your website as you have complete control over all of the code

In the new code snippet, simply paste this:

add_action( 'wp_head', function () { ?> <?php } );

this is the simple PHP action that is going to directly inject whatever it contains into the header of your website. This could be anything from a HTML script tag, to a website verification Code to a collection of custom CSS.

In this example, we're going to be pasting in a code snippet that add Google tag manager to our WordPress website.

Underneath the code that you have added, you can choose to fine tune how it will be displayed on your website and the priority that it possesses.

In this example, we only want our code injected into the head of our WordPress website to run on the front end. In fact, the PHP that this is using to inject the scripts will only work for the header on the front end of the website, you would need a different code if you wanted to inject it into the admin Back end of WordPress.

However, you can choose to run the snippet everywhere, only in the administration area, only in the front end, or only once, and depending on the PHP action Contained within the snippet, you can use this to incorporate incredibly powerful customizations directly into your WordPress website without having to go into the back end and change any code.

We really like this tool because it's simple, easy to use, doesn't involve installing another plugin, has virtually no impact on the performance of your WordPress website, allows you to easily categorize many different snippets, and comes with built-in warnings if you are incorporating PHP that will break your site.

Even better, to disable all the code snippets, you simply need to disable the plugin altogether. It doesn't change any of the underlying code that makes up WordPress, your theme, or your website, instead it add it on top.

If you were looking for an incredibly simple way to add custom code to the header of your WordPress website, this is our goto method. It's simple, powerful, and quite easy to do.

Code snippets is an essential plugin which is installed on all of our client web sites, and we use it to add many different collections of code snippets to our sites, with varying priorities and visibility rules. If you have any questions about adding third party code to the header of your WordPress website using code snippets, don't hesitate to reach out in the comment section below.

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.