isotropic-2022
Share
Blog
Search
Menu

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

By James LePage
 on July 31, 2020
Last modified on January 6th, 2022

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

By James LePage
 on July 31, 2020
Last modified on January 6th, 2022

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.

oxygen-course-isotropic
Oxygen Builder Course - Coming Soon
The Oxygen Builder Mastery course will bring you from beginner to professional - ACF, MetaBox & WooCommerce modules included.
isogroup-cover
Join The IsoGroup
A vibrant Facebook Group to talk about web design and the business of agency. Daily curated resources and conversations.
Code Snippets
Code Snippets is an easy, clean and simple way to run code snippets on your site. It removes the need to add custom snippets to your theme’s functions.php file.
Learn More
We may earn a commission if you make a purchase, at no additional cost to you.
Spotlight Product
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram