How to override the header template in Sydney

Please note: Sydney already includes many pre-built header template, so you might want to try those before coding a new one.

The Sydney theme allows for flexible customization of its header layouts for both desktop and mobile views. You can easily override these layouts using the provided filters: sydney_header_layout (for desktop) and sydney_header_mobile_layout (for mobile).

Requirements

To add your custom code, you need to either use a child theme or a specific plugin for this, for example Code Snippets.

Overriding the desktop header

Here’s an example of how filtering the header using the sydney_header_layout would look like.

function my_custom_header_markup() {
   ?>
        <div class="my-custom-desktop-header">
            <h1>Custom Desktop Header</h1>
            <nav class="custom-nav-menu">
                <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
            </nav>
        </div>
   <?php
}
add_filter( 'sydney_header_layout', 'my_custom_desktop_header_layout' );

Overriding the mobile header

In addition to filtering the desktop header, you can also filter the mobile header in a similar fashion:

function my_mobile_custom_header_markup() {
   ?>
        <div class="my-custom-mobile-header">
            <h1>Custom Mobile Header</h1>
            <nav class="custom-nav-menu">
                <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
            </nav>
        </div>
   <?php
}
add_filter( 'sydney_mobile_header_layout', 'my_custom_desktop_header_layout' );