Struggling with the way to add code to the WordPress header or footer? Several tools and trailing scripts need you to feature code snippets to your WordPress site’s header or footer. But, by default, WordPress doesn’t build it terribly accessible to edit those files. during this entry, we’ll show you the way to feature code to the WordPress header or footer each by employing a WordPress plugin or manually adding the code to your functions.php file. for many users, the plugin technique is that the suggested technique. however intermediate-advanced WordPress users could like mistreatment the manual code technique, instead.
You can click the links below to jump straight to your preferred method:
For most users, the easiest way to add code to the WordPress header and footer is via a plugin. The benefits of using a plugin over the manual method in the next section are:
While there are several plugins that offer this functionality, we recommend the Head, Footer and Post Injections plugin from Stefano Lissa because it gives you more control than many of the alternatives. It currently has over 100,000 active installs with a 5 out of 5-star rating.
Head, Footer and Post Injections is available for free at WordPress.org, so you can install and activate it directly from your WordPress dashboard by going to Plugins → Add New and searching for it:
Once you activate the plugin, you can access its interface by going to Settings → Header and Footer in your WordPress dashboard. You’ll see a number of tabs in the plugin’s interface. But for this guide, you’ll mostly work in the default Head and footer tab:
To add code to your site’s header, you need to paste it into one of the boxes under the <HEAD> SECTION INJECTION area:
For example, to add the Google Analytics tracking code to WordPress, you’d just paste it into the Every page box and save your changes:
To add code to your site’s footer, you can scroll down to the BEFORE THE </BODY> CLOSING TAG (FOOTER) option. Again, you have two options, though they’re different from the header section:
If you just want to add a code snippet to the footer section for all users, no matter their devices, paste it in the Desktop box and leave Mobile unchecked:
Another neat thing about this plugin is that, if you’re using Google AMP for WordPress, the plugin lets you specifically add code snippets to the header and footer of the Google AMP versions of your pages (as long as you’re using the official AMP plugin from Automattic).
To do it, head to the AMP tab in Header and Footer and paste your code snippet into the appropriate box:
If you are simply needing to add different PHP functions on a site-wide basis, we also recommend checking out the free Code Snippets plugin. It removes the need to add custom snippets to your theme’s functions.php file. It currently has over 50,000 active installs with a 5 out of 5-star rating.
If you’re not familiar with the basics of PHP, we recommend you stick with the plugin method above. The manual method might be overly complicated for you.
In this section, you’ll learn how to manually add code snippets to your theme’s header and footer via its functions.php file.
If you want to proceed with this method over the plugin in the previous section, it’s essential that you use a WordPress child theme to make your edits. If you don’t use a child theme, any code that you add to your header or footer will get overwritten if you update your WordPress theme.
Many developers provide a child theme. But if your developer doesn’t, here’s a guide on how to create a WordPress child theme. Once you have your child theme ready to go, you can proceed with the following steps to add code to your theme’s header or footer.
While you can add code snippets directly to your header.php and footer.php files, a better way is to use your functions.php file and the appropriate WordPress hook. This lets you keep all your snippets in one place and avoid modifying core theme files.
To get you started, we’ll give you a rough framework to add code to both your header and footer.
To add code to your header, use this 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(){
?>
PASTE HEADER CODE HERE
<?php
}; To add code to your footer, use this code snippet:
/* Describe what the code snippet does so you can remember later on */add_action('wp_footer', 'your_function_name');
function your_function_name(){
?>
PASTE HEADER CODE HERE
<?php
}; For each snippet, make sure to change:
Once you have the relevant code snippet(s) ready, you need to add them to the functions.php file of your child theme. You can either edit this file by connecting to your site via FTP. Or, you can go to Appearance → Editor and select the functions.php file. Then, paste your code at the end of the file:
Make sure to save your changes and you’re done!
If you want more control over where your header or footer code snippets show up, you can use if statements to only add the code to specific pages on your WordPress site.
For example, to only add code snippets to the header or footer of your homepage, you could use:
/* 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_single(73790)) { ?>
PASTE HEADER CODE HERE
<?php }
}; Another option is to only add the code snippets to specific posts or pages. To do that, you can use this code snippet:
/* Describe what the code snippet does so you can remember later on */add_action('wp_footer', 'your_function_name');
function your_function_name(){
if(is_single(73790)) { ?>
PASTE HEADER CODE HERE
<?php }
}; Make sure to replace the example number – 73790 – with the actual ID of the post or page you want to add the code snippets to.
That wraps up our guide on how to add code to the header or footer of your WordPress site. If the manual code examples are confusing, we recommend that you use the plugin method. It’s much more beginner-friendly and, most of the time, gives you just as much functionality.
JSON (JavaScript Object Notation) is a lightweight data-interchange format widely used in web development. At…
AJAX (Asynchronous JavaScript and XML) is a powerful technique used in modern web development that…
Introduction After successfully optimizing your website for speed, it's essential to maintain and build upon…
Securing your WordPress folders is crucial to safeguarding your website from unauthorized access and potential…
Creating a file upload feature with a circular progress bar involves multiple steps. You'll need…
Integrating WP Rocket with AWS CloudFront CDN helps to optimize and deliver your website content…