How to Add Code to Header and Footer in WordPress - Using MB Views

In the header and footer of the WordPress website, you can add custom code such as tracking scripts, meta tags, or custom CSS to connect with external services. Today, let’s try a simple way to add code to the WordPress header and footer with the help of MB Views from Meta Box.

Video Version

Why MB Views?

To integrate your websites with external services like Google Analytics, Google Search Console, and Facebook Pixel, etc. You usually should add code to the header and footer of the website.

To do it, you can add code to the theme directly. But, it is not an optimal option. We recommend using plugins or third-party services that can help to do that indirectly. It brings two significant benefits:

• The code will be not affected when you change the theme.
• You can manage the code more easily.

MB Views is one of those plugins. It will come handy especially when you have Meta Box on your site.

For the header and footer, MB Views supports two actions: wp_head and wp_footer. So, your work is just inserting the code into the view, then using one of these actions. Then, everything will be done.

In this blog, I’m giving some examples of adding code to the header and footer, including adding or changing the content in the header or footer, and adding Google Analytics and Google Tag Manager scripts.

Before Getting Started

First, we need Meta Box to have the framework for using MB Views. You can download it directly from wordpress.org.

As I mentioned before, we also need MB Views to add code to the header and footer. It is an extension from Meta Box, which allows you to get Meta Box fields and build your templates on the front end fast and easily. But, you also can use it as a tool to add code to your theme. If you have the Meta Box AIO, please notice that it’s also included in the package.

Add or Change the Content in the Header

We will create a view as usual, then use the two actions I mentioned to define them in the header or footer.

Go to Meta Box > Views and create a new view.

Add any code you want to declare, get data, style, or anything else...in three tabs provided by MB Views.

For example, in the Template tab, I add some code:

<meta name="description" content="Meta Box plugin">
<link rel="stylesheet" href="styles.css">

In there, <meta name="description" content="Meta Box plugin"> is to add a description for the meta tag with the content as “Meta Box plugin”.

I also use CSS to style the menu in the header a little bit.

In the Javascript tab, I add a line to display a notification.

After adding the code as you want, scroll down to the Settings section.

To add all the above code to the header or footer, we should set the type for this view as Action. Then, enter the action in the Action name box.

After publishing, on the frontend, you’ll see the alert which has content specified in the JavaScript tab before.

The menu on the header also turns to red as styling.

Add or Change Content in the Footer

Do the same with the footer.

In another view, add code to the tabs.

Then, instead of using the action for the header, just use the wp_footer action to apply the code to the footer of the website.

Go to the page on frontend. There is a notification since I also added it in the JavaScript tab.

Also, the footer has a text section in black.

Add Code to Connect with External Services

For a clearer look, let's add the code to connect the website with external services.

Not only changing the content and styling something on your pages, you can also use the MB Views to add scripts from third parties such as Google, Facebook, Hotjar, etc. I’ll link the header with Google Analytics and Google Tag Manager as examples.

Add Google Analytics Code Snippet

For Google Analytics, after getting the code snippet from your Google account, go back to your site, and create a new view as well.

Paste the script to the JavaScript tab.

Then set the Type as Action, and name the action as wp_head to add the script to the header of the page.

That’s done.

Add Google Tag Manager Code Snippet

Do likewise with the Google Tag Manager code snippet. Get it from your Google account.

Then, add the script to the JavaScript tab in a view.

And, set the type of the view as action as well. We also should use the wp_head action in this case.

That’s so simple.

Last Words

With the help of MB Views, adding code to the header and footer is extremely easy. The applications of these actions are not just that. For example, you can add a few settings for the wp-head action to create the dynamic favicon for the WordPress website.

Besides the wp-head and wp_footer hooks, you can use some other hooks provided by WordPress to conform to your needs.

I hope this tip is useful to you. If you have any questions or requests for the next tutorials, feel free in the comment. Thanks for reading!