Skip to content

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.

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

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

10 Comments

  1. Ashley K on September 25, 2019 at 3:41 pm

    Hi,

    I have been trying to edit Genesis header but no luck. I want to change the position of header but it looks like there is no theme option available for that.

    Is there any way I can do that please share a proper doc here.

    Thanks

  2. Mark Karl on May 14, 2019 at 9:11 pm

    The Genesis theme is not for trailblazers with electric razors. It’s more for balding pop stars who su-sudio their way through life. In other words, Genesis is not really meant to be modified. If you want a modifiable theme, use the base 2019 (or whatever year) default WordPress theme. Yeah, it’s ugly and they have no concept of the top-heavy penalty, so you’ll need to clean it up. But at least it can be done.

    Genesis is designed to be a black box with minimal code that can be edited directly. You can get into the code, but then it will be clobbered with every update to the theme.

    My advice — just live with it. I just spent 4 hours trying to get the site name added to the html title. Well, that’s not easily exposed via the text theme editor. I can FTP in and get into the code, but it will get clobbered. So I just decided to leave it as is. My html titles will no longer contain my site name. It’s a compromise I made to make my life easier. It bugs the F out of me. These things should be easy to change.

    For example, go to the theme editor — wheres the F’ing header.php? Footer? Oh, you have to suppress the footer with some code and enter the footer in an admin form. It’s idiotic because Genesis is designed for idiots.

    It makes me laugh when I read about how amazing and well-coded Genesis is. Having been a Java EE developer for 10 years, and having done the Microsoft garbage for 4 years before that, I can honestly say the Genesis theme is the worst code I have seen in my life. They got the cheapest people they could find to work on it.

    • Adam Kingston on May 18, 2019 at 9:20 pm

      It took me about five minutes to figure out how to add the site name to the HTML title. You may find the Visual Hooks Guide helpful:
      https://genesistutorials.com/visual-hook-guide/

      Why are you using the theme editor? It’s not fit for purpose, and that’s nothing to do with Genesis. I don’t know a WP developer who uses the editor and if I remember correctly you’ll have received a warning suggesting that you don’t.

      What do you mean it will get clobbered? Nothing you change in your child theme will be overwritten by updates to WP or the framework.

      I’ve no idea why you’re entering your footer in an “admin form” – you can add a custom function to functions.php if you wish, or create a widget and build your footer in the customizer, or use the Simple Hooks plugin…

  3. Kosta Kondratenko on February 15, 2019 at 4:44 am

    This is very confusing for me – I am trying to add one element into the header of a Gensis theme and I cannot work it out for the life of me. I’ve been doing WordPress development for a long time and this seems so confusing to me. I don’t want to replace the header because it is all ready setup – I just want to edit the HTML. Where do I edit the HTML?

  4. 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!

  5. 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?

  6. 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!

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

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

    Great article.

Leave a Comment





Scroll To Top