By the end of this article, you’ll know the easiest way to remove the Header and Footer on the different pages, templates, Custom Post Types and layouts you build inside of Bricks Builder.
HINT: The best way to disable the header and footer is NOT like the below:
Because… even though this does indeed work…
There is another way you can achieve this same result that is:
- Much easier to manage as your website grows
- Allows you to disable the Header and Footer per post type and more.
- Plus a few other benefits I’ll explain in this article.
Keep reading to see the best way to hide your Header and Footer in Bricks Builder.
The TWO ways you can remove the Header and Footer in Bricks Builder
YAAAASS – there are indeed two ways to do this, which is why I decided to make this post. I’ll show you each of the ways you can do it and then you can decide which one best suits your use case.
Firstly – in the image above, that is what I refer to in this article as Method 1 (the per-post method).
Method 2 is far superior and is the method you should use (and I’ll explain what Method 2 is very shortly).
When you use Method 2 to turn off the header and footer in Bricks Builder:
- You can see on one page in the admin area ALL the pages / custom post types / templates that you’ve disabled the header and footer on.
- You will be able to set show/hide rules on a per Post Type basis, per Template basis, and much more.
Overall, by the end of this article, you’ll see why you don’t want to turn the Header and Footer off like the image above.
But first – I want to go through some examples of where I had to disable the header and footer recently on my website, because by doing this – the advantages of Method 2 will become a lot more apparent later on.
The Video Tutorial
Here is the entire Blog Post as a Video Tutorial, in case you’d rather watch a video than read the Blog Post (but I’d recommend you do both to get the most out of this tutorial).
Examples: Why I removed the Header and Footer from my website
I recently needed to remove the Header and Footer from the pages I was building using the WooFunnels plugin for WordPress.
I was using ClickFunnels previously for all my Sales Funnels but I decided to replace it with WooFunnels because WooFunnels has a lot more functionality and WooFunnels is a much cheaper alternative for ClickFunnels.
Build ENTIRE Sales Funnels inside WordPress, with One-click Upsells and much more!
My WooFunnels ReviewWhen you install WooFunnels, you create your Sales Funnels under WooFunnels > Funnels and the steps you add into your funnel are actually Custom Post Types.
Some of the Custom Post Types that WooFunnels uses are:
- wffn_optin (optin pages)
- wffn_oty (optin thank you page)
- + a few more.
Now, because sales funnels are really just a series of pages showing one-after-another, I realised that WooFunnels is the best plugin to use to make a Coming Soon page in WordPress.
And so, I wrote an entire WordPress tutorial that shows you how to use WooFunnels to create a Coming Soon page.
RELATED: WooFunnels: The BEST Coming Soon Page plugin for WordPress in 2022 (see why…)
In that tutorial, I needed to remove the Header and Footer from all the steps inside the Coming Soon page funnel.
So that I could turn this Coming Soon page…
Into this design with no Header or Footer…
It’s a really good tutorial that’ll show you a bit more about how WooFunnels works (in case you’re looking for a Sales Funnel plugin for WordPress).
But that’s a good example of when I needed to do it for myself and one you might use for your business.
So, let’s get into the two ways I found that you can hide the Header and Footer in Bricks Builder and go through the pros and cons of each method.
Firstly, let’s start with the first method you have available to you.
Method 1: Per-Post
We will keep running with this Coming Soon page example for the rest of this tutorial because it’s going to help explain what we’re doing.
Let’s say we wanted to build a Coming Soon page and we didn’t want to use WooFunnels or another plugin to do so.
What we could do is go to Pages > Add new.
Next, we create a new page called Coming Soon and then click Edit With Bricks to design our page.
And once the Bricks Builder editor loads, you can see that we are now editing the Content area of our page at (2) but the Header (1) and Footer (3) are showing.
From this page, we can go ahead and hide the Header and Footer by going to Settings > Pages Settings.
Then click on General.
And then you can disable the Header at (1) and Footer at (2), which you can see has worked at (3).
So this is Method 1 and I am calling this the Per-post Method, because… well… we’re disabling the Header and Footer elements for each specific post / page.
Now, I actually don’t use this method myself because I find Method 2 much easier to manage (and my brain works better with Method 2).
Let’s now look at the second way you can disable the Header and Footer in Bricks, Method 2.
Method 2: Remove per Template
The best way to remove the Header and Footer in Bricks Builder is to set the Header / Footer templates not to show under specific conditions, as I’ll show you now.
Go to your WordPress admin area and then to Bricks > Templates.
Find your Header template and then click Edit with Bricks (2).
Once you’re in the Bricks Builder editor…
Go to Settings > Template settings.
And then click on Conditions.
Proceed to set the conditions under which you want this Header Template to output.
Usually, you will want to set it to something similar to the image below, where I show the Header for the Entire Website but then I go ahead and add some exclusion rules.
In the above image, my Header will output on my Entire Website, except for my individual Coming Soon page.
If I save my Header Template with these above conditions and then go and reload my Coming Soon page in Bricks Builder, you can see that now the Header is not showing.
I would repeat the same process for the Footer Template and that would give me the result below where both the Header and Footer are not showing on my Coming Soon page.
TIP for using the Per-template method
If you do decide to use Method 2 like I do (per template), you can also go to your WP Admin area and then Bricks > Templates to view all the conditions you have for each Template, as shown in the image below.
This is one of the reasons why I love the per template method more than the per post – it’s a lot easier to see where you’re showing and hiding templates on your website.
Hide the Header and Footer on Custom Post Types
You will use the per template Method 2 to show and hide your Header and Footer in Bricks Builder for Custom Post types, Post Type Archive pages, Taxonomy Archives and pretty much anything to do with WordPress templates.
I like to run with real-world ideas to help explain things, so let’s find another one.
Here on WagePirate.com, I have this button currently in my main menu that says “Start Your Store”.
When people click this button, they are taken to my Optin page where I explain a course I have that helps people start a store with WooCommerce.
When people click the button Start Free Course (above at 1), I show them an Opt-in form where they can enter their email address to get access to my course.
Here is an animation that show’s how this all works.
As you will notice, on this page, there is no Header or Footer.
That’s because I don’t want to distract the user – I want to draw them into clicking the button and putting in their email address so I can build my Mailing List while giving them access to this free course.
This intention of removing distractions from the user is something you pretty much ALWAYS want to do for any Sales Pages, Opt-in Pages and Upsell pages you’ll create for your business – so that the user focuses only on progressing to the next step in the funnel you’ve created.
If you’ve been following my blog here for a while or watching my YouTube videos, you will know that I use the WooFunnels plugin on every website I own.
I use WooFunnels to build all my Sales Funnels, all my Optin Funnels and to make my post-purchase One-Click Upsells for WooCommerce.
Build ENTIRE Sales Funnels inside WordPress, with One-click Upsells and much more!
My WooFunnels ReviewI also use WooFunnels to customize my WooCommerce checkout page to look like Shopify’s.
When you install WooFunnels, it creates a few different Custom Post Types, such as:
- wffn_optin (optin pages)
- wffn_oty (optin thank you page)
- wffn_landing (for sales pages / landing pages)
- + a few more.
If we continue with this example from my website, we can check the source code and see that this Optin Page is using the wffn_optin post type, as expected.
Because I want ALL my Optin Pages to NOT output my Header, I can edit the Header Template in Bricks and update the conditions to be like the below at (3) where I have excluded the Post Types that WooFunnels uses.
After doing that, I can go back to Bricks > Templates and see all the conditions I have set for all my templates, including these new changes we just made to exclude the Header per Post Type.
And just to round out this tutorial, you can combine your conditions to exclude entire post types AND individual posts / pages / custom posts, if you so wish.
For example, in the below, I have updated our Header template to show on our Entire Website, excluding:
- All the WooFunnels post types
- Our Cart Page
- Our Contact Page
How to Display the Current year in the Footer using Bricks Builder
Another tip I have for Bricks Builder is to get used to using the dynamic data that Bricks Builder has available in it.
Below is a blog post where I show you how you can dynamically output the current year using a Shortcode in WordPress.
At the end of this article, I show you how you can easily output the current year in the footer in Bricks Builder WITHOUT using a Shortcode, using the Dynamic Data feature available inside of Bricks.
It’s definitely worth reading! – here is the link below…
RELATED: How to Display the Current Year in WordPress With a Shortcode – 2022 UPDATED!
