Community Forums › Forums › Archived Forums › General Discussion › How to insert custom markup outside of header's .wrap?
Tagged: custom-markup
- This topic has 9 replies, 3 voices, and was last updated 10 years, 6 months ago by nunotmp.
-
AuthorPosts
-
September 16, 2013 at 5:40 am #62800pathetixMember
Default Genesis template has a header with a .wrap div.
Would like to know how I can add custom markup with another .wrap div just before the header closes.Current:
.site-header
>>.wrap
.nav-primaryCustom:
.site-header
>>.wrap
>>.customwrap
.nav-primarySeptember 16, 2013 at 7:27 am #62810nunotmpMemberGenesis uses the following hooks to create the header markup
add_action( 'genesis_header', 'genesis_header_markup_open', 5 ); add_action( 'genesis_header', 'genesis_header_markup_close', 15 );
with
add_action( 'genesis_header', 'genesis_header_markup_close', 15 );
closing the</header>
(html5) or the</div>
(xhtml). You can follow the same pattern and create you actions like soadd_action( 'genesis_header', custom_wrap_open', 12 ); add_action( 'genesis_header', 'custom_wrap_close', 14 );
This will hold the openig a closing markup and you can simply add your actions using the priority of 13 like so
add_action( 'genesis_header', 'everything_within_custom_wrap', 13 );
Or an even easier if you do not really need to add so many thing just create a single action
add_action( 'genesis_header', 'wpz_custom_wrap', 13 ); function wpz_custom_wrap() { echo '<div class="custom-wrap">'; // add anythiing you want within the wrap echo '</div">'; }
September 16, 2013 at 11:22 am #62844pathetixMemberThanks @nunotmp for the reply, I think I understand your solution.
However I can't get the markup to be outside of the header .wrap div.I Implemented your solution:`add_action( 'genesis_header', 'custom_wrap_open', 12 );
add_action( 'genesis_header', 'custom_wrap_close', 14 );
add_action( 'genesis_header', 'everything_within_custom_wrap', 13 );function custom_wrap_open() {
echo '<div class="custom-wrap">';
}
function custom_wrap_close() {
echo '</div">';
}
function everything_within_custom_wrap() {
echo '<h1>HELOOOO</h1>';
}`That generated:`<header>
<div class="wrap">
<div class="title-area">...</div>
<div class="custom-wrap"><h1>HELOOOO</h1></div>
</div>
</header>`What I would like to achieve is the custom markup to be the sibling of the header .wrap div.
I really appreciate your explanation though.September 16, 2013 at 11:51 am #62846nunotmpMemberSorry about that. I just re-read you question. This will require quite a bit of work. Genesis since 2.0 automatically adds the .wrap in the header. What exactly are you wanting to do? Maybe there is an easier way?
September 16, 2013 at 12:01 pm #62851nunotmpMemberYou know what, do this.
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 ); add_action( 'genesis_header', 'wpz_header_markup_close', 15 ); function wpz_header_markup_close() { genesis_structural_wrap( 'header', 'close' ); do_action( 'wpz_after_header_wrap' ); genesis_markup( array( 'html5' => '</header>', 'xhtml' => '</div>', ) ); }
What this does is removed the genesis closeing markup and inserts our custom markup. I added a custom hook after the
.wrap
and before the</header>
so you can then use the example above to add the custom markup like soadd_action( 'wpz_after_header_wrap', custom_wrap_open', 12 ); add_action( 'wpz_after_header_wrap', 'custom_wrap_close', 14 ); add_action( 'wpz_after_header_wrap', 'everything_within_custom_wrap', 13 );
The WPZ is my personal prefix you can change it.
September 17, 2013 at 7:22 am #62971pathetixMemberSorry for the late reply but I was trying to understand what you did.
It works! It's kind of a long solution but it works.
I was already contemplating on just building a custom theme but now I don't have to;Thanks for the explanation, I really appreciate this.
September 17, 2013 at 7:31 am #62973pathetixMemberBtw how did you came up with genesis_header_markup_close ?
I don't see it in the hooks reference page.September 17, 2013 at 9:27 am #62984nunotmpMemberIf you look at the Genesis files you can navigate to Genesis>lib>structure>header.php. This is where these functions are created.
add_action( 'genesis_header', 'genesis_header_markup_open', 5 ); add_action( 'genesis_header', 'genesis_header_markup_close', 15 );
You don't really have to create a custom hook, you can insert your markup directly into the header_close function but I like to use hooks. 🙂
September 17, 2013 at 7:36 pm #63094Gary JonesMemberJust wanted to add - @nunotmp - good work - this is exactly the method I used to move primary and secondary nav into the header, but outside of the header wrap.
WordPress Engineer, and key contributor the Genesis Framework | @GaryJ
September 23, 2013 at 10:47 pm #63931nunotmpMember@garyj Thank you. Its good to know I got the thumbs up from a developer of your caliber. : -)
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.