Created
March 15, 2024 16:28
-
-
Save contemplate/b7cd74c657065b89ee5e3b0af774e5a7 to your computer and use it in GitHub Desktop.
Divi Theme: Replace Top Header with a Header Sidebar Area
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Register custom sidebar | |
function custom_register_sidebars() { | |
register_sidebar( array( | |
'name' => 'Header', | |
'id' => 'header_sidebar', | |
'description' => 'Widgets in this area will be shown in the header.', | |
'before_widget' => '<div id="%1$s" class="widget %2$s">', | |
'after_widget' => '</div>', | |
'before_title' => '<h2 class="widgettitle">', | |
'after_title' => '</h2>', | |
) ); | |
} | |
add_action( 'widgets_init', 'custom_register_sidebars' ); | |
// Hook into et_html_top_header filter | |
function custom_header_sidebar_content( $top_header ) { | |
ob_start(); | |
// Check if Header sidebar has widgets | |
if ( is_active_sidebar( 'header_sidebar' ) ) { | |
echo '<div id="top-header">'; // Start the wrapper div | |
dynamic_sidebar( 'header_sidebar' ); // Display widgets | |
echo '</div>'; // Close the wrapper div | |
} else { | |
echo $top_header; // If no widgets, display original content | |
} | |
$content = ob_get_clean(); | |
return $content; | |
} | |
add_filter( 'et_html_top_header', 'custom_header_sidebar_content' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Instructions:
Add some text in the Appearance -> Customizer -> Header & Navigation -> Header Elements -> Phone Number in order to trigger the top header showing. If a widget exists in the Header sidebar area it will replace the normal Divi Top Header content with the widget.
Pro Tip:
Use a plugin like https://wordpress.org/plugins/shortcodes-for-divi/ so you can build a header design in the Divi Library and then use the shortcode to add to the header widget.