I recently received a support ticket from someone wanting to add in an additional widget area to their site using the Fun theme, like John & Sherry had done on their Young House Love blog, which also uses Fun. I love the way that John and Sherry have personalized the Fun theme to give their own spin on it, from additional widgets on the home page, to specific category layouts (which may be a post for another day – I helped John just a little with the site – I just love visiting their site!)
Anyway, the additional widget is above the footer widgets, and below the Home Blog Featured Widget. There are three steps in the process of adding a widget:
- Register the widget
- Hook the widget
- Style the widget
To register the widget, open up your functions.php file, and add the following code:
I recommend adding it immediately below the other home page widgets.
Once you have added that to your functions.php file, we need to “hook” the widget. (Hooking the widget means defining which Genesis Hook the widget is to be associated with). So, open up your front-page.php file, and add this:
The location of this is very important, because this is what will determine the location of the widget on your front page. We want the new widget to display below the Home Blog Posts Featured widget, so add that code immediately below it, so that it looks like this:
Finally, we’ll want to add a little styling (in this instance, we want to make sure there is a dividing line between the Home Blog Posts Featured widget and the footer, and that the look of the widget corresponds to the other home page widgets.
Finally, open up your stylesheet, and in the section under /* Home Page Widget, add in the following:
.home-new {
border-top: 1px solid #000;
margin: 0 auto 20px;
padding-bottom: 7px;
max-width: 1140px;
}
Then, look for:
.home-products .widget {
margin-top: 30px;
}
.home-products .widgettitle {
margin-bottom: 4px;
}
Replace that section with:
.home-products .widget,
.home-new .widget {
margin-top: 30px;
}
.home-products .widgettitle,
.home-new .widgettitle {
margin-bottom: 4px;
}
Voila! You now have a new home page widget which displays above your footer. (See the screenshot!)
As always, anytime you make adjustments to your functions.php file, you want to be very careful – a false move will crash your site.
If you prefer to hire me to make the change for you, send me a note!
Susan,
Thanks for the encouragement. I’ll think about it, and maybe will try something like that after I get through a couple of other things that are taking up all my energy at the moment. 🙂
Christian
Susan,
Not being comfortable with the world of php, I would never dare to try this on my own…unless I was playing with a test site or something where it wouldn’t matter if I destroyed everything…but I decided to check out your tutorial just to have a look at your style of writing a tutorial.
And I have to say, you did a great job. Straight and to the point…and clearly written. I actually think this is something…by following your tutorial…that I *could* do…even though I wouldn’t really understand what I was doing.
Nice work.
Christian
@moodyriver
Christian:
Thanks for reading and leaving a comment.
You could absolutely do something like this yourself. Even if you’re on a live site, as long as you have your existing functions.php available within easy reach, it’s just a matter of updating it on your hosting site if you mess up.
The beauty of the Fun theme is that it already has home page widgets, so you’re essentially just copying the existing code, renaming it to give it a new widget name, and then updating the stylesheet to add in the styling for this.
Give it a shot, and let me know if you get stuck!
Susan