Can't get site title area to move above left header widget area

[Riavon]

I've customized a lot of Genesis child themes and have put together a custom child theme of my own that I use as a base for a majority of my projects. I'm pretty proficient at doing most everything I need, but this one has me stumped.

I've successfully added a left side widget area to the header, which works and looks great. That's easy enough.

But, now what I want to do is move the genesis_site_title area so that it's the first thing in the header div. Out of the box, Genesis does this, placing the header's right widget area after the site title area. But when you add a second, left header widget area, it's placed before the site title area. This looks fine when the site is viewed on a large desktop, but for mobile responsive on smaller viewing areas, the site title area (which contains the logo and description) gets pushed down below the left widget area, rather than staying above/at the very top of the page. I could finagle the stylesheet to absolutely position the site title/logo area, but I'd rather not do that, I'd like to just flip the left widget area and site title area so the logo/site title always appears first/at the top, without forcing it via CSS absolute positioning.

The header left widget code is:

add_action('genesis_header', 'header_left_widget_area', 5);
function header_left_widget_area() {
echo '<div class="left-widget-area">';
dynamic_sidebar('Header Left');
echo '</div><!-- end .widget_area -->';
} 

I know it's probably just a simple line of code to add to the functions.php and I've tried several things that made sense to me, however none of it did the trick.

For example I've tried:

remove_action( 'genesis_header', 'header-left-widget-area', 5 );
add_action( 'genesis_after_genesis_site_title', 'genesis_do_header-left-widget-area, 9' ); 

and:

remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
add_action( 'genesis_header_left_widget_area', 'after_genesis_site_title' ); 

Which does absolutely nothing. Nothing breaks, but nothing changes either. How can I get that left widget area in the header to place itself after the site title in the code? I'm terrible with PHP and Genesis hook codes in functions.php so if these look stupid, well that's why!)  I'm in need of some Genesis coder guru help. OH, and the site is in development and though it's on a public server it's currently behind an under construction screen, so I can't give you the URL here, but if you need it I'll provide you with access privately to view it. I'm hoping just looking at my code here will be enough. I appreciate any help! Thanks in advance.

---

Twitter: @riavonentprises

[Ozzy]

can you post what how you're registering the widget area, the genesis_register_sidebar?

---

Ozzy Rodriguez | Twitter | Google+

[Riavon]

Hi Ozzy, sure thing:

genesis_register_sidebar(array(
'name'=>'Header Left',
'description' => 'This is the Header Left Widget Area.',
'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>',
'before_widget' => '<div id="header" class="leftwidget-area">', 'after_widget' => '</div>'
)); 

---

Twitter: @riavonentprises

[Brian Bourn]

Depending on the final design you could rewrite the header like below, or us the Genesis header right hook.

add_action( 'genesis_header_right' );

remove_action( 'genesis_header', 'genesis_do_header' );
add_action( 'genesis_header', 'child_custom_do_header' );
/**
 * Echo the default header, including the #title-area div,
 * along with #title and #description, custom widget area, as well as the .widget-area.
 *
 * Calls the genesis_site_title, genesis_site_description and
 * genesis_header_right actions.
 *
 * @since 1.0.2
 */
function child_custom_do_header() {

	echo '<div id="title-area">';
	do_action( 'genesis_site_title' );
	do_action( 'genesis_site_description' );
	echo '</div><!-- end #title-area -->';
	
	if ( is_active_sidebar( 'Header Left') ) {
	echo '<div class="left-widget-area">';
	dynamic_sidebar('Header Left');
	echo '</div><!-- end .left-widget-area -->';
	}
	
	if ( is_active_sidebar( 'header-right' ) || has_action( 'genesis_header_right' ) ) {
		echo '<div class="widget-area">';
		do_action( 'genesis_header_right' );
		add_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
		dynamic_sidebar( 'header-right' );
		remove_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
		echo '</div><!-- end .widget-area -->';
	}

}

---

Bourn Creative | bourncreative.com | Twitter

[Riavon]

Hi Brian, thanks .. that looks awesome but when I tried your code, it didn't work. I wonder if I'm missing something? What happens is when I use your code, the left widget area disappears from the header entirely. As in, it's not in the header code at all. When I use your code along with:

add_action('genesis_header', 'header_left_widget_area', 5);
function header_left_widget_area() {
echo '
<div class="left-widget-area">';
dynamic_sidebar('Header Left');
echo '</div>
<!-- end .widget_area -->';
}

as well, then the left widget shows up in the code and is visible, and everything looks ok, but by ok it looks and works the same as always, with the left widget appearing before the site title area, then the (right) widget-area below that.

(PS: Where am I to add the right widget code you show me in the first part of your post above?)

---

Twitter: @riavonentprises

[Brian Bourn]

Try adding this to your functions file and see if it outputs where you want:

add_action('genesis_header_right', 'header_left_widget_area');
function header_left_widget_area() {
echo '<div class="left-widget-area">';
dynamic_sidebar('Header Left');
echo '</div><!-- end .left-widget-area -->';
}

This will put your new widget inside the #header .widget-area, but it may work depending on the design.

---

Bourn Creative | bourncreative.com | Twitter

[Ozzy]

the registering of the sidebar should be

genesis_register_sidebar(array(
'id'=>'header-left',
'name'=>'Header Left',
'description' => 'This is the Header Left Widget Area.',
));

then when calling it in the header, try

add_action ('genesis_header', 'header_left_widget_area', 5);
function header_left_widget_area() {
genesis_widget_area( 'header-left', array (
'before' => '<div class="left-widget-area">',
) );
}

---

Ozzy Rodriguez | Twitter | Google+

[Riavon]

Thanks so much guys. I think I'm almost there with some tweaks to Brian's code. I've got to go out for a meeting right now but will work on this when I get back and let you know. Thanks again so much!

---

Twitter: @riavonentprises

[Riavon]

Thanks to both Ozzy and to Brian Bourn for your responses. Brian, your code worked! Well.. with a few minor adjustments as well as a few minor changes to the CSS. But it did just what I needed it to do. The header flows nicely now on smaller screens, with the title area (logo/description) staying at the top. You're a lifesaver. Thanks again. I'll post a link to the site when it goes live (soon!)

---

Twitter: @riavonentprises

[Riavon]

For those who want to see how I made this work, here is my version of the code Brian gave me in my functions.php:

remove_action( 'genesis_header', 'genesis_do_header' );
add_action( 'genesis_header', 'riagen_custom_do_header' );

add_action('genesis_header', 'header_left_widget_area');
function header_left_widget_area() {
echo '
<div class="left-widget-area">';
dynamic_sidebar('Header Left');
echo '</div>
<!-- end .left-widget-area -->';
}

function riagen_custom_do_header() {

echo '
<div id="title-area">';
do_action( 'genesis_site_title' );
do_action( 'genesis_site_description' );
echo '</div>
<!-- end #title-area -->';

if ( is_active_sidebar( 'Header Left') ) {
echo '
<div class="left-widget-area">';
dynamic_sidebar('Header Left');
echo '</div>
<!-- end .left-widget-area -->';
}

if ( is_active_sidebar( 'header-right' ) || has_action( 'genesis_header_right' ) ) {
echo '
<div class="widget-area">';
do_action( 'genesis_header_right' );
add_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
dynamic_sidebar( 'header-right' );
remove_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
echo '</div>
<!-- end .widget-area -->';
}

}

Then I just adjusted my previous CSS so that the title area div wasn't floated left against the floated left left widget area

.header-image #title-area,
.header-image #title,
.header-image #title a {
display: inline-block;
float: none;
}

and then

#header .widget-area {
float: right;
text-align: right;}

with each of these set to about 30% wide.

---

Twitter: @riavonentprises

[fotodog13]

Thanks for sharing this  code- I too am " php challenged" it worked perfectly for me 🙂

[Author]

Posts