Skip to main content

Adding 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.

Preparation​

These are some tools we need in this tutorial:

  • Meta Box: to have the framework for using MB Views. You can download it directly from wordpress.org.
  • MB Views: to add code to the header and footer.

1. Adding or changing 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.

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

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

Add any code you want into the Template, CSS, JavaScript tabs

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

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

In the Template tab, add some code as an example

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.

Also use CSS tab to style

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

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.

Set the type for this view as Action and 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.

There’s an alert displayed

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

The menu on the header also turns to red as styling

2. Adding or changing content in the footer​

Do the same with the footer.

In another view, add code to the tabs.

Add some code into three 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.

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.

There is a notification on the frontend

Also, the footer has a text section in black.

The footer has a text section in black

3. Adding 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.

3.1. Adding 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.

Create a new view to add Google Analytics code snippet

Paste the script to the JavaScript tab.

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.

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.

3.2. Adding 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.

Add the script of Google Tag Manager to the JavaScript tab

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

Set the type of the view using the wp_head action

That’s so simple.