Changing the Genesis Header HTML Structure and MarkUp Code

In Genesis Themes you can completely change the header structure HTML  by overriding the default code from the parent Genesis theme and use your own header mark up in your Child Theme. Two types of markup can be overridden the structure and the markup.

Overriding Genesis Header Structure

The header structure content in Genesis is controlled by the code in the parent theme in the file…

genesis/lib/structure/header.php 

The three functions that control the header are:

  • genesis_header_markup_open
  • genesis_header_markup_close
  • genesis_do_header

The functions are pretty self explanatory, 2 of them contain the actual opening and closing markup and the genesis_do_header is the ‘meat in the sandwich’.

They need to be removed by the action hook that added them in

  • add_action( ‘genesis_header’, ‘genesis_header_markup_open’, 5 );
  • add_action( ‘genesis_header’, ‘genesis_header_markup_close’, 15 );
  • add_action( ‘genesis_header’, ‘genesis_do_header’ );

So in your functions.php you would remove the initial action by changing what you are doing by using remove_action, then you would add in your own header functions and add them in to the same hook ‘genesis_header’ using add_action.

<?php // <- Don't add me in
// Gist updated to use code from Genesis Framework 2.4.2
//remove initial header functions
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
remove_action( 'genesis_header', 'genesis_do_header' );
//add in the new header markup - prefix the function name - here sm_ is used
add_action( 'genesis_header', 'sm_genesis_header_markup_open', 5 );
add_action( 'genesis_header', 'sm_genesis_header_markup_close', 15 );
add_action( 'genesis_header', 'sm_genesis_do_header' );
//New Header functions
function sm_genesis_header_markup_open() {
genesis_markup( array(
'html5' => '<header %s>',
'context' => 'site-header',
) );
// Added in content
echo '<div class="header-ghost"></div>';
genesis_structural_wrap( 'header' );
}
function sm_genesis_header_markup_close() {
genesis_structural_wrap( 'header', 'close' );
genesis_markup( array(
'close' => '</header>',
'context' => 'site-header',
) );
}
function sm_genesis_do_header() {
global $wp_registered_sidebars;
genesis_markup( array(
'open' => '<div %s>',
'context' => 'title-area',
) );
do_action( 'genesis_site_title' );
do_action( 'genesis_site_description' );
genesis_markup( array(
'close' => '</div>',
'context' => 'title-area',
) );
if ( ( isset( $wp_registered_sidebars['header-right'] ) && is_active_sidebar( 'header-right' ) ) || has_action( 'genesis_header_right' ) ) {
genesis_markup( array(
'open' => '<div %s>' . genesis_sidebar_title( 'header-right' ),
'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' );
genesis_markup( array(
'close' => '</div>',
'context' => 'header-widget-area',
) );
}
}
view raw structure.php hosted with ❤ by GitHub

In the above gist there is just one extra div added for a mark up task I needed – otherwise the code is the same as the original Genesis code.

Overriding Genesis Header Markup

The markup the builds the structure and head meta info as well as the opening site container content can be found in genesis/header.php

<?php
/**
* Genesis Framework.
*
* WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances.
* Please do all modifications in the form of a child theme.
*
* @package Genesis\Templates
* @author StudioPress
* @license GPL-2.0+
* @link http://my.studiopress.com/themes/genesis/
*/
do_action( 'genesis_doctype' );
do_action( 'genesis_title' );
do_action( 'genesis_meta' );
wp_head(); // We need this for plugins.
?>
</head>
<?php
genesis_markup( array(
'open' => '<body %s>',
'context' => 'body',
) );
do_action( 'genesis_before' );
genesis_markup( array(
'open' => '<div %s>',
'context' => 'site-container',
) );
do_action( 'genesis_before_header' );
do_action( 'genesis_header' );
do_action( 'genesis_after_header' );
genesis_markup( array(
'open' => '<div %s>',
'context' => 'site-inner',
) );
genesis_structural_wrap( 'site-inner' );
view raw markup.php hosted with ❤ by GitHub

To override this content just make a header.php in your Genesis child theme with the same content and adjust the markup accordingly.

6 Comments

  1. Jack on May 13, 2017 at 5:21 pm

    Great article! Thank you.

    Is there any way to call a second separate header file in Genesis, for example, header-iframe.php using get_header(‘iframe’).php? I find this really easy to do in underscores by creating a custom page template and calling get_header(‘foo’).php as an example.

    Can you point me some kind of reference that shows how I can do this with Genesis Sample child theme?

    Thanks for any help!

  2. Damiand on August 31, 2016 at 3:40 pm

    Thanks for this. For some reason, I now have two title areas in my header. The Div id is identical, so I am not able to get rid of them. Any idea why two title-headers are outputting?

  3. Ricky on August 24, 2015 at 10:26 am

    Thanks for this post Neil!
    You really helped me solve an issue with a site deisgn I’m working on with this article.

    Have a nice day!

  4. Terrie on August 4, 2015 at 9:25 am

    Hi there,
    You recently helped me with slicknav (thank you!!) Now, I want to replace the default header on a custom page template. I need a different background image and logo. Easy to remove the header functions but struggling with adding the custom header functions. Any input would be greatly appreciated!
    Thanks

    • Neil Gee on August 6, 2015 at 12:34 am

      Sounds like you may be able to get away with it with CSS.

      If both the header and logo are applied as background images, set a unique Custom Body Class in the Genesis meta-box for that page just under ‘Layout Settings’ and set the CSS accordingly for the 2 background images, one for the header and one for the logo.

  5. Michael H on July 25, 2015 at 1:35 am

    Great article.

Leave a Comment





%d bloggers like this: