Customizing your WordPress website using code can be scary. Often, you'll need to dig into core files to modify configurations or add new parameters, which can break your site if you go about it the wrong way.
However, adding header and footer code tends to be much simpler. Often, you'll only need to copy and paste specific code snippets. This means if you know how to access your header and footer files, you're past the scariest part.
In this article, we'll teach you how to add header and footer code in WordPress both manually and with a plugin. Both approaches are very straightforward, so let's get right to it!
Why You Might Need to Add Header and Footer Code in WordPressIf you run a website, you're probably familiar with at least one third-party service that requires you to embed code to connect to it.
Some of the most popular examples include Google Analytics, Search Console, Facebook Pixel, and many other tools that involve website tracking.
All of those services require you to add specific scripts between your website's head tags. Your site's header is a crucial component including elements such as scripts, titles, style files, and more.
Footer tags work similarly to their head counterparts. Technically, if you add code snippets to your site's footer, they should run the same as if you include them in your header.
However, it's important to understand that your website will execute scripts in the order you include them. Plus, the header code will run before the page is loaded, while the footer code will run after it.
If you have the option to choose and you care about website optimization, moving JavaScript to your site's footer can help speed up loading times. However, some services will explicitly ask you to add their code to your header to avoid any execution issues.
As a rule of thumb, if a service asks this of you, we recommend following its advice. For other JavaScript code snippets, place them into your WordPress site's footer. CSS code always goes into the header.
How to Add Header and Footer Code in WordPress (2 Methods)As is often the case with WordPress, you can accomplish the same goal by either modifying files manually or using a plugin.
Let's start by talking about the plugin approach.
1. Use a Plugin Such as Head, Footer, and Post InjectionsUsing a plugin to add code to your header and footer files in WordPress is the safest approach. With a plugin, you don't need to modify theme files manually or ensure that you're adding scripts in the right place.
While there are many good plugins to choose from, our recommendation for the job is the Head, Footer and Post Injections plugin.
This plugin gives you a lot of control over where in your code you want to add your code snippets. It also offers the option of adding different scripts for mobile and desktop renderings of your site.
To add the plugin, go to Plugins > Add New within your dashboard and use the search feature to find the plugin. Click on install, then activate the plugin.
Once the plugin is active, you can jump straight to Settings > Header and Footer. You'll see multiple fields where you can add code snippets.
If you dig into the plugin's options, you'll see that it offers a lot of additional placements for your code snippets. However, in most cases, you can stick to the Head and footer tab.
For global code, make sure that you place those snippets within the On Every Page field. However, if you only need the code to run on your home page, use the Only On The Home Page option.
Once you finish adding code to your website, save the changes to the plugin and you're good to go!
2. Add Code Snippets Through Your functions.php FileAdding header and footer code manually in WordPress isn't complicated, but it does require more considerations than the plugin approach.
You can add the code directly to your active theme's header.php or footer.php files. You can find these files within the /public_html/wp-content/themes/ directory by opening your active theme's folder and looking inside:
You can access those files via File Transfer Protocol (FTP) and edit them using your favorite code editor. However, editing header and footer files directly can be messy. With this in mind, we have two recommendations if you plan on using the manual approach:
Ideally, you should always use a child theme if you plan on doing any type of theme customization. You can access your child theme's functions.php file in its folder within the /wp-content/themes directory.
Open the functions.php file in your code editor. To add the code you want, you need to use either the wp_head or wp_footer hook.
The following code snippet adds your custom code to the header of your site:
add_action('wp_head', 'test_script'); function test_script() { ?> <!-- Here comes your custom code in HTML format. --> <?php }You can use the wp_footer hook instead of wp_head if you want to place the code into your footer. You can also change the function's name (test_script) if you want.
When you're done tweaking your functions.php file, remember to save your changes, and that's it. Whatever code you added should be working now!
ConclusionMany third-party services such as Google Analytics or Facebook Pixel require you to add code snippets to your website so that they can connect to it. However, this is just one of many cases where you'll need to add code to your header and footer in WordPress, so it pays to know how to do it.
There are two ways you can add code snippets to your header and footer. You can either use a plugin such as 'Head, Footer and Post Injections', or add code snippets through your functions.php file.
Do you have any questions about how to add header and footer code in WordPress? Let's talk about them in the comments section below!
Free Blogger templatest, Free Blogger templates Minimalist, Free blogger templates responsive, Layouts blogger, Simple free blog template, Blog template WordPress, Goyabi templates, Nawigacja na stronie, Free Blogger templates, Free Blogger templates Minimalist, Btemplates, Free blogger templates responsive, Simple free blog template, Blog template WordPress, Blogger template responsive free, Blogger templates,s Free Blogger templates Free Blogger templates Minimalist Layouts blogger Free blogger templates responsive Btemplates Blogger portfolio template Blog template WordPress Free themes blogspot Theme Blogger Premium Gratis Download Parhlo Premium/Magazine Blogger Template Google Infinite AMP Responsive Blogger Template | Blogspot Infinite AMP Sarkari Result WordPress Theme Free Download Amalia • v1.0 - Responsive •Blogger Template Amalie • Blogspot TemplateCodeify v1.0 - Personal Blogger Template new blogger templates, best blogger templatesLuvblog - Responsive HTML5 Blogger Template Twitter Bootstrap 3.0 100% Responsive DesignCream - Responsive News & Magazine Blogger Template Cream Magazine | ThemebeezSeo Mag - Responsive Blogger TemplateBest - SEO Friendly Blogger Templates • Top Best Free • New TemplatesWaverly - Personal Responsive Blogger Template250+ Best Free Responsive Blogger Templates PackNewsify v1.0 - News NEWSIFY BLOGGER THEME FEATURES Magazine Blogger Templateresponsive blogger templatesprofessional blogger templates freefree customizable blogger templatesfree blogger templates simple blogger templates freefree html blog templatesclean blogger templatespremium responsive blogger templates
Comments
Post a Comment