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
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:
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.
Next is you need to open your child theme’s functions.php and paste the following at the bottom to register our homepage widgets:
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.
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.