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 usingremove_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

Share this:

Like this:

Related

6 Comments

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?

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

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.