Customize Genesis: Move Header Above the Wrap with Structural Action Hooks

Earlier this year I wrote a post on how to move the header and footer outside the structural wrap in a Genesis child theme. The instructions I laid out in that post didn’t apply to every single StudioPress child theme (not all themes fit the same structural mold). I’ve had multiple questions related specifically to moving the header in the Prose Child Theme, so here are the specifics on how to do that!

Note: I have not tested these instructions on other Genesis Child Themes, but the principles should still apply.

Default Structure of Prose

I like to use the Firebug browser plugin (available on Firefox, Chrome, or Safari) to see what’s going on with the HTML and CSS behind the scenes on a web page. Using it on the Prose theme, I can see that the default structure is this:

Prose Child Theme HTML Structure

There’s the main wrap (id=”wrap”) and then we get the nav, header, inner, and footer widgets. Note that the footer div is already outside the main wrap. We don’t have to do anything to move it, but you can add some CSS to make it stretch the full width of the screen.

When we’re done with this tutorial, the header will be bumped up over the main wrap, like this:

Prose Child Theme Modified Structural Wraps

Move Your Genesis Header Above the Main Wrap

We’re about to bust out with some Genesis structural action hooks. You ready?

For those of you that just want the code, here it is:

/** Reposition header outside main wrap */
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 ) ;

add_action( 'genesis_before', 'genesis_header_markup_open', 5 );
add_action( 'genesis_before', 'genesis_do_header' );
add_action( 'genesis_before', 'genesis_header_markup_close', 15 );

If you’re using Prose, plop that in your Genesis > Custom Code > Custom Functions box. If you’re referring to this tutorial for a different Genesis child theme that doesn’t have a Custom Code menu option, then add this to your functions.php (or wherever you add custom code to your theme).

Let’s talk about WHY this code works.

The first three remove_action() hooks will unhook the header (and header markup divs) and get rid of the default Prose layout.

/** Ditch the Genesis header structural markup and the header code*/
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 ) ;

The last three remove_action() hooks will re-hook the header into your theme right after the opening tag (which also happens to be outside the main wrap).

/** Add in Genesis header structural markup and header code */
add_action( 'genesis_before', 'genesis_header_markup_open', 5 );
add_action( 'genesis_before', 'genesis_do_header' );
add_action( 'genesis_before', 'genesis_header_markup_close', 15 );

Okay, makes sense. But what’s up with those numbers at the end?? Read on.

Get your priorities straight

Those numbers we’re passing to our action hooks tell WordPress the order (or priority) to fire off our code. The default priority is 10 – lower numbers are executed earlier and higher numbers later.

The action hooks above are listed in order: 5, 10 (it’s a “silent 10″), and 15. This makes sure the code executes in the right order, first with genesis_header_markup_open, then sandwiching in our genesis_do_header code, and finally, wrapping it up with genesis_header_markup_close.

Bonus Code for Footer

Since the Prose theme places the footer outside of the main wrap, we don’t need to move it. BUT, if you’re reading this post and working with a theme that has the footer inside the main wrap and would like to move it below, you can try this:

/** Reposition footer outside main wrap */
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 ) ;

add_action( 'genesis_after', 'genesis_footer_markup_open', 5 );
add_action( 'genesis_after', 'genesis_do_footer' );
add_action( 'genesis_after', 'genesis_footer_markup_close', 15 );

These structural action hooks follow the same pattern as the code we used for the header. First we unhook the footer (and its markup) from the default location and then we hook it back in where we want it. If the concept of hooks and their location is new to you, I highly recommend taking a look at this visual hook guide. You can even install the Genesis Visual Hook Guide plugin to see hooks in action in your own theme.

That’s all, folks!

If you’d like to see CSS samples to customize Genesis with a full-width header or footer, just leave a comment below.

Comments

  1. says

    Great Article, and great tip on priorities. I think it’s one of those things that’s constantly over looked.

    I usually use css to get the same effects, and add the structural class wraps. I like your way though, probably less coding and less thinking involved =)

    Great article!

    • Carrie Dils says

      I like the CSS route, too. Sometimes a theme needs both, depending on whether the width is set as part of the body or the #wrap. Thanks, Jonathan!

  2. Angela says

    Thank you for this! I and brand new to wordpress/Genesis and have NO coding knowledge whatsoever (which is why I went with Prose!) . I managed to follow your tutorial just fine – however now I am wondering what I do to get the header and footer to be full width now that it is outside the wrap area? Does this need to be accomplished in the Coding Editor section? Thanks :)

    • says

      Hey Angela,
      Yep, you can add your custom CSS to Genesis > Custom Code. With Prose, the site width is specified in the body tag, so you’ll need to make your body 100% and then go back and and make the inner elements a fixed width.

      Try this:


      body {
      width: 100%;
      }
      #header .wrap,
      #footer .wrap,
      #footer-widgets .wrap {
      margin: 0 auto;
      max-width: 970px; //This is the default Prose width, but you can change it if you want.
      }

      If you wanted to change the background color for your header & footer, you could do something like this:


      #header, #footer {
      background-color: #666;
      }

      See if that helps. Feel free to come back and post a link to show off your progress. :)

      Cheers,
      Carrie

      • says

        Hi Carrie,

        How do I make the header image full-width and keep the menu aligned with the content? The code above made my menu longer (I might end up keeping that way) but keeps my header image aligned with my content.

        Thanks. I appreciate your help.

        • says

          Hi Jonsky,
          Typically you’ll make your outer wrap (maybe .header or #header in your CSS) 100% and then have your inner menu wrap (maybe .wrap) be set to a fixed width and the margin set to “0 auto” to center.

          If that doesn’t work, post the URL in question and I’ll take a look.

          Cheers,
          Carrie

          • says

            Hi there,
            Try confining your #nav .wrap to a width of 960px and setting your margin to center. So it would look like this:

            #nav .wrap {
            margin: 0 auto;
            width: 960px;
            }

            Same principle will apply to your second menu.
            Carrie

      • says

        Carrie,

        Thank you for this quality tutorial. I am running prose on my website. What I want to achieve is to have the footer run the entire length of the page but not the header. Is this possible? I used your code you gave Angela and it did both. Help?

        Thanks!
        Michelle

  3. says

    Yay!

    It worked! Thanks so much! IThat made it so much more clear – I thought I had to go to Appearance – Editor to make changes and it was overwhelming to figure out what was what – but just cutting and pasting into the Custom section is a piece of cake! That makes sense to me.

    My site is so new – I havent even made a post yet, but I am trying to get a basic design down first! The site is http://hereiamnowwhat.com/

    Thanks again so much!

    :)

  4. says

    I just discovered your blog and it is a lifesaver!

    Can you offer a suggestion on here or via email?

    I’m using Prose, and have added all the above code as written. However, my site looks wonky. (Official, technical term.) Here’s the site: http://www.tobystevens.net

    The order appears as such:

    Header Image – within body frame?
    Nav Menu – full-width
    Blog content – within body
    Footer Widgets – full-width
    Footer – within body frame?

    What am I missing?

    • says

      Hi Ellen,
      You just need a few CSS tweaks. You’ve got your #header at max-width: 940px. Remove that so that it can be full width and then specify your max-width for your #header .wrap.

      Remove this line from your #footer-widgets .wrap – border: 1px solid #FFFFFF; and that’ll get rid of the odd border.

      Do you use Firebug for Firefox or Chrome? It makes trouble-shooting CSS 100x easier. :)

      Carrie

      • says

        I’ve tried all of these (header width and footer border) and something is still not working. Any other ideas?

        Also, what is Firebug?

        Thanks for your patience.

        • says

          If you can avoid being grossed out by the bug icon, check out: https://getfirebug.com/. You can install it as browser add-on for Firefox or Chrome. Then, you can right-click any element on your browser page and select “inspect element” – it shows you the CSS behind a specific element on the screen. Even lets you live edit the CSS to figure out what changes you need to make to your stylesheet.

          It’s awesome.

  5. says

    Hi,

    How would I reposition a custom widget area outside the wrap? I’m on the metro theme and the footer is already outside the wrap. I see in the functions it was done with exact code you listed here. I’ve created the widget to hook before the footer but it shows up in the wrap.

    Thank you,

    Doug

  6. says

    I just figured it out. I had this: add_action( ‘genesis_before_footer’, ‘metro_home_contact’ ) and I changed it to this: add_action( ‘genesis_after’, ‘metro_home_contact’, 2 ). I pieced it together on a whim after reading your post. Thank you.

  7. Cubik says

    Hello and thank you for your post!

    Unfortunately, this didn’t work for me and I a little puzzle by what is happening.
    I am creating a brand new child theme, from the latest GENESIS 1.9.1 and I simply wanted to move header and footer out of the wrap.
    I’ve created a new functions.php file in my own theme directory and added your lines of code to reposition header and footer.
    It did add a header and footer out the wrap but it didn’t remove the original header and footer.
    So now I have 2 headers and 2 footers, one inside the wrap and one outside.

    For a test, I installed the prose theme, and it works as supposed, with the footer out of wrap. I checked its functions.php file and it matches the the lines for the footer on your post.
    So I was wondering if you could help me understand why the same lines of code would work on the Prose theme but not on my own brand new theme…

    Thank you for you help

    • Cubik says

      I’ve just figured it out!!!
      these lines needed to be added at the top of the functions.php file:

      /**
      * Include Genesis theme files
      */
      require_once(TEMPLATEPATH.’/lib/init.php’);

      and it works!

      thank anyway :-)

  8. Bud Fawcett says

    Carrie, thanks for your info. I have moved the header above the wrap but I would also like to center the header to the browser window and have it follow the wrap rather than having it flush left to the browser. Any advice.
    thanks
    Bud

    • says

      Hey Bud,
      You’ll want to make sure there’s a width set on the parent element containing the logo (probably ‘header’). Once that’s done, make sure that float isn’t specified (float: none) and that your margin is set for centering (margin: 0 auto).
      Carrie

  9. Bud Fawcett says

    I guess the natural question to follow is how to move the menu nav as well above the wrap (full width menu with the menu items aligning with wrap) so that it stays with the header and looks normal. Thanks

    • Candy says

      Never mind! I found the answer using this … :)

      // Relocate footer widgets
      remove_action( ‘genesis_before_footer’, ‘genesis_footer_widget_areas’ );
      add_action( ‘genesis_after’, ‘genesis_footer_widget_areas’, 1 );

  10. says

    Hey, I stumbled on to your site searching for ways to make container width wider in Genesis Prose Theme. Would you know how to do that? I can’t seem to find this information anywhere on google and have made few CSS code attempts without any success. Thanks.

    • says

      Hi Peter,
      In a Genesis theme, the parent width is typically set by the main body tag or the wrap tag. You can use Firebug to figure out which it is and then change your CSS accordingly. Here’s a Firebug demo if you’re not familiar with it. :)

      Carrie

  11. James says

    Thanks for the tutorial. I’m trying to move the header and the nav outside the wrap. It works but the nav gets put inside the header wrap. How do you move the nav under the header with it’s own structural wrap?

    • James says

      I figured it out. Had to change the order to 20

      remove_action( ‘genesis_after_header’, ‘genesis_do_nav’ );
      add_action( ‘genesis_before’, ‘genesis_do_nav’, 20 );

  12. says

    Great tutorial. I’ve been developing with Genesis for a while, and although my initial problem wasn’t solved after reading this, I did learn about the hook priorities for the first time. Thanks for sharing!

  13. john says

    Hi Carrie,
    thanks for this article!

    I’m trying to move the page-title widget-area in my eleven40 theme outside the wrap.
    So basically what I did is copying and pasting the code you give in your article but swapping “header” with “page-title widget-area” and it did not work :)

    Actually my site ended up pretty messed up with all this errors :)
    Thanks God I always test stuff on a test site ;)

    So, how do I move the page-title widget-area outside the wrap in Eleven 40?

    Thank you!!!

    • says

      Hi John,
      Yeah, this code wasn’t meant to translate to the page title. That’s another ball of wax. And yes, thank God for backups and test sites! :)

      I’d suggest posting your question on moving the page title over in the StudioPress forums along with a link to your site (if available) and a description of what you’re trying to achieve.

      Cheers,
      Carrie

      • john says

        Thanks Carrie,
        well really I’ve posted my question there about a week ago, but got no replies :(

        Thanks anyways!

        BTW I tick the Notify me of follow-up via email below but I wasn’t notified of your reply…. (just to let you know)

      • says

        Well, I have the header out of the the wrapper, but now I want to have it extend across the entire top of the page. Do you know what type of code I should be looking for/modifying?

        • says

          Hey Katie,
          Some other commenters have asked the same, so you might find some helpful info reading through those. Basically though you’ll need to modify the CSS to make the outermost wrap set to 100%.

          Cheers
          Carrie

  14. Bobby says

    Carrie -

    Thank you for this post. It is actually what I want to do on my blog – however I’m using the Mindstream theme and can’t get it to work. There isn’t a custom box. Can you help a newb at all here?

    THANK YOU!

  15. says

    Hi Carrie!
    Quick question related to the header being moved outside the wrap. I did get that, but noticed that on mobile devices, it does not auto size the header image anymore. Do you know if there is a tweak I can make in the code to still allow the header image to resize in mobile devices? I totally changed my initial blog that I started months ago, so i am starting over from scratch.

  16. Krista McPhee says

    Hi Carrie,

    I got the tutorial to work for my header, but I’ve posted an example of my navigation menu. I’ve tried some of the things in the comments but nothing seemed to work. What I would like is the top menu to display full width under the header and the second menu in the wrap removed. I just started my site so it has no content. I’m really hoping you can help, as I’ve been at this for HOURS.

    http://www.inframeexpression.com

  17. Michael says

    Hi Carrie,

    Thanks for the tutorial, I found it very helpful.

    I’m curious about how to add additional divs outside the wrap. How is that done?

    Take your homepage for example, you have intro, services and portfolio sections that all span the full browser width.

    Thanks,
    - Michael

    • says

      Hi Michael,
      The sections you mention on my site aren’t outside the wrap. In my case, I’ve got the outermost divs set at full width and use the .wrap to confine the inside elements to a max width. :)

      Carrie

  18. says

    Hi Carrie. Great instructional post – i used it with success when trying to get a CTA bar to display 100% wide and it worked great!

    I decided to try something else though – wondered if you might be able to help… I’m running Prose and i moved the Nav bar above the wrap with:

    remove_action( ‘genesis_before_header’, ‘genesis_do_nav’ );
    add_action( ‘genesis_before’, ‘genesis_do_nav’ );

    http://www.livingaha.com

    I’m trying to get the nav menu so that it’s flush right with the right-margin of the side bar, but I’m a CSS noob…. I want it all the way right, to the right of all the sidebar text….not at the right of the screen…any chance you could help?

    I also need to figure out how to have it flush with the blue bar at the top of the page. some browsers display it like that already, though some have a white space between the nav and the top.

    Thanks for your helpful posts and for taking the time to read this :)

      • says

        Yes i did! Thanks so much. …. only now the nav doesn’t show up on mobile devices. Any idea how i could bring that nave menu farther left when displaying on a mobile device? Here’s what I’m using in my custom code:

        #nav {
        width: 150px;
        height: 40px;
        position:relative;
        left:370px;
        -webkit-border-radius: 0px 0px 45px 5px;
        border-radius: 0px 0px 45px 5px;

        }
        body {
        width: 100%;
        border-top:10px solid #6799CE;
        }

        Thanks so much for checking out my site, and for your positive comments :)

  19. says

    Hi Carrie,
    Thanks for this tutorial, it is really going to help in the future!
    Unfortunately, I have tried all the CSS coding you mentioned, and I have been unable to put a background color behind the header image.
    Any help would be appreciated!

      • says

        Shoot, I thought I put the site link. It’s http://thelearnedfangirl.com/.
        I did use Firebug, and I’m still having a hard time tracking it down. No matter what I do it seems like it’s one or the other. This is what I have for the CSS now:
        #header {
        height: 160px;
        margin: 0 auto;
        width:100%;
        background-color:#edb008;

        }
        #header .wrap{
        background-image:url(‘/images/the-learned-fangirl-header-2.png’);
        background-position:center;
        background-repeat:no-repeat;
        position:relative;
        z-index:1;
        width:1120px;
        }
        I’m so frustrated, I feel like I’m going crazy! Thank you!

  20. Rajan says

    Nice tutorial here. Can you please tell me how to increase the total width of prose theme so that the blog will have lesser blank area on both sides just like this site? I want to use content/sidebar/sidebar layout. Since the prose theme has more empty space on both sides, content area width is lesser. I want to decrease the empty space on both right and left sides so that I can increase the width of content area and sidebars.

    • says

      Hi Rajan,
      If you would, post your question over in the StudioPress forum. You might also search the forum as there are several threads related to the Prose layout.

      Cheers,
      Carrie

  21. says

    Hi Carrie! Thanks for the tutorial. I’ve almooost got it.

    I got the header above the wrap but can’t get it to span the whole screen. I’ve read through all of the comments and set the body to 100%. I want the header to be taller too – changed the height to 195. Changed the #header width to 100%. The header is still off to the left. (?)

    In the stylesheet there’s a ****header*** section, but also a **** Image header – partial width ***** and ****Image header – full width**** should I be editing one of those?

    My test site is here: http://demo.onefunmom.com/ofmtest/ (and yes, the header looks very busy right now – will be changing it somehow) :)

    Also, I see a custom css folder in my ftp, but I don’t see anything like that on my dashboard.

    • says

      Hey Christy,
      Using Firebug, I see this code for your header background image:


      #header {
      background: url("http://demo.onefunmom.com/ofmtest/wp-content/uploads/2013/07/cropped-header5.png") no-repeat;
      }

      Add background-position: center; and that should fix the centering issue. The width of that image is only 950px, so you’d either need to create a background image that could repeat and tile across the header OR make a single non-tiling image (like you have now) at a super wide width.

      Cheers,
      Carrie

      • says

        Christy, your header image was created with the logo off-center. if you want your logo in the horizontal center of the header, you’ll need to create a new image.

        If you want the header to be full width, an alternative would be to create two files: (1) create a transparent (.png) file for the logo image by itself, and (2) create a repeatable image of the stripes in a separate file to use as the header background.

        Carrie, thank you for posting such great tutorials!

        Andrea

      • says

        Carrie (and Andrea),

        When I use firebug I see those measurements (940×150) but can’t find them anywhere in the CSS stylesheet. In firebug if I look at the “layout” section it shows the measurements as 1349×200, which are the measurements of the actual header. When I upload the header to Prose it automatically crops it – which is why it doesn’t look centered.

        My question is: where do I find those measurements to change? My dashboard does not show a Genesis<Custom Code<Custom Functions box, so I placed the original code in the functions.php and am trying to add the measurements in the CSS Editor.

        I'm happy to go to the StudioPress forums, but wanted to see if you can help me first.

  22. Tee says

    Thank you so much for this tutorial Carrie! I used this code snippet on Metro. It moved the header above the wrap but left the nav stuck inside the wrap. What needs to be added to the code to move the nav along with the header? Thanks again for dropping knowledge bombs on us. Much appreciated.

  23. says

    Hello Carrie,
    It took me about one hour as well a tea break to reach the bottom of this page to comment on, as i had given all the try which was mention in the post and in comment.

    was having a lot of thing in mind for customization, but only this works
    body {
    width: 100%;
    }
    #header .wrap,
    #footer .wrap,
    #footer-widgets .wrap {
    margin: 0 auto;
    max-width: 970px; //This is the default Prose width, but you can change it if you want.
    }( you can see on my site, )

    Carrie when i use this deadly combination with the code you had posted in the post above, my whole content area shift to right, and say only 2 cm of content area i can see. ( header and footer are in place only content area and sidebar)

    So i removed the code what i put in my function.php, and the CSS i kept.

    am almost done but i think some where i am doing buggy mistake,

    I just need the header and the content area to get align with the nav bar, and if possible nav bar to look like full width but its not an priority.

    Still am searching for the solution, and will appreciate your reply on this, any time you can take the reference my site is live and the link is in my profile,

    Thanks.

    • says

      Hi,

      The CSS in this tut isn’t applicable without the corresponding PHP to move your header outside of the wrap.

      As for your header not lining up with your nav as it now stands, it’s because your body is set to 80% and your wrap inside it set to 100%, but your header is confined to 940px.

      Do you use Firebug? Check out this demo if you don’t – it’ll make life much easier. :)

      Carrie

      • says

        Hi Carrie,
        First of all thanks for so fast reply,

        Yes its time to use Firebug, i was learning that only, as i saw you recommending it to everyone in above comment,

        In the mean time, i had done the exact copy and past of the css i mention earlier, by changing body from 80 to 100%,

        SO now the confusion still their,
        How to Increase the width of content area, and aline Header Nav and content area, by keeping full nav menu.

        Hope now you exactly what am trying to do.

  24. Robkhoo says

    This is great Carrie.

    The issue I’m having now is that I already have my primary Nav repositioned above my header.
    When I apply the code then the header goes and sits above the site.container but the primary Nav doesn’t go with it……

  25. says

    Hey Carie,
    Hi from the UK. I’ve just purchased both Genesis and Dynamik. I build sites to supplement our income. I did about one a month up till now. I also pastor a church in Manchester, England. Been doing both for a year, pastoring the church for 15. I only mention this as I noticed you mini bio comments. ;)

    This post on hooks is still a bit beyond me but I know that if I use both Genesis and Dynamik, I will get it in time. Nothing like doing to learn hey. Anyway just wanted to say hi and thanks for the wealth of experience you share in this blog. I am sure we will speak/ share again.

    • says

      Hi David,
      Thanks for stopping by! Glad you’ve found the blog helpful – be sure to read through the comments on posts that don’t quite make sense, as there are some great discussions and additional info there. If you have any questions, just leave another comment!

      Cheers,
      Carrie

  26. says

    Thanks so much for setting this out – I got here via the studiopress fourms. I have successfully moved the header out of the wrap thanks to your code (the footer I think was already outside the wrap). But now I can’t find the CSS to make the header and the nav stretch full width. http://sanjuandelsur.org is the site. Any help would be much appreciated.

  27. says

    A follow up. Actually it seems that my header is working – I just had to change the width of the image. (If you look now I’ve adjusted it back because I dont have the right sized images).

    But I’m now stuck on the navigation – The entire code for both header and nav I tried was this and it didn’t work. But nav did not stretch across.

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

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

    remove_action( ‘genesis_before_header’, ‘genesis_do_nav’ );
    add_action( ‘genesis_before’, ‘genesis_do_nav’, 20 );

    And tips on making the nav stretch across the entire page?

    • says

      Open up the Prose init.php file and look to see where it’s hooked the nav. The latest version of Prose 1.5.2 (released a few weeks ago), has the nav here:

      remove_action( 'genesis_after_header', 'genesis_do_nav' );
      add_action( 'genesis_before_header', 'genesis_do_nav' );

      So, it looks like you’re on the right track with your remove action as:
      remove_action( 'genesis_before_header', 'genesis_do_nav' );

      But try your add action in the same spot, but with higher priority and see if it moves it:

      add_action( 'genesis_before_header', 'genesis_do_nav', 5 );

      If so, it’s just a matter of CSS at that point to get your nav wrapper at 100% (it won’t be constrained by the header).

      Cheers,
      Carrie

  28. says

    Carrie, do you know how one would remove the div site-inner and the content-sidebar-wrap?

    I’ve gutted the header, footer, removed the sidebar (via full-width), and removed the loop. I now want to remove the above divs. Then I will have a “blank” template in which I can just use a hook to write on. A blank canvas for landing pages.

    Thanks!

  29. says

    Hello! Great blog you have here. I’d like to make my article title show as full-width while the default sidebars still load directly below the title – I want this done on single article page only. Would this be hard. Here is an example of the implementation: http://www.theverge.com/2013/12/15/5208626/step-initiative-global-ewaste-map

    btw… My prose customization is coming along nicely: http://www.themobilefanatics.com/surface-2-tablet-experience-using-it-without-a-keyboard/

    I’m hoping that I can make this a custom page template so I have the option of using either the standard layout or full-width title layout.

    Hopefully this is possible. Thanks ahead of time!

    • says

      Hey Mike,
      I think you could accomplish it via custom template or your functions.php file. The basic idea would be to unhook the post title (genesis_do_post_title)and rehook it above the the content (maybe genesis_before_content)- not sure about that location off the top of my head.

      If you’re wanting to make it a layout option, that’s a little different approach. I think the above would be easier.

      Carrie

  30. says

    Hi, Carrie,

    I tried your “header above” on another theme and had to do the following:

    remove_action( ‘genesis_header’, ‘genesis_header_markup_open’, 5 );
    remove_action( ‘genesis_header’, ‘genesis_do_header’, 10 );
    remove_action( ‘genesis_header’, ‘genesis_header_markup_close’, 15 );
    add_action( ‘genesis_before’, ‘genesis_header_markup_open’, 5 );
    add_action( ‘genesis_before’, ‘genesis_do_header’, 10 );
    add_action( ‘genesis_before’, ‘genesis_header_markup_close’, 15 );

    I guess I will have to dig into the Genesis code further but I don’t see how you got around replacing the ‘open’ and ‘close’ actions, which drop in the and HTML.

    • says

      Hey Larry,
      It looks like a couple of your code blurbs were lost in that last sentence. The code you pasted is the code from the tutorial, so I’m not sure what the issue is you’re having?

      Cheers,
      Carrie

      • says

        Hi, Carrie,

        I didn’t see in your suggestions that you had the markup_open and markup_close actions. Sorry if I missed that.

          • says

            NOW I figured out my confusion. I was using your tutorial “How to Move the Header and Footer” and didn’t follow the “Update” since it implied that it was optional. You might want to consider either (1) removing the “Move” tutorial or put a stronger disclaimer at the top that says “This doesn’t work!”

Trackbacks

  1. [...] How to Create a Blog Page with a Single Category Genesis Framework — Using Query Args How to Rename a Genesis Child Theme How to Set Your Own Logo in a Genesis Child Theme How to Add a Logo to the Header Changing Header Image With Custom Header Unwrapping Genesis: How to Move the Header and Footer Customize Genesis: Move Header Above the Wrap with Structural Action Hooks [...]