Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adding Genesis Middle Header Widget Area
/*
*Edit Alignment and percentage values to suit, add in CSS attributes like padding
*/
.site-header .title-area {
width:25%;
}
.site-header .header-middle {
width:25%;
text-align: center;
float: left;
}
.site-header .header-widget-area {
width:50%;
}
@media only screen and (max-width: 767px) {
.site-header .title-area,
.site-header .header-middle,
.site-header .header-widget-area {
width:100%;
}
<?php
//do not copy the opening php tag above
/**
* Add Middle Header Widget
*
* @package Middle Header Widget
* @author Neil Gee
* @link https://wpbeaches.com/create-middle-header-widget-genesis-child-theme/
* @copyright (c) 2014, Neil Gee
*/
//Add in a Middle Header Widget Area that sites between the .title-area and header right widget area.
add_action( 'widgets_init', 'genesischild_extra_widgets' );
// Register in new Widget area
function genesischild_extra_widgets() {
genesis_register_sidebar( array(
'id' => 'header-middle',
'name' => __( 'Header Middle', 'genesischild' ),
'description' => __( 'This is the Header Middle area', 'genesischild' ),
'before_widget' => '<div class="header-middle-area">',
'after_widget' => '</div>',
) );
}
remove_action( 'genesis_header','genesis_do_header' );
add_action( 'genesis_header', 'themeprefix_genesis_do_header' );
// Add in the new header with the middle widget header
function themeprefix_genesis_do_header() {
global $wp_registered_sidebars;
genesis_markup( array(
'html5' => '<div %s>',
'xhtml' => '<div id="title-area">',
'context' => 'title-area',
) );
do_action( 'genesis_site_title' );
do_action( 'genesis_site_description' );
echo '</div>';
genesis_widget_area( 'header-middle', array(
'before' => '<div class="header-middle widget-area">',
'after' => '</div>',
) );
if ( ( isset( $wp_registered_sidebars['header-right'] ) && is_active_sidebar( 'header-right' ) ) || has_action( 'genesis_header_right' ) ) {
genesis_markup( array(
'html5' => '<div %s>' . genesis_sidebar_title( 'header-right' ),
'xhtml' => '<div class="widget-area header-widget-area">',
'context' => 'header-widget-area',
) );
do_action( 'genesis_header_right' );
add_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
add_filter( 'wp_nav_menu', 'genesis_header_menu_wrap' );
dynamic_sidebar( 'header-right' );
remove_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
remove_filter( 'wp_nav_menu', 'genesis_header_menu_wrap' );
echo '</div>';
}
}
@carse007

This comment has been minimized.

Copy link

commented Sep 5, 2015

can this method also be used to add three header widgets (left, middle and right?

@neilgee

This comment has been minimized.

Copy link
Owner Author

commented Oct 4, 2015

Yes you could effectively do that too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.