I have created an ACF radio button field ‘header-variant’ and assign it to all ‘page’ and ‘post’. I have also made two different header variants using Brick.
I have the code below wanting to display the corresponding header based on the radio value selected on a page (e.g. the homepage has the ‘Standard’ chosen in its radio button).
function display_custom_header() {
global $post;
$acfValue = get_field('header_variant', $post->ID);
if ($acfValue === 'Standard') {
echo do_shortcode('[bricks_template id="7"]');
} elseif ($acfValue === 'Overlay') {
echo do_shortcode('[bricks_template id="117"]');
}
}
add_action('wp', 'hook_custom_header');
function hook_custom_header() {
if (is_page() || is_single()) {
add_action('render_header', 'display_custom_header');
}
}
It doesn’t work at all, can someone please point out what have I done wrong?
I am using the Code Snippets plugin to add the code. Have also tried it in functions.php but no luck.
Go to Header. Create just one header (one template) but put both headers inside.
Best way is have the HEADER element, and two divs inside, head1 and head2.
In head1 put your menu, logo etc. Same for head2.
Then select head1 DIV, go to CONDITIONS (far left panel) and set dynamic condition:
Thank you for your help! I also discovered the method you recommended, and it has been working well so far.
Thank you for pointing out the issue with the code, though, it could also be useful for me as this method will only load one header as needed. I will try that out later.
With the container condition method, is it possible to not show the ‘inactive’ header variant in the Bricks editing screen? I am seeing both header variants at the backend by default, and this could be confusing for me and other developers/designers sometimes.
function display_custom_header() {
global $post;
$acfValue = get_field('header_variant', $post->ID);
if ($acfValue === 'Standard') {
echo do_shortcode('[bricks_template id="7"]');
} elseif ($acfValue === 'Overlay') {
echo do_shortcode('[bricks_template id="117"]');
}
}
add_action('template_redirect', 'hook_custom_header');
function hook_custom_header() {
if (is_page() || is_single()) {
add_action('render_header', 'display_custom_header');
}
}
But I still had no luck displaying either the [bricks_template id=“117”] or [bricks_template id=“7”] shortcodes. I intentionally changed [bricks_template id=“117”] to [bricks_templateTest id=“117”], and the exact shortcode value of ‘[bricks_templateTest id=“117”]’ was actually displayed in the header section in the frontend. I am not sure what could be wrong here.
Apologies, I didn’t pay close enough attention. the function hook_custom_header isn’t attached to anything… it’s never fired.
I would fold it into one function… I’m not able to test anything so… this is a guide more than working code…
function display_custom_header() {
if (is_page() || is_single()) {
if ( !is_bricks_builder_main) {
global $post;
$acfValue = get_field('header_variant', $post->ID);
if ($acfValue === 'Standard') {
echo do_shortcode('[bricks_template id="7"]');
} elseif ($acfValue === 'Overlay') {
echo do_shortcode('[bricks_template id="117"]');
}
}
}
}
add_action('template_redirect', 'hook_custom_header');
But honestly, this feels hacky and I’m not convinced it would work - I think conditions are better, or to use the built in method:
A useful video. To save you time, it adds the ACF header_variant field as a DATA-ATTRIBUTE into the header. Then you can target it with css. Depending how complex your header it might work for you (e.g. changing images/colors etc.) - but if you want a significant layout change, it wont.
This technique is great but the end user has to toggle for every new post they do. It would be great, if I could just use the correct toggle setting on my posts template, so it automatically works on all posts. I tried doing this and it doesn’t work.
