Homepage › Community Forums › Epik Theme Support › Add a widgetized area under the header
Tagged: Custom Widget Area
Can someone help me figure out how to add a full width widget area to my pages (services, contact, etc), site is here: http://pastedata.com/demoeleven/services/ ? I would like to add a widget titled “Page Featured” under the header section, or alternatively above the content. So, ultimately it will look something like this http://pastedata.com/demoeleven/wp-content/uploads/2013/04/service-details.png
Take a look at the Genesis Documentation on Studiopress.com on widgets, and hooks so you can get an idea how they work.
You can follow this tutorial that Brian wrote for the eleven40 theme, it will work with this theme as well, you can change any word that says eleven40 to the theme you are using (epik) and everything should be fine. Just adjust it to your needs.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Hey Glade,
How did you add that clickable image logo to Epik?
Terence.
Thanks for the response Eric. I went through that tutorial before I posted here, but where I ran into trouble was adding it to the pages, rather than the home.php. I want to add the full width feature widget to only the pages, not the home page. How would I change the code to do this? That is where I get stuck with using the funtions.php file rather than the home.php file.
Terence,
I created an image file that is 1152px wide by 120px in height, then uploaded it under appearance > header. One other thing I learned is that you also have to make sure that the “show title” check box is unchecked under the themes > customize section, otherwise you’ll get the header text overlay on your logo.
Then, depending on the width of your logo, you have to update this CSS code, as follows, note the change in width from 50% to a specific size of 290px.
.header-image #title,
.header-image #title a,
.header-image #title-area {
display: block;
float: left;
min-height: 120px;
overflow: hidden;
text-indent: -9999px;
width: 290px;
}
@Glade can you post the custom code that you added in your functions file? I can tell you what you’ll need to adjust to make it work.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
@Glade ~ thanks! As it turns out, I had already modified the header size, and….
min-height: 60px;
width: 290px;
was all I need to solve my problems.
Many thanks.
I got it close with this code.
add_action( ‘genesis_before_content’, ‘include_sidebar_widget’ );
/** Loads a new sidebar after the content */
function include_sidebar_widget() {
echo ”;
dynamic_sidebar( ‘featured’ );
echo ”;
}
genesis_register_sidebar( array(
‘id’ => ‘featured’,
‘name’ => ‘Featured’,
‘description’ => ‘This is where a featured section goes’,
) );
But I can’t get it to show up outside the wrap so it spans the entire width of the page.
@Glade Remove that code (at the top) and replace it with this –
Make sure and place the above code under the head-wrap code in your functions file……Place it under this –
// After Header Wrap
add_action( 'genesis_after_header', 'after_header_wrap' );
function after_header_wrap() {
echo '</div>';
}
That should show up directly under the header (which is actually the head-wrap) on your site. I just tested it and it works for me. Full width and everything…..you’ll just need to create some css for it.
Let me know if that works.
Ok, thanks for pointing me in the right direction. The code you gave me worked, but not quite correctly, as the widget text was aligned off the left hand side of the page. So I have to change the output from the widget to rather than . That way, I could further style the .widget-wrap inside the featured div id. That centered it.
Here is the final code that worked for me, I added it after the “//After Header Wrap” section. Note that I had to add the contional “if is home” section so it didn’t show up on the homepage.
genesis_register_sidebar( array(
'id' => 'featured',
'name' => __( 'Featured', 'epik' ),
'description' => __( 'This is the featured section.', 'epik' ),
) );
/** Add the featured section */
add_action( 'genesis_after_header', 'epik_featured' );
function epik_featured() {
/** Do nothing on the home page */
if ( is_home() )
return;
genesis_widget_area( 'featured', array(
'before' => '',
) );
}
Then I added this CSS.
#featured {
background: #474747;
color: #FFFFFF;
width: 100%;
margin: 0px auto;
}
#featured h1 {
color: #FFFFFF;
font-size: 32px;
}
#featured .widget-wrap {
width: 1152px;
margin: 0px auto;
}
It works, you just have to style it in your css…..you also need to add your div (or divs if you plan to have multiple containers) which is missing in your code –
'before' => '<div class="featured">',
I added the same code and got it to look exactly like the screenshot you posted.
Let me know if you get it working.