Add New Widget Areas to Genesis Child Themes

Just a few lines of code in a child theme’s functions.php file is all you need to add a new widget area anywhere within your Genesis powered WordPress site.

Genesis uses ‘hooks’ to make it easy to latch code into the theme. A visual guide to Genesis hooks is available here.

To add a new widget area to a theme we need to name the widget area, tell WordPress the widget exists and tell Genesis where to put it.

Look at this block of code. This adds a widget area after the page content of a Genesis site.

/*
*	Register widget area
*/
 
genesis_register_sidebar( array(
	'id' 			=>	'after_content', // This is the internal ID of the widget area
	'name'			=>	__( 'After Content', 'theme-name' ), // This is the name shown in Appearance > Widgets
	'description' 	=>	__( 'Widget area under single posts. Displays immediately under main post content.', 'theme-name' ) // Description in Appearance > Widgets
) );

/**
* Create widget area
**/

/* After Content Widget Area */

function theme_name_after_content_widget_area_content() {
	// Make sure the widget ID is the same as above (e.g. after_content)
	genesis_widget_area( 'after_content', $args = array (
		'before'              => '<div class="wrap"><div class="after-content widget-area">',
		'after'               => '</div></div>',
		'before_sidebar_hook' => 'genesis_before_after_content_widget_area_content',
		'after_sidebar_hook'  => 'genesis_after_after_content_widget_area_content'
	) );
}

// genesis_after_content is the hook this widget area is inserted into
// theme_name_after_content_widget_area is the name of the function that contains the widget code (see above)
add_action( 'genesis_after_content', 'theme_name_after_content_widget_area_content', 12 );

That code goes into the bottom of your child theme’s functions.php file.

When creating your own widget areas for Genesis:

• Use the above code snippet in your Genesis child theme’s functions.php file.
• Change every occurrence of theme_name to the name of the child theme. Use only letters and underscores in theme_name.
• Change every occurrence of after_content to a unique title for the widget. Use only letters and underscores in widget_title.
• Tell Genesis where to put the widget area by changing genesis_after_content to the name of the Genesis hook that you want the widget area to display within. For example, genesis_after_content or genesis_before_header or genesis_after header. More Genesis hooks are listed here.
• You can style the widget area by using a CSS class name. The class name should be the same as the widget title.

How the code works

The code is split into two blocks:

1. Register Widget Area
2. Create Widget Area

The first block tells Genesis that a  new widget area is being added to the theme.

The second block sets the HTML that will be used around the widget’s content and adds the widget area to the site.

Registration

The information given to Genesis during the widget area’s registration is:

id

This gives Genesis and WordPress an internal name (i.e a handle) to know the new widget area by. This is used to refer to the widget area in the second block of code.

name

This is the title displayed for the new widget area in the Appearance > Widgets.

description

This is the description shown for the new widget area in the WordPress backend under Appearance > Widgets when the widget area is opened up for widgets to be added to it.

Widget area creation

The second block of code adds the widget area to the child theme and sets the HTML that will wrap around the widget area.

The important bits are:

• function {}
• add_action ()

function () tells Genesis what HTML to use around the widget area. This is important because this is how we include the CSS classes needed to properly style the widget area.

add_action tells Genesis to make the new widget area active and where in the theme layout the widget area should display.

It is important that the widget_id in the Register Widget Area block is the same as the first parameter given to the genesis_widget_area() function in the Create Widget Area block. For reference, the above widget area’s ID is after_content.

What will happen

In the WordPress dashboard under Appearance > Widgets, the new widget area will display with the name it is given in the Registration block e.g. After Content.

Any widgets added to the widget area will display in the frontend of the website in the location of the hook the widget area is attached to e.g. genesis_after_content.

For reference only

Here is the code for adding a new widget area to a Genesis child theme again. This time with easier to follow titling. Do not put this one into your theme.

/** Register Widget Area */

genesis_register_sidebar( array(
	'id'		=> 'widget_id',
	'name'		=> __( 'Widget Name' ),
	'description'	=> __( 'Widget Description.' ),
) );

function theme_name_widget_area_function_name() {
	genesis_widget_area( 'widget_id', $args = array (
		'before'              => '<div class="wrap"><div class="after-content widget-area">',
		'after'               => '</div></div>',
		'before_sidebar_hook' => 'genesis_before_widget_area_function_name',
		'after_sidebar_hook'  => 'genesis_after_after_widget_area_function_name'
	) );
}

add_action( 'genesis_hook', 'theme_name_widget_area_function_name', 12 );

Add footer widgets to Genesis child themes

In the child theme’s functions.php file, add or find the text add_theme_support(‘genesis-footer-widgets’).

For example,

add_theme_support( 'genesis-footer-widgets', 3 );

Change the number 3 to the number of footer widgets you want to have in the child theme’s footer.

If you need help, leave a comment…

Sharing is caring!