HowTo: Add New Widgets to Genesis Child Themes

Easier to do than adding a new custom menu to a Genesis child theme. Just a few lines of code in the child theme’s functions.php file is all you need to add a new widget area anywhere within your WordPress site.

Genesis uses ‘hooks’ to make it easy to latch code into the theme. A full list of Genesis hooks is available here.

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

To show you how to  do this, I’ll show you a block of code to add a widget then I’ll show you how the code works.

Look at this code snippet to add a new widget below above the content:

That code goes into the bottom of your child theme’s functions.php file. It can go above or below any other code for adding widget or menu areas into the child theme. It will display where WordPress and Genesis is told to display it irrespective of where it is in functions.php relative to other widgets and menus.

How the code works

The code is split into two blocks:

  1. Register Widget Area
  2. Add Widget Area

The first block tells Genesis that a  new widget area is being created. Genesis relays this information to WordPress. The information given to Genesis during the widget area’s registration is:

id

This gives Genesis and WordPress an internal name (identity) 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 name tag displayed on the widget area in the WordPress backend under Appearance > Widgets.

description

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

The second block of code adds the widget area to the child theme. The important bits are:

  • add_action ()
  • function {}

add_action tells Genesis where to place the new widget area and which widget area id to associate with new widget area. In this case, add_action( ‘genesis_before_content’, ‘widget_before_content’ ); tells Genesis to hook the widget area with the id widget_before_content into the location hook named genesis_before_content.

function () tells Genesis what to do now it has created the widget. In this case, it is told to make a function with the same name as the widget area id and to create a dynamic sidebar named after the widget area’s id. If we leave out the div tags, that function is, function widget_before_content() { dynamic_sidebar( ‘widget_before_content’ ); }

It is important to be consistent with the widget_id and the title of the dynamic_sidebar. If these two do not match, the widget content won’t display.

In the WordPress dashboard under Appearance > Widgets, the widget areas will display in the same order as they appear in functions.php. If you want to rearrange the display of the widget areas in Dashboard > Appearance > Widgets, find the code for a widget area you want to reposition, cut it then paste it above or below the code for the widget area you want it to display above or below in the Widget section of the WordPress backend.

Here is the code for adding a new widget area to a Genesis child theme again but this time with simpler to follow titling:

When creating your own sidebars (widget areas) for Genesis:

  • Use the above code snippet in your Genesis child theme’s functions.php file. Change every occurrence of widget_title to a unique title for the widget. Use only letters and underscores in the widget_title.
  • Tell Genesis where to put the widget area by changing genesis_before_content to the title of the Genesis hook closest to where you want the widget to  display. 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.

Adding Footer Widgets

In the child theme’s functions.php file, look for where it says

Or similar. Change the number 3 to the number of footer widgets you would like in the theme’s footer. If that line does not already exist, add it to the bottom of the file.

You will need to style the footer widgets to tell Genesis how wide to make each footer widget.

Can I say Which Pages the Widget Shows on?

Yes. WordPress has a good set of conditional tags for testing the type of page that is being displayed. We can use those conditional tags to determine when a widget should display.

Look at this example for controlling which page content of the widget displays on:

The /** Add Widget Area **/ section is different to previous examples. It has an if statement that tells WordPress to only display the widget area on page ID 4876 (you’re currently viewing page with ID 4876 on JournalXtra).

Look at the list of WordPress conditional tags shown at the page linked below. You can use any one of those conditional tags in place of is_single().

You could just as easily use a WordPress plugin that lets you choose in Appearance > Widgets which page or pages widgets display on or do not display on but that is not always an option when you design a child theme for a client.

The full set of conditional tags are listed here.

What’s Next?

For me, a bite to eat. For you, tweet this guide and share it in your Facebook group and I might have a big cream cake delivered to your door.

If you need to add a widget to your homepage or to a custom template, follow this JournalXtra guide.

Comments

  1. Gabe says

    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

  2. Cwalker says

    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?

    • says

      Double check the function names and the widget class/ID.

      Also, make sure your’re using the correct functions.php file. You need to use the one in your child theme’s directory.

  3. NeilC says

    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

  4. Pablo says

    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

Leave a Reply