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.

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.

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,

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…

Win the battle. Social Warfare Dynamik Website Builder Author Pro

Leave a Reply

10 Comments on "Add New Widget Areas to Genesis Child Themes"

Notify of
Sort by:   newest | oldest | most voted

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

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

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?

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

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?

wpDiscuz

Free to your inbox

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

You have Successfully Subscribed!