I’ve decided to give my homepage a bit of an overhaul.
As I’m using the Genesis Framework, it’s a little more complex than for a standard WordPress theme. Genesis uses its own proprietary system of hooks and filters, so you can’t edit the PHP code hands-on like you might with other themes.
I found some tutorials online, and adapted the code to do what I wanted.
Adding Recent Posts to The Homepage
I modifed the code from Carrie Dils’ tutorial on creating a custom page template in Genesis.
I named my template Claire Homepage and the file
claire-homepage.php. You could name yours
yourname-homepage.php. Carrie advises not to use a name beginning with
page-. You also want to avoid reserved filenames such as
It needs to go into the folder for your Genesis child theme. In my case, I’m using the Beautiful Pro theme.
Carrie’s code uses a custom loop to display 12 posts from a particular category. I changed mine to show excerpts from the latest 2 posts.
She also includes some custom fields to pull out links to YouTube. I didn’t need this code, so excised it.
My loop looked like this:
To change the number of posts displayed you would just change the number from 2 to whatever you want. I also added a heading before displaying the post excerpts, and a link to the blog page following them.
Adding a widget area
I also wanted to add a widget area underneath the posts. For me, this is to add an email opt-in form, but it could be used to add any widget content. The first step was to register a widget area in the
functions.php file. The standard
functions.php is quite long, so I added this at the end of my
functions.php. The code is adapted from this tutorial on registering a widget area by StudioPress:
I chose to hook the widget area in after the content using the
genesis_after_content hook. That meant adding this code to my template file:
The Genesis Visual Hook Guide is recommended for seeing where all the hooks lie on a page. There’s even a plugin to show where the hooks are in your theme. Finally, at the very end of the template file I needed to call the
genesis() function. This function puts the page together. Read more about genesis() in this post from WP Sites, which explains the code fully. My full template file code is here:
Getting it working
Upload the modified files to your child theme folder.
Make sure you have a static home page set in Settings > Reading.
Select the Claire Homepage template (or whatever you have named yours) under Page Attributes > Template.
Don’t forget to add a widget to your widget area in Appearance > Widgets for the widget to show.
Add a little CSS styling if required.
Now you can try creating your own custom homepage for the Genesis framework.
Did you find this post helpful? If so, please share!
Hi Claire! Thanks for sharing. Out of curiosity, why did you choose to use a custom naming scheme for your template instead of using a front-page.php template for your homepage?
Claire Brotherton says
I admit I never thought of using front-page.php. That would have been the obvious thing to do, right enough. 🙂
Thames South Shopping Portail says
I think wordpress is the best and I run a quite few number of them. I think we sometimes find a little bit hard to keep our a bit faster due to the implementation of too many plugins. But I like jetpack. Thanks for this article. Helped me a lot.
Really awesome Theme you can also see http://alltrickszone.com with custom modified
lh. louis says
Love the info in here, definitely looking for a way to improve the homepage atm, thanks so much.
Hi can you please share how to add static front page to widgetized homepage in genesis, like after the widgetized homepage instead of showing blog posts can i show a static page so that we can use the widgetized home and a static page together in home.
Claire Brotherton says
Hi Jayadevan – thanks for stopping by.
Perhaps this post from Robin Cornett might help?
Create a Static Front Page With Widgets, Too
Nice Genesis customisation tips. My site looks cool with Genesis Framework 😉
Thanks this post helped me to modify my homepage and my blog looks cool with Genesis Framework 🙂
Thanks for sharing the informative article.Amazing content.