Download Our Full Online Business Roadmap

This 5-phase plan guides you step by step from zero to hero.

How To Use A Global Header And Footer On Thrive Architect Landing Pages

Time to get a little bit geeky with Thrive Themes. Specifically their Thrive Architect (previously Content Builder) editor.

Do you have a custom header or footer as part of your blog theme? Want to include it into the pages you build with Thrive Architect in order to keep things consistent?

I present my own site as an example of this hack in action. My blog theme is called Memberoni. It is a theme created by The Membership Guys for membership sites. I have hacked and customized the heck out of it, so truth is that it is a pretty custom theme at the moment.

So, if you look up on this very blog post, you will see what my header area looks like. I don’t need to show an image because you see it. 🙂

But, then look at my homepage. Or my about page.

These pages were built with Thrive Architect. Yet, the header is being pulled in from my theme. This was important for me since my header changes depending on whether the person is logged in or not. If the visitor is a LAB member and logged in, they see different navigation. Plus, I want my header to be completely consistent.

So, how do you do it?

Can You Use Architect’s Global Header/Footer?

Thrive Architect now has the ability to have a global header and footer across landing pages. If you go to the landing page settings inside of Architect, you get this:

You can select headers or footers you have pre-designed and include them into the page. To set up these headers and footers, you go into your Thrive Dashboard > Global Elements. You’ll see screens for headers and footers.

You can then set up different header and footer templates that you can use on any landing page. You literally use Architect to design your header or footer.

So, this is a massive improvement over what we used to do with Architect.

But, what if you want to include the header from your main theme without having to re-design it inside of Architect? There’s a way. But, it is a bit geeky.

You’ve been forewarned. 😉

The Secret Layout.php File

Thrive Architect has a global file which controls all landing pages. It is found in…

/wp-content/plugins/thrive-visual-editor/landing-page/layout.php

When you look at this file, you will see that Thrive has internal hooks built in. They call them after_body_open() and before_body_end(). Unfortunately, it doesn’t appear that there’s a way to hook into these functions. However, you can use standard WordPress hooks.

You will see that the get_footer() hook as well as the standard wp_footer() call is at the bottom of this file. So, we can hook our footer into that. The header is different. WordPress has the wp_head() hook however anything you hook to it will appear in the <head> of the document. To output HTML to screen in that section is malformed code. So, the solution is to create a new hook right after the opening body tag.

I edit the layout.php file and right after the opening body tag, I insert this line:

<?php do_action( 'get_bma_header' ) ?>

So, the code in that section of layout.php will end up looking like this:

<body <?php body_class( $css_data['class'] ) ?> style="<?php echo $css_data['css'] ?>"<?php echo $css_data['custom_color'] ?>>
<?php do_action( 'get_bma_header' ) ?>
<?php $tcb_landing_page->after_body_open() ?>

This will take the function output of get_bma_header() and insert it right into that spot.

For this to work, though, I need to have a function called get_bma_header() that outputs my header code the way I like it.

In my theme’s functions.php file, I do something like this…

<?php function bma_global_header() { ?>
/* INSERT MY HTML HERE */
<?php }
add_action( 'get_bma_header', 'bma_global_header' );
?>

This will take whatever code I throw in there and output it right to the get_bma_header hook which I included into layout.php.

Do the same basic thing for your footer. Although in this case you can simply hook it to the built-in footer hook:

add_action( 'wp_footer', 'bma_global_footer' );

Since Thrive does automatically include your theme’s CSS file, everything should look like it is supposed to.

You will now have your main site header and footer included globally on every Thrive landing page.

Want To Make Your Header/Footer Optional?

If you just left things as they are up above, then you would have your blog’s header and footer included on every page you build with Architect… whether you like it or not. But, what if you DON’T want to include it?

For instance, you are building an actual landing page and don’t want to include the full nav menu (since it can harm conversion rates), you want to skip the usual header and include, perhaps, a logo only.

So, we need to make the inclusion of our header/footer optional. Personally, I do this by using a custom field and the using a simple IF statement that will include the header if it is true. If it is false, it’ll skip.

I use Advanced Custom Fields to set up a true/false field that is is visible on all post, pages and custom post types. I have it set to TRUE by default so as to include my header. If I uncheck the box, it will not include the header.

Assuming I call the field “disable_site_header” with ACF, I would modify my function like so:

function bma_global_header() {
if (!(get_field('disable_site_header',$post->ID))) : ?>
/* HEADER HTML HERE */
endif;
 }

That’s it.

One Last Gotcha…

to do this hack, you are modifying your layout.php file. And there’s one big drawback to this…

Every time you update the Thrive Architect plug-in, you’re going to need to re-edit the layout.php file.

You will need to re-insert your custom function into that file every time. And, Thrive issues updates pretty often (one of the reasons I love them), so if you update every time, you will need to do this edit every time.

It is annoying, but it only takes a few seconds to do it. I keep a copy of my layout.php file on my local hard drive for reference. Then, every time I update Thrive Architect, I just reference my local copy and re-insert that header function back in there again. It honestly takes me 20-30 seconds tops to do it.

One may wonder… why can’t Thrive Themes just build this functionality into Architect to begin with? Well, as I was updating this post, I bring up my response to a commenter who asked that question…

Truth is, themes are all created in different ways and I really don’t see how Thrive could provide a one-click option that would reliably “suck in” whatever header is going on right into Architect. I mean, some themes use header.php to show things. Others use custom includes. Others use functions within functions.php. So, how is Thrive supposed to reliably support such a thing? I don’t see a way they could do it and have it work universally… outside of what they’ve already done. Or, they’d have to require you’re using one of their own themes, but that’d feel pretty limiting.

So, I really don’t know how Thrive could build this function in. I think the global header/footer option is about the best they can do and ensure it will work on all sites. Otherwise, I think we’re stuck making a hack.

Thrive could make this easier, perhaps, by providing an actual programming hook into the header which we could access. Then, we could make this change once in our functions.php file and it would “stick” because it would hook right into the built-in after_body_open() file.

If I find out they have done this at some point, I will modify this post accordingly.

FILED UNDER: ,