11th Jun '24
/
3 comments

Disabling Bricks’ Header & Footer Conditionally with Custom Fields

Unlike element conditions, when it comes to setting conditions for templates in Bricks there isn’t a ‘dynamic data’ option in the dropdown that we can use to get values from custom fields. However, you may wish to give content editors the ability to disable headers or footers on specific posts/pages using custom fields.

Let’s go through how we can do it..

Using Filters

Bricks has two filters, ‘bricks/render_header’ and ‘bricks/render_footer’, which can be used to override the HTML that is output for the header and footer.

We can use these to change the output conditionally based on a custom field.

In this example, we’ll use ACF’s True/False field.

Step 1.

Create two True/False custom fields, ‘disable_header’ and ‘disable_footer’. Apply these to the post types needed.

Step 2.

Use Bricks’ filters to change HTML output conditionally.

Here’s we’re first checking if is_singular(), to make sure we’re only affecting single post/pages, and then checking if the custom field for the current post is true. If true, nothing is rendered.

Add this code to your child theme functions.php file, or code snippet plugin.

/* do not render header if disable_header field is true */
add_filter('bricks/render_header', function( $header_html ) {
	return is_singular() && get_field('disable_header') ? '' :    $header_html;
});

/* do not render footer if disable_footer field is true */
add_filter('bricks/render_footer', function( $footer_html ) {
	return is_singular() && get_field('disable_footer') ? '' : $footer_html;
});

That’s it

Get access to all 613 Bricks code tutorials with BricksLabs Pro

3 comments

  • This was so easy and so amazing. Bravo David!

    Can the same logic apply to turn on and off a transparent header using ACF true/false in a per-page basis?

  • Nice, easy and really helpful. Thank you!

  • Michael van Dinther

    Easy!

Leave a Reply to Michael van Dinther (Cancel Reply)

 

Related Tutorials..

Sticky Header in Bricks

Sticky Header in Bricks

Updated on 15 Nov 2022 Bricks has a handy sticky feature that enables us to build two types of sticky headers: Also, we can specify…
Categories:
Pro
Conditionally outputting an element in a Query Loop based on date-type custom field

Conditionally outputting an element in a Query Loop based on date-type custom field

This Pro tutorial shows how to output an element in a Bricks' query loop only if the value of a date-type of custom field for…
Categories:
JetEngine Checkbox Condition in Bricks

JetEngine Checkbox Condition in Bricks

How elements in Bricks can be conditionally output depending on the selected option from a JetEngine checkbox field.
Categories:
Tags:
Create A Customizable AJAX Add To Cart Button In Bricks Builder

Create A Customizable AJAX Add To Cart Button In Bricks Builder

In Bricks, you can simply create an Add To Cart button from a dynamic data / function {woo_add_to_cart}. This button supports AJAX as well if…
How to Push The Footer Down in Bricks

How to Push The Footer Down in Bricks

Looking to have the footer stay at the bottom of the browser window in your Bricks site? Simply add this CSS: There are several places…
Categories:
Tags:
[Function] Current Term Has Children

[Function] Current Term Has Children

Updated on 20 Jul 2024 A user asks: I'm working on an archive template for WooCommerce products. I'm trying to hide a section if there…
Pro
Conditional CSS in Bricks based on Post Meta

Conditional CSS in Bricks based on Post Meta

In the Bricks Facebook group a user asked: Hi, how do you normally control margin, padding and font-size using dynamic data? I'm looking for the…