Wordpress

How to add code to the head tag in WordPress?

Share your learning

Do you want to add code to head tag in WordPress or in the footer before closing the body tag but don’t know how to add code to the head tag in WordPress?


Before some time, I was also struggling with it. But today I am going to explain to you how we can easily edit theme header and footer files.

Normally, WordPress doesn’t make it easy for us to edit those files. But with little bit of knowledge we can do it easily.

Basically we can do it in two ways one is manually by adding code to the function.php (adding the hooks) file and second is by using some sort of plugins.

So, Let’s dive into it.

How to add code to the head tag in WordPress with plugin (4 useful plugins)?

Using plugins it is much much easier to handle the WordPress, especially if you are not in the technical suit.

If you don’t want to bother with the coding part or just want it to finish fast and play safe then the plugin might be the best choice to add code to the head tag in WordPress.

There are lot of plugins which can help us to add code to head tag in WordPress website, some of them are below,

Head, Footer and Post Injections

Here injection means to inject the code, script or anything in the head, footer and even in the post also. This plugin makes it easy and fast for us to add code to head tag in WordPress website.


It has a special section for AMP so we can add code to the AMP pages also. It will be fully compatible with all other APM plugins (if have).
Sometimes we also need to inject images, code or just some icons before or after the post, so with this plugin we can do that also.

Insert Headers and Footers

This is the easiest plugin to use to add code to the head or footer in WordPress theme. We can add google analytics, css, scripts, facebook code etc easily to our head or footer. It is very lightweight and easy to setup as compared to other plugins. 

Header and Footer Scripts

This is one of the best plugins to add code to head and footer in WordPress theme. It is supported by mostly themes. We can add custom css, script files, social scripts and analytics script files etc.

Now it is also supported by a new feature to inject the code to the custom post type. It has a very easy user interface and is user-friendly.

Header Footer Code Manager

We can add code snippets to the page by using this plugin like before or below the content, in head or before closing the body tag. Added code can be controlled as per device like mobile or desktop. 

We can use shortcode to place the code anywhere on the page manually. This plugin also maintains the logs of which user added the last code snippet and when. So, we can easily track the new changes. 

How to add code to the head tag in WordPress manually?

If you are a PHP developer but new to WordPress then you can also use a manual approach to add code to head tag in WordPress. But what are the benefits to use this manual method over the plugin way?

Well, good question, the best answer is that less plugin makes your site faster and less complex to find the bug. Sounds good.

So, let’s start.

There are two ways to edit your head and footer of your WordPress theme. First one is using header.php and footer.php files. Means you can directly edit these files and inject your code there.

The second way is function.php, which is much better than the direct edit of the header.php and footer.php files. By using function.php you can track your code easily when needed to update or remove.

Now the first thing or the first file we need to find is function.php in your theme’s folder. If you are maintaining a child theme which is good to prevent your changes being overwritten when you update your theme. In that case you can find the function.php file into the child theme’s folder.

We are going to use “wp_head” and “wp_footer” hooks to inject the code to the head or footer of our theme. Copy the following code snippets and paste into the function.php file at then end.

<?php
add_action('wp_head', 'your_function_name');
function your_function_name(){
?>
------ PASTE HEAD TAG CODE--------
<?php
}; ?>


<?php
add_action('wp_footer', 'your_function_name');
function your_function_name(){
?>
---------- PASTE FOOTER CODE HERE -----------
<?php
}; ?>

Satpal

Recent Posts

How to Switch PHP Versions in XAMPP Easily: Managing Multiple PHP Versions on Ubuntu

Today we are going to learn about managing multiple PHP versions on ubuntu with xampp.…

1 year ago

How to Use Coding to Improve Your Website’s SEO Ranking?

Let's understand about how to use coding to improve your website's SEO. In today’s computerized…

1 year ago

Most Important Linux Commands for Web Developers

Let's understand the most important linux commands for web developers. Linux, as an open-source and…

1 year ago

Top 75+ Laravel Interview Questions Asked by Top MNCs

Today we are going to discuss top 75+ Laravel interview questions asked by top MNCs.Laravel,…

1 year ago

Mailtrap Integration for Email Testing with Laravel 10

Today we will discuss about the Mailtrap integration with laravel 10 .Sending and receiving emails…

1 year ago

Firebase Cloud Messaging (FCM) with Ionic 6: Push Notifications

Today we are going to integrate FCM (Firebase Cloud Messaging) push notifications with ionic application.Firebase…

1 year ago