How to have multiple Headers setup conditionally.

Vijay Kumar
(@vijaykumarim)

4 months, 1 week ago

How can I add multiple header/footer templates that show conditionally. For example I want to have seperate header for 50 pages and another header design for 50 other pages.

Now it seems we can only have one header sitewide. I want to control when to show which header using conditions like URL term containing or Title contains or anything similar.

Is this possible?

Viewing 1 replies (of 1 total)

(@devmuhib)

Hi @vijaykumarim,

1: Create Multiple Template Parts

/templates/partials/
    header-default.html
    header-alt.html
    footer-default.html
    footer-alt.html

Or via the Site Editor:

Go to “Template Parts” > Create new Header (e.g., “Header Alt”).

2. Modify header.html to Load Dynamically (via PHP)

Unfortunately, block themes use static HTML files, so to introduce conditional logic, you’ll need to override this behavior via PHP in your functions.php.

add_filter( 'template_include', 'custom_dynamic_header_template', 99 );

function custom_dynamic_header_template( $template ) {
    if ( is_page( array( 'about-us', 'services' ) ) ) {
        add_filter( 'block_theme_header_template', function() {
            return 'header-alt';
        });
    } else {
        add_filter( 'block_theme_header_template', function() {
            return 'header-default';
        });
    }

    return $template;
}

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.

Tags