Add Custom Homepage Widgets in Genesis Theme [Tutorial#12]

I am really thankful to Randika from Indonesia for giving me a chance to help him.

He asked me to share a code snippet on how to register custom homepage widgets in Genesis child theme. He is currently using Metro Pro theme. Bus as I don’t have access to that premium theme, I am sharing the codes which I have tested on sample theme. I am pretty sure that it will work on almost every child template.

So, I am asking a question to you. Are you planning to create a custom homepage for your website?

If you are using Genesis theme framework then, you might know that you can create unlimited custom widget areas. Then you can conditionally populate them in your page templates. Finally, when your widgets are ready, you can use them for sliders, hero images, carousels, testimonials and other things.

Today I am going to share a simple genesis code snippet. It will help you to add custom widgets to the homepage or more precisely to front-page.php file of your Genesis child theme.

Before you proceed to implement my codes in your theme, I would like to request you to create a complete backup of your website.

So if you are ready, lets get started.

Adding custom homepage widgets in Genesis child theme

There are mainly two different steps, and these steps are pretty straightforward.

Your very first step is to register the sidebar and so that we could graphically add widgets to our sidebar area. In your second step, you will have to add support for widget area on your front page.

Remember adding custom functionality to themes means to edit them. If you make any mistakes while editing the codes which are usually in PHP, then you might see some errors or warning on your website. So I will again request you to make the backup of your site.

Step 1. Registering custom sidebar

Please copy the code provided bek=low in your child theme’s functions.php file. I will suggest to paste in directly to the bottom of functions.php file. Make sure to copy it exactly as it has been listed here or it may break your website temporarily.

genesis_register_sidebar( array(
'id' => 'home-featured',
'name' => __( 'Home Featured', 'themename' ),
'description' => __( 'This is the homepage featured section', 'themename' ),
));

genesis_register_sidebar( array(
‘id’ => ‘home-middle’,
‘name’ => __( ‘Home Middle’, ‘news’ ),
‘description’ => __( ‘This is the home middle section.’, ‘news’ ),
) );

genesis_register_sidebar( array(
‘id’ => ‘home-featured-posts’,
‘name’ => __( ‘Home Featured Posts’, ‘themename’ ),
‘description’ => __( ‘This is a widget area that is the home featured posts’, ” ),
) );

genesis_register_sidebar( array(
‘id’ => ‘home-bottom’,
‘name’ => __( ‘Home Bottom’, ‘news’ ),
‘description’ => __( ‘This is the home bottom section.’, ‘news’ ),
) );

As you can see the code, I have added support for 4 different sidebars. Each sidebar has been assigned a custom “id”. In our next step, we will add support for widgets.

Step 2. Adding custom homepage widgets

Now you will have to edit your child theme’s front-page.php file. If there is no such file, then create it and place it in the root of your theme’s folder.

The complete code snippet of the front-page.php has been provided in this gist. In this post I am just focusing on how to register custom widgets.

Now again copy the code snippets provided below and paste it just below the get_header();

In order to register widgets, we need the specific id of the sidebar. Id is needed so that the widget is associated to its destined sidebar.You can see the code that our widget id matches the corresponding id of the sidebar. Furthermore, I have added different but easy to understand classes to every widget. This will be handy for you in case your planning to do heavy modifications to your website.

I don’t think I need to remind you, their’s a comment area below and if you require my help at any stage of this tutorial, just add your comment. I will try me best to solve your problems.