Unlock WordPress: Add Code to the Header and Footer

Managing a WordPress website is easy until someone asks you to work with code. Then all bets are off.

With AI website creators and drag and drop page builders, you can perform most website tasks without ever touching code.

Until you need to add Google Analytics, ReCaptcha, Facebook Pixel or something similar.

Fortunately, working with code is much easier than you think and we’re going to prove it.

We’re going to walk you through 5 simple methods to add code to the header and footer of your website.

Once we’re done, you’ll never think twice about adding code to WordPress again!

Why Add Code to the Header or Footer?

There are a few reasons you may need to add code to your header or footer:

• Connect Google Analytics: A common reason for adding code to the header is to link Google Analytics to your website. While there are plugins that do this, sometimes it’s cleaner to add it manually.
• Add the Facebook Pixel: Facebook Pixel connects your site to your Facebook account, typically for ads and analytics. While there are plugins that can do this too, it’s usually faster and simpler to add the code yourself.
• Verify website ownership: If you’re registering a new site with Google or want to use captcha, you may be asked to add custom code to your homepage header.
• Add CSS markup: CSS (Cascading Style Sheets) is the markup language used to apply colors and other design elements to WordPress. There are usually places to add custom CSS within a theme, but you can also add it to the header or footer.

There are probably lots of other reasons to add code but these are the most common for website owners.

How To Add Your Code

There are many ways to add code to the WordPress header and footer.

We’re going to show you how to edit using:

1. The Astra theme
2. Elementor
3. The WordPress customizer
4. Header.php/Footer.php file
5. Use a plugin

1. Astra Header or Footer Builder

Astra has two tools to help add code to the header and footer, the Header Builder and Footer Builder.

Both are accessible from the Astra dashboard and provide drag and drop features to help build your header or footer.

The interface uses the WordPress customizer and is very easy to use

Let’s show you how to add code to the header. Adding code to the footer will be exactly the same.

Select Astra > Dashboard > Header Builder.

Select an empty area of the header and add an HTML block.

Select the HTML block so you can see the settings in the left menu and type or paste your code into the content area.

If you’re adding a tracking code and don’t want it to be visible, perform the next step.

If you’re adding something for your design that you want to remain visible, skip it.

Select the three device icons in the Visibility section underneath the block so it won’t be visible and select the blue Publish button at the top.

That’s all there is to adding code to the header and footer with Astra!

Adding code to the footer is exactly the same. Just select Footer Builder from the Astra dashboard.

You could also use a widget block instead of HTML and include a text widget.

This can be useful if you’re placing the code in multiple areas of your site.

2. Elementor Header & Footer Builder

If you’re an Elementor Pro user, there’s a Custom Code feature you can use to add code anywhere.

Select Elementor > Custom Code > Add New

Add a title, set a position and publish to save your work.

We don’t use Elementor Pro and we imagine lots of you don’t either. So let’s show you how to do it using the free version.

We’re going to use the Elementor Header & Footer Builder.

It works in a similar way to Astra and is accessed from Appearance > Elementor Header & Footer Builder.

As we have worked with the header already, let’s add code to the footer this time.

Hover over your footer and select Edit with Elementor in the same way you would a post or page.

Your footer will now open in the familiar Elementor editor.

From here you can either select a footer element and add an HTML or text block, or add a new line to your footer and add a block.

Let’s add a new line and a text block, then type or paste your code into that block.

You’ll see the code on the left and where it will appear in the footer in the center.

If you don’t want the new block to be visible, select the Advanced tab of the block and scroll down to Responsive.

Select to hide the block on all devices by toggling each setting to Hide.

You should see the block shaded out in the center pane to show it’s hidden.

Select Publish at the top right corner to save the change.

3. WordPress Customizer

The WordPress customizer provides easy access to your header and footer.

How much you can change them depends on your theme but there should definitely be places to add code.

Select Appearance > Customize to open the WordPress customizer.

You’ll see header and footer entries in the left menu.

As we showed you how to use the customizer with Astra, we won’t repeat it here.

4. Manually Edit Header.php or Footer.php

Manually editing WordPress files is the technique of last resort, mainly because there are easier ways to do it that carry less risk.

If you manually edit files, it’s easy to make a mistake and impact the user experience.

The changes will also be overwritten when you update your theme. Unless you use a child theme of course.

Here’s how to do it if you want to:

Navigate to Appearance > Theme File Editor in your WordPress sidebar.

Ensure the correct theme is selected at the top right of the Edit Themes screen.

Then select the file you want to modify in the menu on the right. That will be either header.php or footer.php.

Let’s use header.php in this example.

Select the file on the right and you’ll see the name at the top as a double check.

Add the code to the file just before the closing </head> tag, like this:

Select the blue Update File button at the bottom to save your changes.

Test your code to make sure everything works.

If it does, leave the code in place. If it doesn’t delete or modify it until it works properly.

5. Use a Plugin

A final way to add code to your header or footer is to use a plugin.

There are plenty of plugins out there but these two are pretty good:

• Header Footer Code Manager
• Insert Headers and Footers

Let’s walk you through using Header Footer Code Manager.

Download, install it and activate the plugin on your website.

Select the new HFCM menu on the left.

The Snippets page is where you’ll see the list of all your snippets, or pieces of code. It will be blank at first because we haven’t created any yet.

Click Add New Snippet and fill out all of the settings:

• Snippet Name: The name is only for organizational purposes.
• Site Display: Choose where you want the code to be displayed. For example, display sitewide or only on certain pages, posts, tags, or where a shortcode is used.
• Exclude Pages and Exclude Posts: Choose pages where the snippet will not be displayed.
• Location: Choose if you want the code to be added to the header or footer.
• Device Display: Choose if you want the code to be enabled on mobile, desktop, or both.
• Status: Activate or deactivate the snippet.

Below the settings panel, you’ll see a text area to add the code.

Add your code and hit Save.

If you return to the Snippets page, you’ll see your code snippet.

Make sure it’s toggled to On and test your code and it should work perfectly!

Conclusion

See? We told you adding code to your header or footer was easy!

If you use the Astra theme (and why wouldn’t you?), the header and footer builders make it simple.

Elementor users can add code with the Header & Footer Builder or Custom Code feature.

You can also modify header.php or footer.php if you really need to or use a plugin.

Which method works for you best? Tell us in the comments below!