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' );