Last active
January 12, 2021 05:12
-
-
Save neilgee/3a491c1cc1b143d2ff3b to your computer and use it in GitHub Desktop.
Adding Genesis Middle Header Widget 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
| /* | |
| *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%; | |
| } |
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
| <?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>'; | |
| } | |
| } |
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
can this method also be used to add three header widgets (left, middle and right?