A quick and easy way to add things to your WordPress HEAD
A quick and easy way to add things to your WordPress HEAD
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.
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 } );Code language: PHP (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.
Bookmark This Post
James LePage
