Skip to content

Instantly share code, notes, and snippets.

@neilgee
Last active January 12, 2021 05:12
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save neilgee/3a491c1cc1b143d2ff3b to your computer and use it in GitHub Desktop.
Save neilgee/3a491c1cc1b143d2ff3b to your computer and use it in GitHub Desktop.
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
Copy link

carse007 commented Sep 5, 2015

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

@neilgee
Copy link
Author

neilgee 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