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.
Instructions for creating home.php will be in the next JournalXtra post.
Let’s continue under the assumption home.php already exists in the child theme’s directory.
All files for this tutorial are found in your Genesis child theme’s directory or need to be created in your child theme’s directory.
How to Add New Widget Areas to Your Homepage
Here is where we get a little technical. It is not hard and I am here to help you if you get stuck.
Register the Widget
Think of a name for your new homepage widget area.
Tell Genesis to register a new widget area in the WordPress backend under Appearance > Widgets by opening functions.php and adding this code:
/** Register Home Page Widget Areas **/ genesis_register_sidebar( array( 'id' => 'widget-title', 'name' => __( 'Title of the Widget', 'name-of-child-theme' ), 'description' => __( 'Description for the widget.', 'name-of-child-theme' ), ) );
Now edit the code:
- 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:
/** Register Home Page Widget Areas **/ genesis_register_sidebar( array( 'id' => 'top-page-widget', 'name' => __( 'Top Page Widget', 'landscape' ), 'description' => __( 'This widget area is at the top of the homepage above the content.', 'landscape' ), ) );
Place the Widget
Now we need to tell Genesis where the widget area should display. This is a little tricky. You will get the hang of it over time, with a little experimentation.
Open home.php and put this function code into it
function theme-name-widget-title() {
if ( is_active_sidebar( 'widget-title' ) ) {
genesis_widget_area( 'widget-title', array(
'before' => '<div class="widget-title widget-area">',
) );
}
}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:
function landscape-top-page-widget() {
if ( is_active_sidebar( 'top-page-widget' ) ) {
genesis_widget_area( 'top-page-widget', array(
'before' => '<div class="top-page-widget widget-area">',
) );
}
}Toward the top of the home.php file will be a section of code that looks similar to this:
add_action( 'genesis_loop', 'theme_name_template_name_widget_one' ); add_action( 'genesis_loop', 'theme_name_template_name_widget_two' );
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.
- Background – should the widget have a background color or an image?
Example CSS for a widget area could be:
widget-title {
width: 100%;
float: left;
clear: both; /* This stops anything sitting left or right of the widget */
margin-top: 15px;
margin-bottom: 15px;
margin-left: 0;
margin-right: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
border: 1px solid black;
background-color: transparent;
background-image: none; /* if you use an image, replace none with url(http://where-is-your-image.com/image) */
}What’s Next?
My next post shows you how to make a new homepage template or widgitized template for any other purpose.
Any Questions?
Let me know if you haven’t understood any of the above guide and I will do my best to fill in the gaps.
wpDiscuz