Create 3-widget areas in header

[RitaRobinette]

I have confined the title and description (logo) in  the header of the Education Theme to about 1/3 the width of the header.  I need to split the header-right widget area into 2 widget areas  (header-middle and header-right).  How is the proper way to handle this.

[Brad Dalton]

You'll need to custom code it in your child themes functions.php file and style.css file.

No easy way to do this really. This tutorial looks like it has a solution but not specifically for Genesis http://mysitemyway.com/docs/index.php/Adding_stuff_to_the_header

You could also try repositioning/copying the 3 footer widgets using the genesis_header hook. Haven't tested this but it might work. You'd also need to modify the CSS.

---

Tutorials for StudioPress Themes.

[RitaRobinette]

After man tries, I am still unable to replace header-right widget with a header-center and header-right.  Someone must have done this but I can't find anything on how to do it.  Any help, great appreciated.

[RitaRobinette]

This is finally solved, thanks to some direction from Copyblogger Media Support.

To add two new widgeted areas to header right (while leaving the title/description intact):

Add the following to the functions.php child theme file

/** Register 2 new widget areas */
genesis_register_sidebar( array(
'id' => 'header-center',
'name' => __( 'Header Center', 'education' ),
'description' => __( 'This is the header middle section.', 'education' ),
) );
genesis_register_sidebar( array(
'id' => 'header-promo',
'name' => __( 'Header Promo', 'education' ),
'description' => __( 'This is the header right section.', 'education' ),
) );

/** Add 2 new widget areas to header right*/
add_action( 'genesis_header_right', 'add_header_center' );
/** Loads a new sidebar in header content */
function add_header_center () {

echo '<div class="header-center">';
dynamic_sidebar( 'header-center' );
echo '</div>';

}

add_action( 'genesis_header_right', 'add_header_promo' );
/** Loads a new sidebar in header */
function add_header_promo () {

echo '<div class="header-promo">';
dynamic_sidebar( 'header-promo' );
echo '</div>';

}

 

Added the following to style.css:

#header .widget-area {
width: 840px;
float: right;
padding-top: 15px;
}

#header .header-center {
width: 300px;
float: left;
background-color: #ddf2fd;
position: relative;
}
#header .header-center .featuredpost .post {
border: none;
overflow: hidden;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
display: block;
padding: 0px;
float: none;
}
#header .header-center h2 a,
#header header-center h2 a:visited {
line-height: 15px;
width: inherit;
text-align: left;
font-size: 15px;
font-weight: normal;
color: #D5294F;
background-color: #ddf2fd;
padding-bottom: 0px;
padding-left: 10px;
padding-top: 5px;
}

#header .header-center .post {
float: left;
overflow: hidden;
}
#header .header-center .textwidget {
text-align: left;
}
#header .header-promo {
width: 300px;
float: right;
margin-top: 115;
margin-bottom: 0;
position: relative;
}

#header .header-promo h2 a,
#header .header-promo h2 a:visited{
font-size: 15px;
font-weight: normal;
color: #D5294F;
line-height: 11px;
padding-bottom: 0px;
padding-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

}
#header .header-promo .post {
overflow: hidden;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
float: left;

}
#header .header-promo .textwidget {
text-align: left;
}
#header .header-promo img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

 

[Brad Dalton]

Thanks for that code Rita.

After testing the code works, but anyone else that uses it should understand that the title area in the header needs to be modified as well.

Also the code needs to be fixed which you can do using a text editor like Notepad++.

---

Tutorials for StudioPress Themes.

[RitaRobinette]

Yes.  My solution keeps the title area built into the child theme intact.

 

[Author]

Posts