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 633 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 your comment

 

Related Tutorials..

Condition for Checking Current Post Category in Bricks

Condition for Checking Current Post Category in Bricks

How we conditionally display an element based on the current post's categories.
Categories:
Pro
Top Bar Above Sticky Header in Bricks

Top Bar Above Sticky Header in Bricks

How to set up a top bar above sticky header in Bricks Builder so only the header remains sticky when scrolling.
Categories:
Tags:
Bricks Condition for WishList Member

Bricks Condition for WishList Member

How to render a Bricks element only if the user has access to a specified WishList Member level.
Categories:
How to conditionally load your scripts based on an ACF field

How to conditionally load your scripts based on an ACF field

This tutorial provides the PHP codes that can be pasted in order to enqueue your scripts conditionally based on the value of an ACF field…
Categories:
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…
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
Custom Conditions in Bricks Builder

Custom Conditions in Bricks Builder

Updated on 22 Jun 2022 This Pro tutorial is a continuation of the previous Conditions in Bricks Builder tutorial. We are going to keep updating…
Categories:
Pro
Conditional Rendering Based On Meta Box Group’s Sub Field

Conditional Rendering Based On Meta Box Group’s Sub Field

This Pro tutorial shows how we can output an element on a single post pages only if a specified sub-field (custom field created using Meta…