facebook_pixel
Want To Download A Step-by-Step Plan To Build Your Blog-Based Business? Click here to download it.

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

Check out the toolset which is my top recommendation – and the best bang for your buck – for anybody building an online business on top of WordPress. Thrive Themes truly is the best game, with themes and plug-ins which are conversion-focused. Read My Review.

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

I’m not going to try to explain this to non-developers. This writeup will only be understood by people used to hacking PHP code and WordPress themes.

When you build a landing page using Thrive, you can optionally do a full-screen takeover from your theme. See, one option is to insert Thrive elements into the content container of your main theme, thereby preserving your theme elements for that page. Or… you can take over the whole thing and build the page from scratch using Thrive Architect.

But, what about your header and footer?

What if you want to keep your header and footer consistent but change everything else? Most themes will use a fixed width container and that would constrain everything, but what if you want full width rows along with the header/footer?

For instance, take my homepage.

My homepage has the header and footer which I built using my primary theme (called Memberoni). But, everything else was built with Thrive. Full width backgrounds and everything.

Before I figured out how to fix this issue, I had to try to build my header and footers manually using Thrive Content Builder – on every page separately. It just didn’t look right. It led to visual inconsistencies between my pages built with Thrive and the ones which were strictly the theme. Plus, any change had to be made individually on each page.

But, I figured it out. 🙂

If you need any help with actually doing this, you can check out the Online Business Tech Support service.

The Secret Layout.php File

Both Thrive Architect and Content Builder have a global file which controls all landing pages. It is found in…

/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’ ) ?>

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

Next, I need to define my functions…

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.

2 Things To Keep In Mind

I generally try to avoid hacking plug-ins. The problem is that any upgrade will overwrite this file (layout.php) and you’ll need to do it again.

I have submitted a request to Thrive Themes to provide a built-in way to do this. I really think it adds to the overall flexibility of their product to provide the ability to have GLOBAL code as part of the Architect product. If they simply included a couple of hooks that developers could tap into that would solve it. They could also provide a global header/footer field which spans all pages.

It does appear Thrive is getting numerous requests for something along this lines, judging by this thread on their Facebook page. So, that’s a good sign.

The second issue is that you will likely have pages where you DON’T want your header/footer showing up. For instance, if you have a squeeze page, including your top navigation will harm conversion rates and you want a simpler page.

So, you need to be able to have exceptions.

You could just use IF statements in your code to only include the hooks on certain pages. Or you could use something like Advanced Custom Fields to set up checkbox fields on pages which you can then tap into. This would give you GUI control over whether the header or footer is included or not. Then do something like this…

function bma_global_footer() {
if (!(get_field(‘disable_site_footer’,$post->ID))) : ?>
/* FOOTER HTML HERE */
endif;
}

This is the footer code, but with an IF statement included which checks a custom field built using ACF. If that checkbox is checked, it disables the footer code and it will not be inserted into the landing page.

Happy hacking!

If you need any help with actually doing this, you can check out the Online Business Tech Support service.

If you’re a Lab member, ask away inside the Lab Community Forums and I’ll be happy to help you out.

Not a Lab member? You can fix that right here.