In this article I share the code for basic front page template that displays Home Top, Home Middle and Home Bottom widget sections in Genesis. If none of these widget areas are populated, blog posts will appear automatically.
Add the following in child theme's functions.php:
Thanks so much for putting this together. You’re an amazing asset to the Genesis community!
-David G.
Thanks so much for breaking this down into steps, I am going to use this immediately with the going Green Pro theme where I had started to use a static home page with column classes, but not as good as having a widgetized Homepage. Thanks, again!
Thanks for sharing this. I can’t get enough of your tutorials. Quick question – do you think this same code could be used to add this widgeted home page to Sixteen Nine?
Great… so how can i add widgets and align theme side by side?
Followed your tutorial above for a site using the Going Green Pro theme and found your step by step instructions very clear, Thatnks. I did make a couple of changes – in registering the widget areas, I saw you had ‘your-theme’ for name and description, I replaced ‘your-theme’ with ‘going-green’, I don’t know if that’s what I should have done because I ended up with everything in place, however with a problem which rather than describe, here is the link to the test site I am working with – http://bejeweledbandanas.com/ Could you take a look? I’ve rechecked and redone a few times to make sure I’ve got everything right and also to make sure I haven’t got a mish mash of attempts because I’ve tried to do this a few different ways. Thank you!
Yes.
I looked at your site earlier from your Twitter message and am not sure what the problem is. Can you elaborate?
Hello Please i want to ask, is is possible to use your tutorial above and set an home page like this site http://probloggingsuccess.com/? i would like to use widget and align them side by side
Thanks for taking a look at the site — the problem is that although the widgets are showing up as you can see, they’re showing up on the background, I don’t know what happened to the white content background and don’t know how to have it show up. A second problem, but one that I may be able to fix, is the widgets are not at the top of the page, but far down on the page.
This is really good and easy to implement. Thank Sridhar! What about if I wan to show the primary sidebar to the right hand side of these three home widgets?
Thanks in advance.
Cheers,
Antxon
I am also interested in this. Thanks!
I want to know how to add a sidebar to the right too!
I’d also love to know how to add the primary sidebar to the widgetized home page. 🙂
I have updated the tutorial and added an alternate front-page.php code that will display the Primary Sidebar on the right of content (widget areas).
Hello How can I add widget on the section bottom:
home-bottom-left
home-bottom-right
do you have some tutorial
Hi Sridhar,
A very usefull tutorial as always.
But how to put an extra field in such an area where you could fill in a title like ‘Latest News’.
Ok, you can do that in the ‘front-page.php’ file by adding a ”before’ => ‘Latest News:’,’ but that’s to hard-coded I think (clients won’t like this).
Is there a way to add a field to such a widget to enter a title for that widget.
Oops,
I forgot to add the ‘code’ tag where I talk about the ‘front-page.php’.
It should read:
'before' => 'Latest News:',Delete this post
oops again
somehow I don’t understand how to add a piece of code in a post … sorry about that.
What I ment, is that you can add a H4 tag in front-page.php with the title you want to appear, but that is not very user-friendly.
Hi Sridhar,
Found your site recently and you offer some GREAT information regarding Genesis Framework!!!!! I was wondering how this tutorial could be modified to have the “Home Top” widget area only be about 2/3’s of the way across the page and have another widget area be the remain 1/3?
So a Image slider could be on the first 2/3rd and a Call to Action would be the final 1/3rd (with some padding in between as necessary)
Thanks!
Ken
Hi,
thanks for all your tutorials.
One question more genesis general:
why in genesis widget areas are displayed like that:
function prefix_home_widget_areas() {
genesis_widget_area( 'home-top', array(
'before' => '',
'after' => '',
) );
genesis_widget_area( 'home-middle', array(
'before' => '',
'after' => '',
) );
genesis_widget_area( 'home-bottom', array(
'before' => '',
'after' => '',
) );
}
i write them like that
function prefix_home_widget_areas(){?>
<?php }
it works and i find it much more easier
so is there a reason, or it’s just about personal preferences ?
Thanks in advance
My code don’t appear coorectly
that’s what i mean:
add_action( ‘genesis_entry_content’, ‘prefix_home_widget_areas’ );
function prefix_home_widget_areas(){
?>
<?php }
well it seems impossible to copy code 🙁
what i mean i i write the widget areas like in a normal wordpress theme
and find it much more simpler
is it wrong to do that in genesis
Hi
Thank you for your helpful post. I have a question.
How will I get back my footer-widgets inside my wrap?
Thanks!
Amben
[…] a better homepage with Genesis about a couple of years ago. Another article of interest was Widgetized Homepage Template in Genesis by Sridhar […]
Thanks so much for this tutorial! Is there a way to add the genesis loop after all the widgets?
Excellent and simple. Thank you.
One problem:-( I am working on this site: http://pd.lindebjerg.de/
I have made two home-bottom-widgets one left, one right.
But they use the full wide of the screen, instead of the 1200px wide in the Homepage frame?
How come? here is what I aded into the front-page.php
I use your Genesis-Sample-Master a Child Theme:-)
genesis_widget_area( ‘home-bottom-left’, array(
‘before’ => ”,
‘after’ => ”,
) );
genesis_widget_area( ‘home-bottom-right’, array(
‘before’ => ”,
‘after’ => ”,
) );
Best Regards,
Jesper
I got it:-)
I was missing this part in the css, now it rocks:-)
.home-widget-area {
max-width: 1200px;
margin: 0 auto;
}