Where Is The Head Tag In WordPress And How To Insert Code To It?
Sometimes, you may need to add code to the head section of your website, but you might not know how to do it. It can be confusing and challenging, especially because WordPress doesn’t make it easy to edit the head. So, where is the head tag, and how can you insert code into it?
The <head> tag is located between the <html> and <body> tags and is used to store metadata. You can add code to the <head> tag by using a plugin, a feature included in your WordPress theme, or by manually editing the header.php file of your theme.
I’ve explained how you can access the head tag in WordPress and the three ways you can add code to it. Depending on your experience with WordPress, you can choose the method that works best for you.
Where Is The Head Tag In WordPress?
To find the <head> tag, go to your dashboard and select ‘Appearance’, then ‘Editor’. Once the Editor opens, you will be presented with a list of files – click on the ‘header.php’ file. The <head> tag is located between the <html> and <body> tags, and is used to store metadata. This metadata describes the type of document, and includes elements such as the title, character set and style, scripts, and other meta information.
- <title>
- <style>
- <base>
- <link>
- <meta>
- <script>
- <noscript>
In the <head> section, you can add code to integrate web services like Google Analytics, Google Search Console, Facebook Pixel, and more. You can also insert custom CSS or JavaScript code.
Although WordPress doesn’t have a built-in option to add code to the header, there are three ways you can do it. These methods will allow you to insert code into the header safely without editing any files from your WordPress theme.
How To Add Code To Head Tag In WordPress?
The <head> section of your website is where you can insert code to integrate web services such as Google Analytics, Google Search Console, and Facebook Pixel. Additionally, you can also add custom CSS or JavaScript code.
Although WordPress doesn’t have a built-in option for adding code to the header, there are several ways to do it safely without editing any files from your WordPress theme. These methods will enable you to insert code into the header.
Adding Code By Using A Plugin
Using a plugin to insert code can offer several benefits. For one, it is fast and organized, and it allows you to store all of your codes in one place. Additionally, it prevents errors while editing the codes in your WordPress theme. And, you don’t have to worry about losing your code when upgrading or changing a theme because the plugin will save it in a separate place.
If you decide to use a plugin, the Headers and Footers plugin is a good option. After installing and activating it, you can access it by going to “Settings” and selecting “Insert Headers and Footers.” There, you will find two boxes where you can insert your code. Just paste the code you need and click “Save.” Remember to paste the code after the <head> tag and before the <body> tag, to ensure that it works properly.
The plugin will automatically load the code in the correct locations of your WordPress theme, and you can also remove any code you no longer need. This is the easiest way to add header codes and is great for beginners in WordPress. If you’re new to WordPress, I highly recommend using this method to insert codes.
Adding Code By Using An In-Built Code Feature Of Your Theme
If you want to insert code in the header section using a built-in feature, you’ll need to choose a theme that has one. Some WordPress themes that have this feature include Elegant Themes and the Genesis Framework by StudioPress.
For example, if you use the Genesis Framework, you can go to ‘Genesis’ and then ‘Theme Settings’. At the bottom of the page, you’ll find the section called ‘Header and Footer Scripts’. Paste your code in the ‘Header Scripts’ section, click ‘save’ and you’re done. It’s easy and doesn’t involve many steps, and you don’t need to worry about changing any core elements in your theme.
However, not all themes include this feature, so you’ll be limited in your choice of themes. This method is similar to using a plugin, and it’s safe. But, if you switch themes, all of your code snippets will be lost. That’s why it’s recommended to use a plugin instead of a built-in feature for inserting codes in the header. It’s an easier and safer method.
Adding Code Mannually, By Editing Header.php Files
This method of adding code to the header section of a WordPress website is not recommended for beginners as it involves editing PHP files, which can be complicated and may not be suitable for those who are not familiar with PHP basics. Instead, it is recommended to use a plugin or a theme with an in-built feature for adding code to the header.
If you decide to use this method, you will need to have a WordPress child theme to make the necessary edits. This is important because using a child theme will ensure that your codes will not be overwritten when you update your theme. Before you start editing, make sure that you have a child theme ready to use.
You can add code snippets to the header section through the header.php file, but it is best to use the functions.php file to keep all of the code snippets in one place and avoid making any changes to the core files. Before you add any code, you will need to have your code ready.
/* Describe what the code snippet does so you can remember later on */
add_action(‘wp_head’, ‘your_function_name’);
function your_function_name(){
?>
PASTE HEADER CODE HERE
<?php
};
This method is not recommended for beginners as it requires knowledge of PHP basics. It is best to use a plugin if you are not familiar with editing PHP files.
Before proceeding, make sure that you have changed the comment description for each code snippet and replaced the placeholder text with the appropriate information.
To add the code to your header section, you will need to use a WordPress child theme to make the necessary edits. This is important because if you do not use a child theme, your code may be overwritten when you update your theme.
To add the code, navigate to the ‘Appearance’ section and select ‘Editor’. From there, you can access the functions.php file and paste your code. Be sure to click ‘save’ when you are finished.
You can also add code to specific pages by using a specific code snippet. This allows for more control over the code in your header section. For example, if you want to add code to the header of your homepage only, you can use a specific code snippet.
/* Describe what the code snippet does so you can remember later on */
add_action(‘wp_head’, ‘your_function_name’);
function your_function_name(){
if(is_front_page()) { ?>
PASTE HEADER CODE HERE
<?php }
};
Manually editing the PHP files of your WordPress theme can be complicated, especially for beginners. It is not recommended for those who are not familiar with PHP basics. One of the methods to add code to the header section is to use a child theme and edit the functions.php file.
However, this method can be risky and may lead to your codes getting overwritten when you update your theme. Additionally, it is recommended to comment the code, and change the function name and place holder.
Another way is to use a plugin, which is considered as the safest method, as it does not involve making changes to the core files of your theme. It is important to choose the safest and most manageable method, as adding code to the header section can affect the functionality of your website.