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

Last Updated on January 28, 2020  

UPDATE: I have developed an even cleaner way to do this since this post was originally written. So, check out the post, then I'll see you at the bottom.

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.

Another (Cleaner) Option

The method outlined above works, but I have found another way to do this. In many ways, it is much cleaner and requires less coding.

It involves simply creating a custom page template for your theme. The structure is as simple as it gets:

  • At the top of the template, you use get_header() to pull in the main theme header.
  • After that, simply pull in the post content using the_content()
  • Then, show the footer using get_footer()

You put nothing around the content itself. Since Thrive Architect will echo all of it's output to wherever you put the_content(), you will leave it "naked" in there. Therefore allowing you to control ALL formatting using Thrive Architect.

Just call this custom page template something like "Architect Page". Then, whenever you want to use it, you just select "Architect Page" as your page template.

It will use your primary header and footer, but everything in between will be controlled by Thrive. 

It will adapt to your theme's stylesheets, making it easy and visually consistent.

You can even go full width with the content using Architect and design any kind of page that you want.

Lastly, this method will be upgrade proof. When you upgrade Thrive Architect, you don't have to re-do the hack.

If you have any skills with WordPress themes, then this is child's play for you. But, if not, I have the actual code available to copy/paste inside our Over The Shoulder With Thrive Themes bonus course.

Here's some info...

Thrive Themes Bonus Training

Look over my shoulder while I show you some of the in's and out's of Thrive Themes tools, best practices, and some nifty tricks. You will also have a direct line to me to ask any question you want about Thrive so that I can be an additional line of support for you as you use these tools.

Access to this course is FREE as a bonus if you purchase Thrive Themes via our affiliate link. Click here to learn more.


TOPICS


Related Articles You Might Like:

Why I Switched Hosting Away From WP Engine… To WPX Hosting

  • Got a question! I recently created a footer under Thrive Dashboard>Global Elements. However, I can’t seem to make it show to all the pages of the site. Any idea how? I tried modifying one of the pages on my site but there is no “Page Setup” or “Global Settings” option. Anyway, I am using a Webify Theme.

    • David Risley says:

      If you’re using Webify, you won’t be able to get Thrive headers/footers to show on pages globally because that isn’t a Thrive theme. It would work if you’re using Thrive Theme Builder.

  • … other, question – what to insert in /* HEADER HTML HERE */ ? I am no coding nerd

    • David Risley says:

      That’d be the HTML code for your header. This is going to be difficult if you don’t have any HTML skills.

      • Damn x)
        I hoped is was to be solved easily…

        Thx though

  • Hi David, love this – BUT, how to do it the other way around?

    At least, my themes header sucks, and I want to make one with thrive – and have the thrive header stay consistenly throughout all blog-pages and landingpages.. Is this possible? Or a stupid way to do?

    Thx
    August

    • David Risley says:

      Hey August,
      Yeah, I’m not sure that would be possible. At least without some hacking. I mean, in theory, Architect is storing their headers in some location in the database, so in theory it could be queried out of there and shown in your theme. But, I can’t say I’d recommend it.

      If basic elements of your main theme suck so much, I’d recommend just switching themes rather than trying to hack it up using Thrive Architect.

      Also FYI, rumor is that Thrive is working on a universal theme. I assume the whole thing would be controllable via Architect. You could ask them about it.

  • Jason Stallworth says:

    Dude, I hope Thrive just creates a simple ‘press the button’ feature that allows you to bring over your normal header and footer to the landing page. I love Thrive but this is a bit frustrating.

    • David Risley says:

      I know. It definitely is. At the same time, though, I think they’ve done about the best they can do by providing the global header/footer option in Architect.

      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.

  • Another way to get a similar effect is to remove the margin from the main container with custom css (Thrive Dashboard -> Theme Options -> Style & Layout Settings):

    div .wrp.cnt {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    }

    This gives access to the full area between the Thrive-generated header and footer, as well as the option to do full-page takeovers.

    • David Risley says:

      That’s an interesting tip, but my goal with this hack was to include the main theme’s header into a Thrive page. Not to do a full page takeover.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >