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…

12
Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of

Thank you very much for this guide. You’ve just solved a problem I’ve been scouring Google for for hours.

Gabe

Hi Tutorial worked great, but one question: How could I limit this to the homepage only? I’m sure it would involve adding a snippet to the home.php file. But would you mind providing some specifics on that for me? Thanks very much in advance

Cwalker

My genesis continues to not recognize my hook when put in the functions.php. It has no other registrations for sidebars, but it does have a call to widgets.php. I’m using the Harmony theme. Any advice?

NeilC

This is probably the easiest to follow instruction I’ve seen yet. Certainly got me adding a widget in no time. One thing I can’t work out is why this happens: I’ve made a widget area called “testwidgetarea”. I want to test the css targetting so I add a line to styles.css:

.testwidgetarea {border: 1px solid red;
background-color: grey;} but nothing happens. Yet if I use an id instead of a class and use the same line but with a # it works as expected. Clearly I’m missing something with regards to how css works?

Thanks anyway

Pablo

A really good blog, I liked so much, you have gained a new follower

Regarding the newsletter, I would like to add a widget, to show the subscription area in every post and page. My question is, How do I change the code you show on the post?

Thanks for your help

Pablo

Great finally something worked, will it work on other?

Andrew

Hi. Is there a limit to the number of widget areas that I can create using a Genesis theme? I don’t think I have that many on my site yet I keep breaking my site when I try to register a new widget area using my ftp file manager. It cannot be a matter of having made a typing error since all I’m doing is copying and pasting the exact php code from another previously registered widget area and slightly altering the widget id, name, and description. Weird. Previously registered widget area: genesis_register_sidebar( array( ‘id’ => ‘bronxville-widget’, ‘name’ => __(… Read more »

Free to your inbox

Join our mailing list to receive the latest news and updates from JournalXtra.

You have Successfully Subscribed!