If you are new to using Genesis themes, the first thing you will likely notice when you look under the hood that they are set up somewhat differently than your typical WordPress theme. I like to think of the Genesis framework as a variation of WordPress. When you first start poking around at the Genesis framework, you might feel a bit lost and confused. But there is nothing wrong with that you certainly are not alone. Fortunately, once you get past the learning curve, Genesis themes not only become easier to customize, but you soon realize what a powerful tool the Genesis framework can be for building websites.
Genesis themes offer a decent amount of functionality ‘out of the box’ and many users content at never moving past that stage. However, at some point you may require more customization and functionality and adding custom page templates to your WordPress site is one way create a more dynamic website. To give you an idea of how to make a custom page template in Genesis, I have provided a quick tutorial below on how to create a widgetized custom homepage.
A custom homepage template in Genesis
A popular and convienent way to use Genesis is to add a widgetized front page, which is already implemented in certain Genesis themes. The example code below is the widgetized homepage code of the Parallax Pro Genesis theme. The only difference is that this has been modified to include seven widget areas as opposed to the original three widgetized areas. However, you can use this code below for your own custom Genesis child theme or if you are already using the the Parallax Pro Theme and only wish to modify it.
First, go into your child theme folder and create a new file called front-page.php. What we need to do next is to add a filter that will remove the Genesis loop and than add a hook, which will allow to you to add custom widgets to your page. The filter and hook look something like this: //* Remove the default Genesis loop //* Remove the default Genesis loop remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );
//* Add homepage widgets add_action( ‘genesis_loop’, ‘parallax_homepage_widgets’ );. What the code does is to first remove the Genesis loop and replaces it with several widget areas. Add the entire code below into your front-page.php file template. Keep in mind that this code is taken from the Parallax Pro theme. However, you can rename this code and name your template whatever you want.
.
As you scroll down the page and look at the code, you can see the area where the code for widgets has been added. This page includes seven widgets as shown in the code below. Each widget looking the code below.
Whenever you create a page template in Genesis, make your sure have genesis(); at the bottom of the template. Also keep in mind that because this is the homepage, it will not display in your dashboard as page template. However, whatever page you set as your homepage will now to display as the front-page.php template.
However, in order for widget options to display inside your dashboard, the final step is to enqueue your front page widgets in the functions.php file. In other words, you need to register your widgets from the font-page.php in your functions.php. You can think of the functions.php file as sort of the engine or the central administer of your site. Copy the code below into your functions.php file and save.
Go back into your dashboard into your ‘widgets’ area and you should now see the option to add widgets to your front page. Once you add the widgets, then should now display on the front page. If they are not displaying, retrace your steps and see if you missed something. Never get discouraged if something doesn’t work the first time as there is likely just a minor nuance that is causing the issue. You should see something in your widget area similar to the image below.
One of the great things about the widgetized home page is that in addition to creating a fully responsive, vertical page, you now have ability to easily and change several sections on your front page. Depending in the content of your widgets, you will likely need to make to some styling tweaks in your css file. A lot of this will simply adjustments to padding font sizes.