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..

Conditional Rendering for Logged in/out Users by CSS Classes in Bricks

Conditional Rendering for Logged in/out Users by CSS Classes in Bricks

This tutorial shows how Bricks builder's bricks/element/render filter can be used to conditionally output elements having a class of logged-in to logged-in users only and…
Categories:
Conditional Output on the First Page of Archives in Bricks

Conditional Output on the First Page of Archives in Bricks

How to output an element on an archive page only if we're on the first page of the archive.
Categories:
Pro
Conditional Rendering of ACF Repeater Rows Based on True / False Sub Field in Bricks

Conditional Rendering of ACF Repeater Rows Based on True / False Sub Field in Bricks

This Pro tutorial provides the steps to modify a ACF Repeater query loop to only output the rows for which a True / False type…
Categories:
Pro
Day of Week Condition in Bricks

Day of Week Condition in Bricks

Displaying elements conditionally based on the current day of the week.
Categories:
Conditionally Hide a Section on a Specific Taxonomy’s Term Archives in Bricks

Conditionally Hide a Section on a Specific Taxonomy’s Term Archives in Bricks

A user asked: I have a CTA in the footer of my site, which I have custom fields on various templates, etc to populate. I…
Categories:
Conditionally Outputting Based on Query Count in Bricks

Conditionally Outputting Based on Query Count in Bricks

Update on 22 Sep 2023: There's a much simpler built-in method now. See this post. In the Bricks Facebook group a user asks: Is there…
Categories:
Pro
Conditional Output in Bricks based on if Content has Headings

Conditional Output in Bricks based on if Content has Headings

How to prevent the output of the table of contents if the content has no headings.
Categories:
Tags: