A Custom Homepage For The Genesis Framework

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 index.php.

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!

Category: WordPress Tags: Genesis