How to Add New Homepage Widgets to Genesis Themes

In an earlier post, I explained how to dd new widget areas to Genesis child themes. Generally speaking, those widget areas show in standard page and post templates and widget sidebars. Those widgets will not show in the homepage. Today’s post will show you how to add new widgets to the homepage template or any other specially designed template.

The method outlined here will only work if your Genesis child theme has a file in its directory called home.php. home.php is the child theme’s homepage template. This template uses a few lines of code to tell Genesis how to build the homepage. If home.php does not exist then you can create it.

Replace the widget’s ID, currently widget-title, with your widget’s name. Use lowercase letters and replace spaces with a hyphen. For example, Top Page Widget would become top-page-widget.

The name of the widget that shows in Appearance > Widgets is stated in the name line of the code. In the above code, Title of the Widget is what would show as the title of the widget under Appearance > Widgets. Replace Title of the Widget with the name of your widget. Capitalize each word and do not replace spaces with hyphens. For example, If your widget is called Top Page Widget then you would replace Title of the Widget with Top Page Widget.

The description of the widget, in the description line, is the widget’s description that shows under the widget in Appearance > Widgets. Replace Description for the widget with a short description for your widget. For example, if this were a top page widget that displays above the content wrap, you would put This widget area is at the top of the homepage above the page content.

Replace both instances of name-of-child-theme with your Genesis child theme’s name. Replace spaces with hyphens. For example, if you were using the Landscape theme you would replace name-of-child-theme with landscape.

Save functions.php

Here is an example of the same code edited as shown above in the examples:

Your home.php file will already contain a list of functions that look similar to the code shown above.

Some, most or all of the existing functions represent widget areas that already exist in your homepage template. Place the above code either above or below an already existing function such that your function code displays above or below an existing function for the widget area that your new widget should display above or below.

Hope that made sense. What I’m saying is this: stick the code where you think it should go.

Edit your function code so that it matches the widget area you registered in functions.php:

Change theme-name-widget-title to your theme’s name and your widget’s title. Use lowercase letters and hyphenate words. For example, if we use the Landscape theme and the widget is entitled top-page-widget then you would replace theme-name-widget-title with landscape-top-page-widget.

Swap all three remaining instances of widget-title with the title of your widget as registered in functions.php (the title of your widget is also its ID). For example, if the widget ID is top-page-widget you would replace widget-title with top-page-widget.

Save home.php, reload your homepage to make sure it loads. If it doesn’t, you’ve made a mistake somewhere. Assuming it does load (and it should), go to Appearance > Widgets and look for your new widget area. Add a text widget to it with the words “Test Widget” in it then reload your homepage to make sure you can see “Test widget” written in the area where your new widget should display.

Here is the code above but this time edited to match the example widget registration code we just added to functions.php:

There might be two lines, three lines or four lines… The important bit to look for is add_action(). These lines prepare WordPress for the existence of a function. Place an add_action line beneath them for your widget. For example,

add_action( 'genesis_loop', 'landscape-top-page-widget' );

Styling Your Widget

Your widget may need some styling to make it display exactly as you want it. This styling is done with CSS and should be attached to a class with the same name as your widget title (it is the title you replaced for widget-title in the line ‘before’ => ‘<div class=”widget-title widget-area”>’,. In the instructions, the class is widget-title; in the example, the class is top-page-widget.

Parts of the widget’s style you are likely to want to change are:

Width – how wide should the widget area be? Specify this as a fixed number of pixels or as a percentage.

Float – should the widget float to the left or right side of the page. Options are left, right and none.

Clear – should any other page element display to the left or right of the widget area. Options are left, right, both and none. If the widget displays at the left border of the page, always clear:left; if the widget is at the right border of the page, always clear:right.

Margin – should there be space to the top, left, right or bottom of the widget area between the widget and its surroundings? Specify this as a fixed number of pixels or as a percentage. May also be set to auto.

Padding – should the content of the widget area be separated from the sides of the widget area i.e pushed inwards? Specify this as a fixed number of pixels.

Border – should the widget have a borderline? Specify this as a fixed number of pixels. Specify its type and a color.