How To Create Custom Homepage with the Genesis Framework

In this tutorial I’m going to show you how to create a custom homepage with widgets using the Genesis Framework.

This has to be one my favorite things to do when building a custom child theme with the Genesis Framework. Even if you haven’t touched a single line of code before, this tutorial is simple enough to walk you through.

Things we need

Step 1:
First thing we need to do is create a new file in your child themes folder called front-page.php

front-page.php should now look like below.

<?php
/**
 * Custom Front Page
 *
 * @author Stewart Chamberlain
 * @link http://wp.me/p3tEuL-8W
 *
 */

?>

How you develop your homepage is completely up to you. In this tutorial, we’re going to build ours based off the illustration below:

custom-homepage-widgets-genesis

Step 2:

Now we need to create the layout above in our front-page.php

First thing to add is:

What we have above is added our custom loop and all our hooks and filters.

Next we need to add our three functions for the featured, middle and bottom sections:

What we have done is created our functions that will check if the widgets are active and if so display them on our homepage.

Step 3.

Next is you need to open your child theme’s functions.php and paste the following at the bottom to register our homepage widgets:

Step 4.

Last thing we need to do is add some basic styling feel free to change as you see fit:

Open your child theme’s style.css and add the following:

All that is left to do now is go to your WordPress admin and add the content to your new widgets, the example below is how it should look with the default Genesis 2.0 Framework.

widget-homepage-example

Congratulations you have now created a Custom Homepage With Widgets using Genesis framework, and that about wraps up this tutorial.

Any questions or comment feel free to contact me or leave a comment below.

Powered by the Genesis Framework

Genesis Framework

Genesis empowers you to easily build amazing websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to incredible places.

It's that simple - start using Genesis now!

Comments

  1. Sha says

    This doesn’t disable the footer widgets on the home page set up. How would I do that? (using Genesis 2.0 of course!)

    • says

      Hi Sha,

      Yes not by default does it remove the footer widgets, but if you would like to remove them from the home page add the following to the your front-page.php remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );

      Hope this helps

      • Sha says

        Thank you!!!

        If added two more widget areas (to make 5 instead of 3) how do I get them all one line? I am assuming I change out the “one-third” but everything I have tried & researched isn’t working. Thanks again!! I really enjoy you site! I am learning alot! :)

  2. says

    I love this tutorial and thank you so much.

    Can you tell me what the benefit is of using widgets on the homepage. I’ve always just created a page, and used div tags to create my columns of information. Is there a benefit of doing it one way or the other?

    • says

      Heather, I like doing the widgeted areas for clients because it makes it so much easier to keep the home page neat and make sure latest posts, specific content or calls to action, etc., are there automatically.

      In addition, I try not to put HTML in areas the client will need to edit because they don’t usually realize it’s there, even when I’ve warned them. They type over it in the visual editor, then call me in a panic because they “broke” their page. Widgets can help minimize client stress : )

      Stewart: Thank you so much for doing this. It’s almost exactly what I need. It *will* be exactly what I need with a little CSS. I appreciate you sharing : )

  3. says

    Hey Stewart,

    I’m new to the genesis framework. I’m so used to using wp_query_posts when I need to bypass the loop and add the page content to my site along with custom option areas, I don’t normally use widgets…Anyway…I like your code, but I want to have the page’s content show up along with the custom widgets like you have set up in this tutorial. In this case I commented out remove_action genesis loop and the page content shows up but at the bottom. I was hoping to make it show up in the middle of the custom widgets. I’m still learning the hooks, I can find that I can use genesis_entry_content…is that what I would use? Kind of confused at the moment.
    Any insight would help. thx!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>