How to place an element outside the .wrap in the main header?

[studionoobly]

Hi,

I am trying to get a utility bar (element) to go across at full width at the top of the header but it's trapped inside the the headers wrap. Is there a way to get it just above the wrap?

This is what I have so far:

 * REGISTER THE SIDBARS ABOVE THE HEADER - Topbar
 */
 add_action( 'genesis_header', 'top_bar' , 5);

 function top_bar() {

		echo '<div class="topbar">';

		genesis_widget_area( 'topbar-bar-left', array(
			'before' => '<div class="topbar-bar-left">',
			'after' => '</div>',
		) );

		genesis_widget_area( 'topbar-bar-right', array(
			'before' => '<div class="topbar-bar-right">',
			'after' => '</div>',
		) );

		echo '</div>';
// Adapted from http://www.carriedils.com/widget-area-above-header-genesis/
}

Thanks!

http://n/a

[carasmo]

The original tut had that code in her instructions on where to hook.

add_action( 'genesis_before_header', 'utility_bar' );

---

Genesis Theme Customization and Help

[studionoobly]

Thanks but I would like it in the header not before, I'm trying to keep it as semantically friendly as possible.

[carasmo]

Check http://wpsites.net/ or https://sridharkatakam.com/ to see if there is a tutorial. It's pretty complicated.

---

Genesis Theme Customization and Help

[studionoobly]

Thanks but can't afford what those guys charge, I'll just keep googling : ]

[Genesis Developer]

Try this code once

add_action( 'genesis_header', 'top_bar' , 5);

 function top_bar() {

  add_filter( 'genesis_structural_wrap-header', 'gd_remove_header_wrap', 10, 2 );
  
	echo '<div class="topbar">';

		genesis_widget_area( 'topbar-bar-left', array(
			'before' => '<div class="topbar-bar-left">',
			'after' => '</div>',
		) );

		genesis_widget_area( 'topbar-bar-right', array(
			'before' => '<div class="topbar-bar-right">',
			'after' => '</div>',
		) );

	echo '</div>';
    
  remove_filter( 'genesis_structural_wrap-header', 'gd_remove_header_wrap', 10, 2 );
  
  genesis_structural_wrap( 'header' );
}

function gd_remove_header_wrap( $output, $original_output ) {
  if( $original_output == 'open' )
    return null;
    
  return $output;
}

Note: I did not test the code. You'll keep a backup of your functions.php file first. Then add the code and test.

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[studionoobly]

Thanks GD.

I tried that and it moved the top-bar above the header wrap but it also created a new wrap which then wrapped its self around the top-bar and the original wraper and it's content?

I have found a solution thanks to https://gist.github.com/neilgee/83abf5affc2af26a527e

Do you think this would be safe to use in terms of future Genesis theme updates or do you think this might break quite easily? Thanks.

Here's what I did with it:

//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>',
		'xhtml'   => '<div id="header">',
		'context' => 'site-header',
	) );

			echo '<div class="topbar">';

			genesis_widget_area( 'topbar-bar-left', array(
				'before' => '<div class="topbar-bar-left">',
				'after' => '</div>',
			) );

			genesis_widget_area( 'topbar-bar-right', array(
				'before' => '<div class="topbar-bar-right">',
				'after' => '</div>',
			) );

			echo '</div>';
			
	genesis_structural_wrap( 'header' );
}
function sm_genesis_header_markup_close() {
	genesis_structural_wrap( 'header', 'close' );
	genesis_markup( array(
		'html5' => '</header>',
		'xhtml' => '</div>',
	) );
}
function sm_genesis_do_header() {
	global $wp_registered_sidebars;
	genesis_markup( array(
		'html5'   => '<div %s>',
		'xhtml'   => '<div id="title-area">',
		'context' => 'title-area',
	) );
	do_action( 'genesis_site_title' );
	do_action( 'genesis_site_description' );
	echo '</div>';
	if ( ( isset( $wp_registered_sidebars['header-right'] ) && is_active_sidebar( 'header-right' ) ) || has_action( 'genesis_header_right' ) ) {
		genesis_markup( array(
			'html5'   => '<aside %s>',
			'xhtml'   => '<div class="widget-area header-widget-area">',
			'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(
			'html5' => '</aside>',
			'xhtml' => '</div>',
		) );
	}
}

[Author]

Posts